Skip to main content
menu-icon.png

 

x
Optimizely Knowledge Base

Using dynamic selectors in Optimizely X Web

There are two versions of Optimizely
What version do you have?
X
Optimizely Classic
This is what the Optimizely Classic user interface looks like.
Optimizely X
This is what the Optimizely X user interface looks like.
. If you're using Optimizely Classic, check this article out instead.
relevant products:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization

THIS ARTICLE WILL HELP YOU:
  • Identify situations where dynamic selectors may be causing problems with your experiments
  • Get your Optimizely experiments to work with dynamic selectors

Problems with dynamic selectors 

You may have had the experience where you have successfully made changes to a page in the Editor, but upon re-loading 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 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:

selector.png

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 Optimizely with dynamic selectors 

To use Optimizely with dynamic selectors, you'll need to ensure that dynamic selectors aren't used to make changes to elements on your page.

Here are the steps to temporarily remove dynamic selectors:

  1. 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
  2. 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.

  3. 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.