Sitecore Personalisation – Automatically changing content
In the previous post I covered how to get personalization working correctly for your site. Now its time to start doing something exciting.
With Personalization working the next step is to structure your content so that it is in the form of reusable blocks and develop Sitecore sublayouts to dynamically display these blocks of content.
In this post I’ll go over the basics to achieve this and get you giving personalised experiences like a pro.
The Datasource Field
Essentially personalization of content works by varying the Item referenced in the Data Source field of the Sublayout based on when a rule has been met.
Fundamentally this means the content you are referencing should be a self-contained Sitecore Item not fields of the Item in context. This allows the content be swapped with content of a similar type without reworking of content/code and used throughout the site.
For example, below I have created one such self-contained Item which holds content for a promotion with a Call to Action to get the user to complete some action on the website.
I want this content to display in a Promotional Panel on a page, so for the Sublayout I add a reference to Item in the Data Source field of the default Personalization condition.
I have also created a second promotional Content Item with a different Call to Action to get Users to sign-up to a Personalization Event. However I only want this Content to display to Users who have an understanding of Personalization. To do this I need to create a new condition.
Setting up a new condition
Before creating the condition, I first need to create a way to mark a user as a understanding Personalization. This is done by creating a new Persona Profile Key in the Marketing Centre.
With this created its the matter of assigning this Personalization Guru Persona to a page which has content introducing the concept. This can be done via the Assign Profile Cards on the item such that when the user views that page he is given accumlative score in this Persona type.
Its finally time to create the condition, in the Personalization modal for the Splash Panel sublayout I am able to select the second promotional content and choose the condition which displays it.
In the this example I want a visitor who has a Personalization Guru score of 10 to see this second piece of content.
Now that I have set up the Content and the Conditions in which it is passed to the SplashPanel Sublayout I need to write code to handle the value coming in via the Data Source field. This can achieved by accessing the field, retrieving the Sitecore Item Id in its value then making a call to the database for the Item.
The code below is a nice way to achieving this. I would recommend placing the DataSource property in a public place all your
Sublayouts can access, such as a UserControlBase which inherits from the default UserControl.
|public partial class SplashPanel : UserControl|
|private Item _dataSource;|
|public Item DataSource|
|if (_dataSource == null)|
|var parent = Parent as Sublayout;|
|if (parent != null)|
|_dataSource = Sitecore.Context.Database.GetItem(parent.DataSource);|
|protected void Page_Load(object sender, EventArgs e)|
|titleText.Item = DataSource;|
|straplineText.Item = DataSource;|
|clickThroughLink.Item = DataSource;|
|Sitecore.Data.Fields.ImageField imageField = DataSource.Fields["image"];|
|dPanel.Attributes.Add("style", "background-image:url(\"" + MediaManager.GetMediaUrl(imageField.MediaItem) + "\")");|
The markup for the panel will then make use of Sitecore’s components to display the appropriate content.
|<div class="call-to-action" runat="server" id="Panel">|
|<sc:Text runat="server" ID="titleText" Field="Title" />|
|<sc:Text runat="server" ID="straplineText" Field="Strapline" />|
|<sc:Link runat="server" ID="clickThroughLink" Field="Link" CssClass="button" />|
The User Experience
The result is that a User lands on the home page and the SplashPanel displayed the first Content Item. The User interacts with the Call to Action and is taken to a Page explaining the concepts of Personalization.
The page is categorised as being related for the Personalization Guru with a value of 10 points. The User is automatically given this score in their Personalization Guru persona.
Now when the User accesses the home page again the SplashPanel personalization runs the condition to check if the User has a Personalization Guru score of 10 or more. The condition is satisfied and the second Content Item is shown with the Call to Action to get this new Personalization Guru to attend an event.
And that’s it!
The guiding principles to let you loose on personalization and customise the experience your Sitecore users go through.
However, with great personalization comes great responsibility. Be sure not to go over the top with personalization as Search Engine indexers will only be able to view the default conditions so important content won’t be indexed if you’re not careful. Therefore use personalization to supplement the experience not form the entire basis of the experience.
The next topics I’ll cover are using personalization to change the components on the based on the roles of the Users’ account and how to test the effectiveness of your personalization.
Thanks to Matt for lending me his Css skills!