Experiments for developers

This part of the documentation is aimed at frontend developers using Experiments. If you are not a developer, please take a look at our Experiments documentation. If you know HTML / CSS / Javascript and you would like to maximize the use of Experiments, you have come to the right place!

❗️

Advanced topic

You should take a look at the behind-the-scenes of Experiments documentation first to make sure that the explanations and use-cases on this page make sense. Also make sure that you are familiar with the rest of the documentation for Experiments, primarily the main Experiments documentation.

This is an advanced documentation aimed at frontend developers who understand HTML, CSS, Javascript, and the DOM of a webpage.

Custom CSS selector

Every experiment modification begins with the element selector. While selecting elements on the webpage in the Experiments editor, the editor does its best to automatically generate a CSS selector that only matches the selected elements. However, you can write your own CSS selector! Just click in the middle of the top bar of the Experiments editor to edit the CSS selector, enter you own selector and press ENTER.

  • If you want to modify only a few specific elements on your website, give them a unique ID in your website's HTML and then use this ID to write custom selectors for modifications to ensure that they do not match any other elements.
  • Conversely, if you want to create a more generalized modification (like changing the color of all links on the page), just select all elements by their class or HTML tag name (type a or .link and press ENTER, then you can choose the Change modification and select a different color, for instance).
  • You can use the body selector to perform some global modifications or insert global content. For example, you can insert global scripts or insert global styling this way (read more below). Since there is always just one <body> element on the page, this is the perfect way to perform one-time global modifications.
  • Additionally, you can even use the head selector to select the <head> element. You can use this to insert content in the head, like meta tags and external style links. This offers a lot of flexibility. It should also be possible to write a selector to match some of your existing elements in the head, let's say the <title> element, and modify its content or attributes, or you can select an existing <link rel="stylesheet" src="..."> element and change its URL! Just be careful and test your changes before deploying them live.

Inserting global content

Using the knowledge from the previous section, you can use either the head or the body selector to insert global content into the webpage, usable from your other scripts or other modifications in the experiment.

Script

Type in the body selector, press ENTER, and select the Run script modification. Choose the run mode called immediately, before the page content is loaded to run your script as soon as possible. Then you can type your Javascript code. For example, you can register global Javascript functions here and then use them later in other modifications of the experiment.

Style

Type in the head selector, press ENTER, and select Insert > HTML. For the placement, choose Put inside the element as the last child to insert content at the end of the <head> tag. Then, in the HTML, insert:

<style>
  /* global styles here */
</style>

📘

Please excuse the current suboptimal user experience when creating global content. We have plans how to improve the user interface of the Experiments editor to allow inserting global content into the webpage more easily.

Targeting criteria / experiment filters

Note that aside from the standard targeting filters for experiments like target devices, page URLs, or schedule (accessible in the Settings tab), you can also define a custom Javascript condition. This code is executed before the experiment is applied, it runs in the context of the webpage and you can use it to perform any other additional checks – like checking whether a cookie exists, running any of your custom functions or accessing the data layer. Read more in the documentation for the custom Javascript condition.

Modifications can change previous modifications

This might be obvious, but because the modifications are applied in the strict order they are defined in, you can modify content inserted in one modification in another modification coming after it. This is very useful for inserting placeholders for dynamic content (read more below).

Inserting dynamic or personalized content

You can use Experiments to insert personalized content for your customers or to insert dynamic content into the webpage. This is done using Jinja and it is supported almost everywhere in the experiment modifications (like in the HTML, in the values for visual changes, or in the Javascript code).

Have in mind that using Jinja in a modification makes it "personalized", which means that the modification will always be loaded asynchronously (read more about that in How Experiments work behind the scenes). A common approach to avoid content flickering in this case is to have two modifications:

  1. The first one inserts a simple static HTML placeholder content in your webpage. For example, if you want to insert recommendations for the customer, you can insert an empty <div> tag with a distinct ID, proper styling, constant height, and a placeholder text, such as Loading recommendations.... You can even set up some CSS transitions here for a better user experience. This modification is static, so it gets inserted into the webpage content immediately without flickering.
  2. The second one replaces the HTML content of the <div> inserted in the first modification with the dynamic recommendations content. You can even make this dynamic content hidden by some CSS first (so it does not suddenly pop on the screen), and then use a third Run script modification which reveals the content over time (either using Javascript or CSS transitions)!

Did this page help you?