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.
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
.linkand press ENTER, then you can choose the Change modification and select a different color, for instance).
- You can use the
bodyselector 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
headselector 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.
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.
Type in the
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.
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).
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:
- 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.
- The second one replaces the HTML content of the
Updated 3 months ago