Using dynamic selectors in Optimizely Web Experimentation

You may have had the experience where you have made changes to a page in the editor, but when you reload the page or later re-open the experiment, the changes are gone and absent from any live pages. This sometimes 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 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 changes to another value. The variation code does not know what to change, since the initial selector no longer exists. 

You may 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, that selector was likely dynamically generated.

To see the selector ID of any element, go to the editor and click the element. The ID will be displayed in the Selector field. A non-dynamically generated selector should have a naming convention that looks like this:

Remove dynamic selectors temporarily

To use Optimizely Web Experimentation with dynamic selectors, ensure that dynamic selectors are not used to making changes to elements on your page, as follows.

1. Remove dynamic selectors while working in the editor by placing 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 within this code block to a string of characters that your dynamic IDs have in common. For example, if 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.

You also can work with your developer to provide you with a CSS selector to target the element you want to modify.