Experiments

Experiments (also known as web optimization) allow you to make visual changes to your website like adjusting colors and fonts, hiding elements on your website or changing the HTML of any element using a simple visual editor. They work on a similar basis as web layers - you can create multiple variants, show them only to a specific audience and AB test them. Experiments automatically track a single event experiment when they are applied to your website, so you can make further analyses based on the data collected from these events.

You can watch this video to get an overview of the basic features:

Why you should use Experiments

Experiments can dramatically decrease your time to execution as they allow you to make small changes to your website without having to know how to code or rely on your IT department. Moreover, any changes can be AB tested and evaluated right away using the Exponea interface.

Creating an Experiment

You can create a new experiment by going to Campaigns > Experiments > + Create new

You will be prompted to enter the URL of the website 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. If you want to preview experiments on websites that are not integrated with your project, you can download our Chrome extension.

After clicking on the Create button, you will be taken to your website and an inline visual editor will be loaded.

Visual editor

Now you are in the visual editor with the possibility to select and change any element on the website. Let's have a look at each element of the editor now, as it is numbered in the screenshot below.

1

Create and switch between variants of your Experiment. You can then compare their performance through an AB test.

2

Expands the list of all modifications you made. Clicking on a modification will take you back to the editing menu of that element so you can adjust it again.
You can also delete each modification, which will bring that element back to its original state.

3

Undo / Redo function

4

This menu pops up when you click on an element on the website. Each function is explained in Modifying elements.

5

Shows the number of selected elements. You can select more elements on the website by holding the shift button while clicking on them.

6

Switch to the "browsing mode" if you need to navigate on the website and access another page.

Close / Save

Exit the visual editor either with or without saving your changes. This will not launch the Experiment yet. In order to do that, you need to exit the visual editor and click "Start" in the Experiment menu.

7

Generates a link to your modified website that you can share with others. Note that this is only to preview the changes, the Experiment will not be launched.

Modifying elements

After clicking on any element, a menu will pop up presenting you with several options on how to modify that element. We will now explain every option.

Change

Use this option to change the element visually. You can edit the dimensions, colors, fonts, and spacing of the element. You can enter the colors manually (using the hex or RGB color format) or use the color picker. When changing a font, make sure it is loaded on the website. And finally, the sizes need a number and a unit (for example 43px or 12em). The format you should use is indicated in the fields as the current values are already filled in.

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.

HTML

Editing the HTML allows you to change the HTML source of the element as well as the text contents by rewriting the text of a paragraph or a headline. You can use Jinja here to personalize the text. You can also make any additional changes to the element's source like changing the class or the attributes of the element.

Insert

This will open a menu with your web layers and HTML blocks saved in the Asset Manager. In both cases, you can either pick an already existing template or create a new one using the code editor.

See the next section to learn how to go about placing the HTML block on the website.

Move

Moving an element has two parts. Before selecting an anchor point on the website, you need to select whether you want to place your currently selected element before or after that anchor point. You can also put it inside that anchor point as the first or last child.

Before and After are self-explanatory and also the most-used options – the new content will be placed right before or after the selected element. 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. If you put the element inside as the first or last child, it will inherit the style of the anchor element. See the screenshot below.

Next, click on the "target" button and then select the element which you want to use as the anchor point for these settings.

Remove

You can delete the selected element completely. After clicking this button, you can also choose whether you want to leave blank space instead of this element or not.

Select parent / child

Change your current selection to the parent or child of the currently selected element as defined in the CSS code. Selecting a "parent" element means going one level up within the website structure and vice versa for the "child".

Saving your work

Confirm your changes by clicking on the Save button in the top menu. You will return back to Exponea where you can edit additional settings of the Experiment and set up AB testing.

After you saved the changes in the visual editor and are taken back to Exponea, you still need to save the Experiment as a whole. Your changes will be lost otherwise.

Design (AB test settings)

In the DESIGN tab, you can create multiple variants and set up their AB testing. Read more on AB tests here.

Settings

You can modify settings of the Experiment in the settings tab.

Conversion goal

The automatic AB test optimization and the automatically generated evaluation report are based on this setting.

Schedule

You can choose to display the experiment instantly or set a specific launch date.

Show on

Choose where to show the experiment: On every page, page with specific URL, page containing URL or by creating a regular expression where you define a particular set of URLs.

Javascript condition

You can specify custom javascript as a condition for displaying an experiment. This code is then executed before the experiment is applied to the page, either by the SDK or by the non-flickering script. Jinja is NOT supported.

Target devices

Show on any device or only desktop or mobile.

Display

Set until when you want to keep showing the experiment for each eligible customer.

  • Once: Shown only once for the whole period of running the campaign. This is tracked when the event experiment tracks action=show.
  • Once per visit: Shown only once between a session_start and session_end. Once action=show is tracked, it will be shown again only in the next session.
  • Always: Will be shown all the time for each visit, each day and after each page refresh even when the user closes the web layer.

Category

Choose which consent is required for a customer to have to receive this campaign.
Read more on consents here.
If you don't use consents yet, you will see the campaign groups setting here.

Audience

Define your custom audience that will receive this email campaign. You can use our standard customer and event filters.

Tip for testing your Experiment

For testing purposes, we recommend setting the condition "Show on page URL containing" to something like "#test". After you have launched the Experiment, you can simply go to www.yourwebsite.com/#test and you will see it in the real environment. You can even send this link to anyone as it will work until you stop the campaign.

Evaluation

Every Experiment has a built-in evaluation dashboard. This dashboard displays common metrics and analyses. If AB testing is enabled for the Experiment, the dashboard will also show you how each variant is performing through funnels and accompanying tables.

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.

Troubleshooting

Problem 1: I have launched the experiment but cannot see it.
There can be several reasons for this:

  • If you use AB testing, you might have been assigned to the control group, which is usually set to show the original. You can check whether this is the case by going to Customers and checking what events have been tracked to your profile. Alternatively, you can try using our Chrome extension (still in Beta stage) and see what events are being tracked live in the console.
    If this is the case, then either change the AB testing or try opening the page in an incognito mode until you get assigned to a variant (the incognito mode changes your cookie every time you open it).
  • In Settings:
    • Check the condition "Show on" and make sure it matches the page that you are loading.
    • Check "Category": If the campaign is set to show only to customers with specific consent, your profile must have that consent too.
    • If you specified any conditions in the "Audience" part, you must match them.

Problem 2: The campaign showed once but it doesn't load again

  • If the "Display" option in Settings is set to "Once" or "Until interaction", then you will either need to change it or use the incognito mode to see the campaign again.

Experiment event attributes

You can read on experiment event attributes in the System events article.

Experiments


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.