Skip to main content
menu_icon.png

Everything you need to learn Optimizely X in one place: See our resource pages for Web Experimentation and Personalization.

x
Optimizely Knowledge Base

Using dynamic selectors in Optimizely X Web

This article is about Optimizely X. 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

If your company uses a click-tracking service, Optimizely will not interfere with your ability to do so. However, because some of these services add dynamic IDs to the elements on your webpage, there are a few things you should be aware of to ensure that your experiment delivers usable results. 

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:

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.

IDs inserted at document.ready

If your click tracking service inserts IDs (dynamic or static) at document.ready, this can also prevent Optimizely's variation code from making changes as expected. Mouseflow is one commonly-used service that does exactly this.

The variation changes display correctly in the Editor, because the IDs exist when the page fully loads. However, when the variation code runs on site, the variation either doesn’t work at all it will flash or flicker. This is because the IDs don't actually exist until document.ready.

The Optimizely snippet executes the variation code line-by-line as selectors become available. The snippet stops looking for selectors at document.ready. Ultimately, if the selectors don’t exist on the page or aren’t available, no changes can be made, and your variation won't appear.

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.

You'll need to enable jQuery in project settings or include it in your code. Check out this article to learn more about jQuery and the $ variable in Optimizely X.

Start by temporarily removing dynamic selectors while working in the Editor. Place the following code in the JavaScript tab of the Variation Code Editor window:

/* _optimizely_evaluate=editor_only */
$('[id^="selector"]').each(function(){
   $(this).removeAttr('id');
});
/* _optimizely_evaluate=end_editor_only */

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.

From there, you can write your own selectors, such as $(".container h2") to avoid using the #dynamic_id. Only the selector needs to be changed. The handler can remain the same.

You can also work with your developers to make a one-time fix so that your click-tracking provider isn't added when iFramed in Optimizely. Then, the Editor won't detect the dynamic IDs and different selectors are defined instead.

For instructions on how to edit the variation code manually, please view our article on editing code.