Configure the variant content

Initially, the experiment configuration screen loads with one variant tab. The content of this tab is identical to the control version.

You can select whether to view the variant or control version of the web page by clicking on the appropriate tab in the experiment configuration header panel.

You can have up to five variants defined for the experiment. To create an additional variant, click on the large plus sign beside the available tabs. This creates a new tab with content identical to the control tab.

You can rename a variant tab by clicking on the down arrow beside the name of the tab and selecting Rename from the menu displayed.

When a variant version is displayed, you can select the element you wish to change by clicking on it. When the cursor moves over an element that you can select, the element is highlighted in red and the border displays the kind of element it is.

Note: Disabled or inactive elements cannot be selected directly. If you cannot directly select an element you can select the parent element and then either edit the parent element or use the Select Child option on the Element Configuration menu for the parent.

Once you click on the element, the Element Configuration panel is displayed.

The Element Configuration panel only displays the configuration options that are available to the currently selected element. For example, if there are no child elements then the Select Child option is not displayed.

The configuration options available are:

Edit: This option is available to all element types and you can use it to edit the properties of the selected element. If you click on it, the element configuration panel displays a set of tabs containing whichever of the following are appropriate for the element you selected:
- Editor: This opens a rich text editor that allows you to directly edit the text and the formatting of the text associated with the selected element.
  Note: When using the rich text editor, you can open a window providing accessibility instructions for the rich text editor by pressing Alt+0.
  
  The rich text editor also allows you to access the HTML source code by clicking on the Source button. This allows you to directly edit the HTML source code or to view the HTML for changes you have made to the element using the rich text editor.
  
  Note: If the Source mode is not enabled, pressing ENTER while editing creates a new element within <p> </p>tags while pressing SHIFT + ENTER adds a <br /> tag within the current element.

Style: This allows you to configure all of the style properties associated with the selected element. The properties are grouped together by category. Some of the properties included here are only available on specific browsers, and the values for the properties may also be restricted by specific browsers.

Classes: This allows you to assign a defined CSS class to the specified element.
Edit Image: If the selected element is an image element you can define the image properties using this option. The configuration options available here are:
- Image URL: This is the source URL for the image.
- Alt Text: This is the alternative text for the image.
- Title: This is the text displayed in the tooltip for the image.
- Image Size: This is the size at which the image should be displayed. You can select Default, Maintain Original Size, or Manual Resize. If you select Manual Resize then you must enter a value for the height and width of the image in pixels.
Make/Edit Hyperlink: This option is available to all elements which are a container with content. It is displayed as Make Hyperlink, unless the element is already a hyperlink, in which case it is displayed as Edit Hyperlink. The configuration options available here are:
- URL: This is the URL to which the visitor is directed if they click on the hyperlink.
- Title: This is the text displayed as the tooltip for the hyperlink.
- Target: This specifies how to open the hyperlink once the user clicks it.
Custom JavaScript: This option is available to all element types. It is used to execute custom JavaScript at runtime.

Note: There are limits to the JavaScript that can be entered here. The eval function is not permitted and Experiments does not permit you to save any experiment with an eval command in the JavaScript entered here. Please refer to Understand how custom JS is used for more information.

Remove/Undo Remove: This option is available to all elements. It is used to remove, or undo a previous decision to remove, the selected element from the variant page.

Note: In the experiment configuration screen the element is removed, but the space where it was is preserved so that the removed element can be tracked. When the variant is displayed to a visitor, the element is still loaded as part of the web page, but it is not visible on screen.

Select Parent: This is used to switch focus to the parent element of the currently selected element. The element type of the parent element is shown in brackets.
Select Child: This is used to switch focus to the child element of the currently selected element. The element type of the child element is shown in brackets.
- Track Click Goal: This is displayed for any type of element selected, except a page body, or HTML tag. It assigns the selected element as one of the goals for the experiment and opens the Goal Configuration slide panel so that you can configure the goal. For more information on configuring an element as a goal, please refer to the Configure the goals section of this document.

When you make a change to a variant page, the content in that variant’s tab is immediately updated to reflect the changes made. This means you can switch between the Control tab and the variant tabs to see how the changes impact on the variant pages.

You can make as many changes as you wish to the variant page.

Any changes made to elements on the variant page since the experiment configuration screen loaded can be undone by clicking on the Undo button. This undoes the most recently made change, and you can keep undoing changes as long as the Undo button is enabled. Changes that have been undone can be re-applied by clicking the Redo button, and these changes are re-applied in the order they were originally applied.

Elements that have been changed on the variant tab are shown with a green border that includes a number in the top left to show how many times the element has been changed.

If there is more than one variant tab defined for the experiment you can delete a variant tab by clicking on the down arrow beside the variant name and selecting Delete from the menu displayed. If you delete a variant, any changes you have made are lost and the deleted variant cannot be reinstated.

Prevent element flicker

If a visitor is assigned to a variant path, there may be occasions when Commerce loads the control content very briefly before the Experiments rules run and the correct content is shown to the visitor. This only applies to experiments created using the Experiments UI, and not to experiments created using the Experiments slot on the Design page.

In order to prevent this, you can create an extension that uploads an application-level JavaScript module. This module should initially hide content and then only display it after the Experiments rules have run.

The following code sample shows what the JavaScript module could contain. For general information on creating an application-level JavaScript module, see Application-level JavaScript examples.

define(
          //-------------------------------------------------------------------
          // DEPENDENCIES
          //-------------------------------------------------------------------   
        ['pubsub', 'ccConstants'],   //-------------------------------------------------------------------
          // MODULE DEFINITION
          //-------------------------------------------------------------------
          function(pubsub, CCConstants) 
{     "use strict";     
return {       // code triggered by the experiment.rules.ran
        event - use to show elements       experimentsRan: function(data) {
                // if needed, this code can be made more specific, eg. Only run for a
                // specific URL         $('#myElement').show();       },       // code to be run to prepare for Experiments – use to hide elements
        to       // reduce flicker       pageReady: function(data) {
                // if needed, this code can be made more specific, eg. Only run for a
                // specific URL         $('#myElement').hide();       },       onLoad: function(widget) {         // subscribe to the
        PAGE_READY event to know when loading a new page         $.Topic(pubsub.topicNames.PAGE_READY).subscribe(widget.pageReady.bind(widget));         // subscribe to the experiment.rules.ran event to know when
        experiments         // have loaded
                $.Topic('experiment.rules.ran').subscribe(widget.experimentsRan.bind(widget));
              }     };   } };

In this example;

pageReady runs when the shopper moves to a new page. This function can be used to hide any elements which might be changed by the Experiment.
experimentsRan runs when the experiment rules have run. This function can be used to show the elements which were previously hidden. The data object passed to this function contains a for property, which is either the URL against which the experiment ran, or a -1 value if the call to load the experiment rules timed out.

You can choose to have one application-level JavaScript module that includes hide and show commands for all elements affected by active experiments, or you can have a separate application-level JavaScript module for each active experiment. The recommended approach is for to use one module, but either approach will work.

Whichever approach you take, the hide and show commands are not needed once your experiment is complete, so you should update your module(s) as appropriate when an experiment finishes.

Understand how custom JavaScript is used

When you are configuring the variant content you can specify some custom JavaScript that is executed at runtime. There are some limitations to the JavaScript that is accepted by Experiments.

The eval function is not supported, Javascript using the function is ignored. Experiments does not allow you to save any Experiment with an eval command in the JavaScript field.
You can make simple calls to functions or methods that are defined on the customer page or built into the browser. Method chaining is not supported.
Parameters may be passed to function or method calls. Permitted parameters are numbers, strings, null and global variables.
The only validation of the JavaScript entered in the Custom JavaScript field is to ensure the syntax is correct and that the eval command is not used. It is your responsibility to ensure that any JavaScript code entered performs the tasks you expect.