_Experiments_ (also known as _web optimization_ or _web personalization_) allow you to make any changes to your website using a simple visual editor without the need deploy a code on your website (**What You See Is What You Get** editor). Our editor supports changes like adding or removing whole blocks, adding recommendations, inserting web layers or adjusting colors and fonts in various ways. They also allow you to personalize your website using the data from Bloomreach Engagement by [using Jinja](🔗). Experiments 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 called `
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:
Experiments can significantly decrease your time to value 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 Bloomreach Engagement interface, and you can use the data about your customers and personalize the web for them [using Jinja](🔗).
# What is an Experiment
An Experiment is essentially just a list of _modifications_. This list is ordered – the _order of the modification matters_, they are applied to the webpage in the exact order from top to bottom. There are multiple available modification types to choose from and they are described later in the section [Modification types](🔗).
Each Experiment also has a few settings associated with it just like any other campaign. The settings are described in the section [Settings](🔗).
# 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_; it only serves for setting up the experiment.
The page on the URL you enter must be _integrated with the current project before creating the Experiment_, 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 (called the _Experiments editor_) will be loaded.
# Experiments editor
Now you are in the Experiments editor with the possibility to select and change any element on the website. Let's have a look at each part of the editor now, as it is numbered in the screenshot below.
|1||Experiment variants||Create and switch between variants of your Experiment. You can then compare their performance through an [AB Test](🔗) . Read more in section [Experiment variants](🔗).|
|2||List of modifications||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 a modification, which will bring that element back to its original state. Read more in section [List of modifications](🔗).|
|3||Undo / Redo||Undo or redo your changes to the experiment.|
|4||Selector||CSS selector of current modification (or the currently selected element on the page).|
|5||Number of selected elements||Shows the number of selected elements. You can select more elements on the website by holding the **SHIFT** button while clicking on them.|
|6||Browsing mode||Switch to the "browsing mode" if you need to navigate on the website and access another page.|
|7||Mobile preview||Mobile preview.|
|8||Close the editor||Close the editor and return to Bloomreach Engagement without saving your work.|
|9||Preview||Generates a link to your modified website that you can share with others. Note that this is used only to preview the changes, the Experiment will not be launched. The generated link is valid for 24 hours, after that it expires.|
|10||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 back in the Bloomreach Engagement application.|
|11||Modification selection||Currently selected element(s) on the page - when clicking on the page (or element(s) modified by selected modification)|
|12||Modifications list||This menu pops up when you click on an element on the website. Each function is explained in section Modifying elements.|
|13||Top level modification selection||Currently selected head/body of the page - when clicking on the part of page page modified by selected modification)|
|14||Top-level selector||It allows you to insert scripts directly into the head or body of the page, instead of inserting them into specific elements.|
## Experiment variants
Variants serve as a tool to compare different modifications of the same text, picture, structure, functionality, etc. while comparing it to a control group.
You can modify the variants of the experiment using the _variant selector_ (labeled with number 1 in the previous screenshot). It is possible to duplicate, rename, and delete a variant.
There's always a variant called _Control group_. This is how your website looks without the changes in any other variant. This variant cannot be changed or deleted.
## List of modifications
You can access the list of modified elements and the applied modifications using the _Modification list button_. Each modification in the list shows the modified elements and the changes made in the modification.
You can hover over a modification to highlight the edited element. You can also click on a modification to change it.
### Personalized modifications
When a modification is personalized (it contains [Jinja](🔗)), it will be marked in the modification list.
Please note that these modifications load slower than modifications that are not personalized. This also affects any modifications that are applied after the personalized modifications. If possible, sort your modification list in such a way that all (or as many as possible) non-personalized modifications are placed before the personalized modifications.
"Selector" is a [CSS selector](🔗) of the current modification (or the currently selected element(s) on the page).
Whenever you are hovering over an element or selecting an element on the webpage, the editor automatically generates a unique selector for that element. If you hold the **SHIFT** key, you can select multiple elements by clicking, as could be seen in the picture above. The editor then generates a selector that matches all the selected elements.
After selecting an element(s) by clicking on it, you can still edit the auto-generated CSS selector by clicking on the pencil-shaped icon in the top bar. For example, your page may have many different pictures and adjusting all of them would take too much time; select one picture and rewrite the selector in order to select more (or all) elements. You can even write an entirely custom CSS selector to apply modifications to, if you know a little CSS.
When you modify an existing selector or write a custom one, you have to confirm it by hitting the **ENTER** key.
### Unique selectors
Note that when you select an element on the webpage, the Experiments editor always tries to generate a unique CSS selector based on the current elements on the current webpage. However, the editor does not know about elements on the other pages on your website, so this selector might also match some other elements on other webpages (if you don't set up page filters and other targeting). If you want to be 100% sure, either set up filters for the experiment, or use unique IDs for the elements you want to modify on your website. Read more about this in [How Experiments work behind the scenes](🔗) and [Experiments for developers](🔗).
## Saving your work
Confirm your changes by clicking on the _Save_ button in the top menu. You will return back to the Bloomreach Engagement app where you can edit additional settings of the Experiment and [set up AB testing](🔗).
Because of security concerns, it is not possible to save the experiment directly from the Experiment editor. Therefore, _do not just close the browser tab_ when you click on the **Save** button. Instead, wait until you are redirected to the Bloomreach Engagement app and it fully loads. You should see a confirmation message _Success! Your experiment was successfully saved._
## Modifying elements
After clicking on any element, a menu will pop up presenting you with several options on how to modify that element. Different modification types are described separately in section [Modification types](🔗).
### Select parent / child / similar element
Change your current selection to the parent or a child of the currently selected element. You have to understand a little bit of HTML and its structure to use this effectively. Selecting a _parent element_ means going one level up within the website structure. Each element can also contain multiple children and you can select one of them to move down within the website structure.
# Modification types
Use this option to change the element visually. You can edit the dimensions, colors, fonts, spacing of the element, etc. You can enter the colors manually (using the hex or RGB color format) or use the color picker. When changing the font, make sure it is loaded onto 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 a placeholder.
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.
If you are advanced, you can switch to the _Code_ tab and modify the HTML of the selected element. You can [use Jinja](🔗) here to personalize the content for the user.
Note that this modification currently only performs basic replacement of text or HTML of the selected element if you modify the HTML in the _Code_ tab. It is not recommended to use it to modify large chunks of the webpage – always prefer selecting child nodes of the webpage and performing HTML modifications deep in document tree of the webpage. Read more in [How Experiments work behind the scenes](🔗) and [Experiments for developers](🔗).
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.
Block: Use any existing [HTML Block](🔗) from your project. HTML blocks in the old form of `
[[ paramName ]]` can be tweaked by parameters.
HTML: Write your own custom HTML and use [Jinja](🔗) to personalize it.
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.
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.
This modification can be used to run custom code for the selected element(s). You can choose to run your code at different points in time — either immediately when the page loads, after the page is loaded, or once for each selected element.
Execute options are:
immediately, before the page content is loaded – You code will run once the customer opens the page and the browser starts loading the content. Note that the page content may not yet be fully loaded.
once for each matched element – Your code will run once for each element selected for this modification. You can get a reference to the element using `
this.element` (see below). Note that the code may run multiple times based on the number of selected elements. Make sure to account for this in the code.
[on document ready event](🔗) with all matched elements – Your code will run once with all matched elements when the page fully loads. You can access the elements using `
this.elements` (see below).
### The _remove_ function
When you use the _Run script_ modification, you have to specify a custom function which reverts your script. This is utilized in the Experiments Editor (because it reverts the previous modifications to always show the latest version of the edited experiment), and whenever you manually revert an experiment on your page.
If you want to know more about why this is necessary, read the [behind the scenes of Experiments](🔗).
Your code should return an object with a single function called `
remove`.. This function will be called by Bloomreach Engagement when the Experiment should be reverted. Use the function to revert any modifications that you performed in the modification. This is crutial for the correct behaviour of the experiment, especially if you insert new content into the webpage or modify any existing elements.
For example, if you insert an element into the page, the `
revert` function that you return from the modification should remove that element.
### Using `
this` in your code
You can use the special `
this` keyword in the code to access data provided by Bloomreach Engagement. The data is described in the table below.
|`||Contains data about the experiment. You can use either variable but we recommend using `|
|`||The ID of the current experiment.|
|`||The name of the current experiment.|
|`||The [AB Test](🔗) variant that is currently shown to the user.|
|`||The name of the [AB Test](🔗) variant that is currently shown to the user.|
|`||Reference to the selected HTML element. If multiple elements are selected, only the first one is provided here. Great to use with code that is _run once for each matched element_.|
|`||(Notice the plural form.) An array of references to all selected HTML elements for the modification.|
|`||This is either `|
|`||Reference to the [Bloomreach Engagement SDK](🔗). You can use it, for example, to track events using `|
|`||The CSS selector (string) that was used to select the elements.|
# Design (AB test settings)
In the _Design_ tab, you can create multiple variants of the Experiment and [set up AB Testing](🔗). You can also change the preview page URL, change the variant names, and even duplicate them.
You can choose the traffic distribution of your customers in the right-middle part of the page. If you select the **Automatic traffic distribution** (default setting), Bloomreach Engagement will determine the best performing variants of the Experiment automatically and then prefer these variants over the less performing ones. Contrary to that, **Custom traffic distribution** allows you to select the percentage of your customers to see each of your variants. Note that both cases allow you to create a control group, which is a group of people who will continue to see your original page for the purpose of a better evaluation.
You can also choose to duplicate your variant.
You can modify the settings of the Experiment in the settings tab.
|Column Title||Column Title|
|**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 time period in which the experiment is shown.|
|**Show on**||Choose on which URLs to show the experiment.|
|**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 experiment. This is tracked when the event `|
|**Category**||Choose which consent is required for a customer to see this experiment. Read more about [Consents](🔗). If you don't use consents yet, you will see the [campaign groups](🔗) setting here.|
|**Audience**||Define your custom audience that will see this experiment. 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, and it will work until you stop the campaign.
By design, experiments ignore URL fragments. That means that if any `
#` character is contained in the URL filter, it will be ignored to retain only the first part of the URL.
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.
true` when the experiment should be shown and `
false` when not.
[Jinja](🔗) is **NOT** supported here!
return` statement. If it does not, your code by default returns `
This code is also provided with data from Bloomreach Engagement in the special `
this` keyword, similar to the _Run script modification_. You can use the same variables except `
this.element` and `
this.elements`. Read more about the provided data in the section [Run modification](🔗).
Now that you have your Experiments set up and prepared for production, read about [how to integrate and use Experiments on your website correctly](🔗). This is a necessary step to optimize the experience of your Experiments for your users.
Here are some common issues with using Experiments. If you have any issues with integrating Experiments into your website, have a look at the troubleshooting section in [Integrating and using experiments](🔗).
## 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 the correct variant (the incognito mode changes your cookie every time you open it).
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.
true`**. Note that if your code does not return anything, the Experiment will never be shown.
## The experiment 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.
If the Experiment is using a [specific schedule](🔗), the schedule might have ended.
## The experiment editor won’t start
It may be possible that your backend server is removing some parameters from the URL. The experiments editor relies on a special parameter in the URL called `
exponea-editor-params` to function properly. Make sure that you server is not removing this parameter from the URL when showing a webpage. [Here is a list of other URL parameters used by Bloomreach Engagement](🔗).
Make sure to disable any ad blocking extension you might be using.
If nothing helps, please [contact our support team](🔗).
## My visual changes are not applied to the element
The visual changes in the experiment are applied to your website with [CSS](🔗). CSS works with priorities and so it is possible that your changes are overwritten by the CSS on you website. A bit of technical knowledge is required here, or alternatively, consider [contacting our support team](🔗).
If you understand CSS a little, you know that your experiment styles are probably overwritten by your existing website styles. Consider manually writing a longer CSS selector for the element which would get a higher priority.
If you are changing the background color or image of an element, it is possible that the element is using the new `
picture` element with a set of `
source` elements. Again, technical knowledge is required to fix this problem. To fix this problem (and have your new image shown in the webpage), you have to edit the HTML of the element, remove all `
source` elements and replace them with a single new `
source` (or `
img`) element with the correct `
src` set to your new image.
The changes might get overwritten by another Experiment that is published in your Bloomreach Engagement project.