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. The following table shows which properties are available in which category. The table displays all available properties. 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.
Category
Properties
Advanced Properties
Text
font-family
font-size
font-style
font-weight
text-align
line-height
color
text-transform
text-decoration
overflow
text-shadow
word-wrap
word-break
word-spacing
font-variant
letter-spacing
Background
background-repeat
background-image
background-position
background-color
background-attachment
opacity
Border
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-radius
Dimensions
width, height
margin-top
margin-right
margin-bottom
margin-left
padding-top
padding-right
padding-bottom
padding-left
max-height
min-height
max-width
min-width
Layout
float
position
z-index
clear
left
right
bottom
top
display
visibility
clip
Other
border-collapse
border-spacing
list-style-type
list-style-image
list-style-position
cursor
N/A
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 a 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.
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 if the element selected is a link, input element, button, or <a> tags. 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.
