This article is about Optimizely Classic. If you're using Optimizely X, check this article out instead.
 

There are several click tracking services that will add dynamic IDs to the elements on your webpage. Optimizely will not interfere with your service’s click tracking, but there are a few things to be aware of in order to ensure that your Optimizely experiment behaves like you would expect. 

How do you know if you have dynamic selectors?

  • If you can get the Editor to make changes, but when you re-load the page or re-open the experiment at a later time and the changes do not persist. Similarly, these changes do not appear on a live page.

  • You are using a click tracking service that you know generates dynamic IDs or inserts IDs at document.ready

  • The selectors being chosen in the “Edit Code” section of your experiment are IDs with a seemingly random value like #luckyAnchor_1234891, rather than something more generic like #heroBanner.

Problems with dynamic selectors

The Optimizely Editor will choose an ID as the default selector since it is typically known to be unique. Although this works flawlessly most of the time, you will run into issues if the ID is dynamic. When you initially load your page into the Editor and make changes to an element (for example the hero image), the editor will create a line of variation code using the current dynamic ID as a selector. The changes will display correctly in the variation. However, the next time you load the page, the ID has changed to another value and the code doesn't know what to change, since the initial selector no longer exists. 

Similarly, if your click tracking service inserts IDs (dynamic or static) at document.ready, this can also prevent our variation code from making changes as expected. An example is a service that does this is Mouseflow. The variation changes display correctly in the editor since the IDs exist when the page fully loads. However, when the variation runs on site, the variation either doesn’t work at all, or there is a lot of flashing because the IDs are non-existent until document.ready

In a live experiment, the Optimizely snippet executes the variation code line-by-line as the selectors become available. The snippets 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, thus causing your variation to fail. 

Solutions to use Optimizely & dynamic selectors

On a high level, you'll need to ensure that the dynamic selectors are not used to make changes to elements on your page.

You can start by removing dynamic selectors temporarily while working in the Editor. Use the following code in the Edit Code box:

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

Note: In the above code, change selector to a string of characters that your dynamic IDs have in common. For example, if all your IDs begin with abc, change selector to abc.

You can write your own selectors, such as $(".container h2") to avoid using the #dynamic_id

 
Note:

Only the selector needs to be changed. The handler can remain the same. To avoid writing all of your own jQuery code, you can use the Visual Editor as normal to make changes to your page and then simply replace the selectors. For an example, see the screenshot below.

​​

  • You can change the selector by clicking Edit Code in the bottom right of the editor. The selector is the piece that appears within the $("  ").
  • You can work with your developers to make a one-time fix so that your click tracking provider is not added when iFramed in Optimizely. This way, when using the Visual Editor, the dynamic IDs will never be detected and different selectors will be defined.

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