Designing a Page Editor Experience: 4 - Personalization and Multivariate Testing

October 10, 2013

One of the nicest features that came along in the last few Sitecore versions was the rules engine. Along with that power was the ability to harness the conditional sublayout rendering to change the datasource or component design based on specific visitor information, otherwise known as personalization. There's all kinds of identifiable markers that are available to you about your end users such as location and search keywords. You can use this information as is to create rules, you can create "profiles" which categorize your users to help you reach your intended audience and you can use those "profiles" to build "Engagement Plans". I don't plan on going into detail about how to create these profiles or engagement plans since it's a near science unto itself but I did find a quick guide on personalization terms and an excellent articles on setting up personalization profiles and creating engagement plans.

Another powerful feature is Multivariate Testing. Multivariate Testing allows you to determine which configuration for a component (datasource and design) is best meeting your goals. Again I'm not going to detail how to develop a strategy for testing because there are articles dedicated to explaining multivariate testing, and optimizing your testing.

If you're going to use the personalization or multivariate testing aspect of the rules engine, you will need to have a special Sitecore license since it's a separate product. If you don't have a license you'll be wondering why you don't see these options in your system.

Once you've decide on how you're going to target key demographic groups, you're ready to begin applying some of the rules to your components(sublayouts, renderings, web controls). These rules are applied in the presentation details window of an item. When you open up the presentation details window is that there are two new buttons: Presonalize and Test.



If you select the controls section then select a component and click on the Personalize button, you'll get the personalization window.


What you're seeing is a list of the conditions(rules) that will determine how and what the sublayout displays. You're provided a default condition which doesn't contain a condition or rule since it's the default condition and will be used when no other more specific condition is met. All conditions allow you to hide the component, personalize the content(change the datasource) or personalize the component(change the sublayout). If you choose to personalize the content, you'll be provided with another dialog window to choose a content item from a tree which is sourced from the sublayout's Datasource Location field.

set content

If you click the Enable personalization of component design, you'll see a Personalize Component section appear.


By clicking on the grey "..." button at the bottom of that block, you'll be prompted to select a new sublayout.

Enable personalization of component design

When you want to create a new condition, you'll start by clicking on the New Condition button. Another condition section will be added which you can then name.

new condition

The hide component and personalize content ares are provided but there are also a few other buttons. There is an action button which allows you to remove or rename the item.


There's also an Edit button in the condition section.

edit condition

If you click the Edit button, you'll be shown another popup that will allow you to build a condition from a series of rules.

edit rules

Here I've chosen to build a condition for visitors from Boston searching for the text "Sitecore" and changed the datasource to child1.


Once I click ok, you'll move back a step and find that the icon for the sublayout you just personalized has just changed to display a "2" to indicate that there are now two conditions on it.

presentation details

All of this is of course accessible from the Page Editor as well and in some ways is easier to work with from the Page Editor. If you click on a sublayout, you'll see the border with the helpful toolbar but with the personalization license there are a few new items. First is the button to personalize the content.

page editor buttons

There's also a button to add A/B tests.

page editor button

Then there's a bar that helps you navigate the conditions associated with the item.

page editor button bar

The arrow allows you to change the condition your viewing so you can quickly scroll through them and see how they'll each look. There is a numerical indicator next to it so that you'll know what number you're on in the list. The drop down area provides a summary of the condition rules and allows you to jump directly to an individual condition. There's also an Edit Conditions button that will popup a dialog window to edit the conditions.

You can also set some specific personalization settings through the component properties which are available in the presentation details when you click to edit a component.

component properties

If you have the license for this but don't see the fields, you can try the solution described here.


If you select the controls section then select a component and click on the Test button, you'll get the variation window.

new test

If you click on the New Variation button, you'll see a new variation item appear which you can name and set the properties (datasource and sublayout) just like with personalization.


You'll need to have at least two test variations for the OK button to be accessible.


Unlike when you personalization a control, you won't be provided any icon but you will notice that the personalize button is now greyed out.

greyed out personalize button

Again, you can work with these settings from within the Page Editor which can sometimes be easier.

test button bar

Unlike the personalization, you'll have a new toolbar in the Page Editor at your disposal: Testing.

test toolbar

In the toolbar at the top, there's a Components and Combinations field that will highlight the sublayout that it refers to on the page when you click on it.

select test

Tests must be started so when you're ready to run it you'll want to click on the Start Test button. When you do you'll be provided a friendly warning to make sure you want to proceed and ask you to provide a name for the test.

start test

All your tests will be stored in Sitecore and can be viewed in the Marketing Center application available from the Sitecore start menu.

marketing center

While the test is running you'll see the toolbar change and give you the ability to stop it with the Stop Test button.

run test

When you click on the stop test, you'll see a popup that will ask you how to handle the components being tested. The form will allow you to select which component setup you want to keep and the numbers along the right will indicate their performance based on your goals. Here they're all zero but the higher number would indicate better performance.


Choose a single item comprised of combinations.

stop test combinations

Or you can stop the test and revert to the original design by clicking on a text link at the bottom of the window. This last option will remove the tests from the sublayouts and return you to the original state of the component before you added tests.