Experiments

Introduction

Experiments (also called Web Personalization) allow you to make visual changes to your website. They enable you to make various modifications like adjusting colors and fonts, hiding elements on your website, or changing the HTML of any element.

The changes you make to your website can be A/B tested, just like Web Layers. This allows you to measure the impact of your changes and make confident conclusions based on the data that Exponea collects. Experiments automatically track a single event when they are applied to your website (the event is called experiment), so you can make further analyses based on the data collected from these events.

Use Cases

Experiments are very flexible and support a wide range of uses. Some of the most common use cases are listed below.

  • Making small changes to your website without having to rely on your IT department to implement the changes. You also don't need to know how to write code because Experiments offer the possibility of making the changes in a visual editor.
  • A/B testing a modification – for example testing two different button variations. You don't have to implement the A/B testing on your website, you can just use Exponea instead.
  • Making temporary modifications, for example, for a special event. Experiments can be limited to a period of time. You can also use more filters which will be discussed later in this article.

Creating an Experiment

Start by going to the list of Experiments from navigation.

Then, click on the Create new button and you will be shown the setup modal.

Now, enter the URL of the website that you want to modify with the Experiment. This might be the homepage of your website or any other page that you wish to adjust. Please note that this does not limit the Experiment to this URL, you are only going to set it up on this URL.

The page on the URL you enter must be integrated with the current project, otherwise the experiment won't work. Check out this guide on how to integrate your website with Exponea first.

When you click on the Create button and wait momentarily, you will be taken to your website and an inline visual editor will be loaded.

For now we will just do just a simple modification and then talk about the various modifications you can make on your website later. Click on the button that says New modification (in the left sidebar, as highlighted in the image above). You can select an element on your website. Select any element on your website, for example a button.

Now select Change style and change the background color of the button. If you selected something else (like a link for example), you can change the text color instead.

Now confirm the changes you just made by clicking on the Save button at the bottom of the sidebar on the left.

You could make many more changes in this Experiment but for now, let's stick to the basics. When you are ready, click on the Done button in the top right corner to confirm the modifications you just made.

The modifications will not be displayed to your customers yet so it is safe to save them.

Now you will be taken back to Exponea to edit the Experiment and save it.

You can give a proper name to the Experiment now, such as "Change button color". Finally, save the Experiment. Just like with Web layers, the Experiment won't be show to your customers until you start it.

Settings

When you switch to the Settings tab, you can see that the Experiment can be configured.

Similar to Web Layers, you can adjust these settings:

  • Conversion goal – this will be used in the evaluation dashboard
  • Schedule – configure the dates and times when the Experiment will be enabled
  • Page filter – configure on which URLs the Experiment will be applied
  • Target devices – desktops, mobile devices, or both
  • Display frequency – how many times per session the Experiment should be applied
  • Audience – a customer filter to select customers who will receive the Experiment

Evaluation

Every experiment has a built-in evaluation dashboard. This dashboard displays common metrics and analyses for the Experiment. If A/B testing is enabled for the Experiment, the dashboard will also show you how each variant is performing.

If you want to customize the evaluation dashboard, you can save it as a custom dashboard using the menu in the top right corner next to the Save button.

Using the Visual Editor

The Visual Editor runs on your website and allows you to select parts of the website and modify them. You can switch between the variants of the Experiment that you are modifying and make several modifications for each variant.

Starting the Visual Editor

If you want to start the Visual Editor and start modifying your website, choose a variant of an Experiment that you want to modify and click the Edit button. You will be taken to your website and the Editor will load.

You can switch between the variants of the Experiment in the editor in the top left corner when you have no modification selected.

Selecting an Element

Always start modifying your website by selecting an element that you want to modify. An element is a part of your website, such as a button or a paragraph of text.

To start, click the New modification button in the left sidebar. Then, select the element on your website.

The selector will only make sense to you if you know a little of CSS language and its selectors. Don't worry if you do not know CSS, it is not necessary for using the Editor. In short, the selector is a unique identification of the element that you selected and the Editor uses it to locate the element on the website.

If you understand CSS, you can use the advanced settings to further tweak the selector. The Editor will try to create the most appropriate selector for the element that is selected. However, advanced settings allow you to tweak the generated selector by telling the Editor whether it can use CSS classes and nth-child selectors for the element. There's also a slider to tweak the specificity of the selector. Finally, you can override the generated selector entirely and write your own

There are 6 modifications you can use to modify the selected element. Each one of them will be further discussed below.

Exiting the Visual Editor

In order to save the modifications that you make on your website, click on the Done button in the top right corner of the Editor. This will take you back to the Exponea application where you can save the Experiment.

You must go back to Exponea to save the Experiment. If you just close the tab with the Editor, you will lose the changes that you just made!

Modifications

You can make several types of modifications to your website.

Change Style

The Change Style modification allows you to make changes to the styles of the element – the colors, fonts, and spacing of the element. You can enter the colors manually (using the hex color format) or use the color picker. When changing the font, make sure it is loaded on the website. And finally, the sizes need a number and a unit (for example 43px or 12em).

This modification type also allows you to change an image on the website and a link's URL address. In order to do that, you have to first select an image or a link.

Edit HTML and Text Content

Editing the HTML of an element allows you to change the HTML source of an element and also the text contents. For example, this makes it possible to rewrite the text of a paragraph or a headline. If you know HTML, you can also make any additional changes to the element's source like changing the class or the attributes of the element.

Insert Element

The Insert Element modification allows you to insert custom HTML anywhere on your website. This allows you to add new elements to the website as well as including custom resources or Javascript code.

Start by selecting an element on the website. This element will be used as an anchor for the new content. Then select the Insert Element modification. Finally, write the HTML code that you wish to insert to the website.

There are four places where you can insert the new content relative to the selected element. Before and After are self-explanatory – the new content will be placed right before or after the selected element. These 2 places are usually what you want. Using these two options places the new content outside the selected anchor element which means that the new content will not inherit the style of the selected element. See the screenshot below.

The two remaining options, Prepend Child and Append Child, puts the new content as the first and as the last child of the selected element, respectively. This means that the new content will inherit the style of the selected element. See the screenshot below.

Move Element

This modification is fairly simple. It allows you to move content around your website. First, you select the element that you want to move. After that, select the container (which is the reference or the anchor element) and the position where you want to move the element. There are four options where to move the element relative to the container and these are discussed in the Insert Element modification above.

Hide Element

Hiding an element is a very simple modification. All it does is hide an element on the website. The element is not entirely removed and it leaves a blank space.

Delete Element

Deleting an element from the website removes it entirely. That means that, unlike the Hide Element modification, when an element is deleted, it will not leave any blank space.