Relevant products:
- Optimizely Web Experimentation
This topic describes how to:
- Identify situations where dynamic selectors may be causing problems with your experiments
- Get your Optimizely Web Experimentation experiments to work with dynamic selectors
You may have had the experience where you have successfully made changes to a page in the Editor, but upon reloading the page or re-opening the experiment later, the changes you made are gone. These changes are also absent from any live pages.
This often happens when dynamic selectors are at work.
The Optimizely Web Experimentation Editor chooses the ID of an element as the default selector since these IDs are usually unique. When you load your page into the Editor and make changes to an element (for example, the hero image), the Editor creates a line of variation code using the current dynamic ID as a selector. You'll see the changes displayed correctly in the variation at that time. But if the ID is dynamic, the next time you load the page, the ID will change to another value. The variation code doesn't know what to change, since the initial selector no longer exists.
Often, you can also tell if you have dynamic selectors if selector names displayed in the Editor include a seemingly random value—such as #luckyAnchor_1234891—instead of something more generic like #heroBanner. If you notice a selector name that includes what looks like a randomly generated string of numbers or characters, usually that selector has been dynamically generated.
A non-dynamically generated selector should have a naming convention that looks like this:
To see the selector ID of any element, navigate to the Editor and click the element. The ID will be displayed in the Selector field.
Use dynamic selectors
To use Optimizely Web Experimentation with dynamic selectors, you'll need to ensure that dynamic selectors aren't used to making changes to elements on your page.
Here are the steps to temporarily remove dynamic selectors:
-
Start by removing dynamic selectors while working in the Editor. Place the following code in the JavaScript tab of the Variation Code Editor window:
//Start: Remove dynamic selectors
//Instructions: Replace "selector" on line 2 with the site's dynamic selector's prefix.
try {
var dynamicID = 'selector';
if (window.location.href.indexOf('optimizely_editor=true') > 0)
{
dynamicSelectors = document.querySelectorAll('[id*="' + dynamicID + '"');
dynamicSelectors.forEach(function(element)
{
element.removeAttribute('id'); });
}
}
catch(e){}
//End: Remove dynamic selectors -
Replace selector with In this code block, change selector to a string of characters that your dynamic IDs have in common. For example, if all your dynamic IDs begin with abc, change selector to abc. Dynamic selectors commonly share a similar prefix and end with a number that appears to be random.
-
Remove the Javascript you pasted on step 1 when you are ready to launch the experiment.
Alternatively, you can work with your developer to provide you with a CSS selector to target the element you would like to modify.
<%= heading %>