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 */
/* _optimizely_evaluate=end_editor_only */

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


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.

Example: Using Optimizely with Cufon

Cufón is a text replacement library for using custom fonts on websites. It works by replacing text on a webpage with a canvas element rendering the text.

When Optimizely and Cufón run on the same page, there can be conflicts if both Optimizely and Cufón interact with the same element. The following instructions can help you run Optimizely experiments on pages with Cufón by replacing your Optimizely-changed elements before Cufón runs. This ensures that the text is changed for your experiment but still gets replaced with the new font.

  1. Click on the Cufón text you wish to change. You will have selected a canvas element, since the text was overwritten by Cufón.

  2. Click Select Container. You should now see a hierarchy of the parent elements for your selected elements. Click on the element immediately after the 'cufon' tag

  3. Select Custom Javascript. The code store should pop open at the bottom of the editor, with a new line for the selected element, such as $j("div.container-12 h2:eq(1)")

  4. Append .html("New text!"); to this line, where "New text!" is the new text you want to use.

  5. Add a new line with "Cufon.refresh();".

  6. Click Apply. You should now see the text replaced by Cufón with your new value. Don't forget to save your experiment!

The following screen shots illustrate the process.