Target dynamic selectors in Optimizely Web Experimentation

  • Updated
  • Optimizely Web Experimentation
  • Optimizely Performance Edge

Custom attribute selector targeting is currently in beta. Apply on the Optimizely beta signup page or contact your Customer Success Manager.

You may have had the experience where you have made changes to a page in the Visual 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 Visual Editor chooses the ID of an element as the default selector because these IDs are usually unique. When you load your page and make changes to an element (such as the hero image), the Visual 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 because 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 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 Visual Editor and click the element. The ID displays in the Selector field. A non-dynamically generated selector should have a naming convention that looks like .hero__text-content.


Use custom attribute selector targeting (beta)

Optimizely Web Experimentation lets you target dynamically generated selectors using custom attributes, if available. This extends the functionality of selector targeting in the Visual Editor to make it compatible with Single Page Applications (SPAs), specifically JavaScript frameworks like React, Next.JS, and many more. The support of dynamic selectors makes selector targeting more reliable upon page redeployment while maintaining confidence in the quality of your tests. It eases creating variations and setting up events and decreases experiment configuration time by eliminating developer dependency and the need to manually target a custom attribute for every element change.

Watch the video or use the interactive demo to learn how to use this feature.

  1. Go to Settings > Advanced.
  2. Click Enable Support for Dynamic Selectors.
    Dynamic Websites.png
  3. Enter an Attribute Prefix, if you want to modify the default data-. The prefix must start with a letter, containing only letters, numbers, ‘-’, and ‘_’.
  4. Click Save.

When you select an element in the Visual Editor, Optimizely Web Experimentation searches for the attribute prefix and targets the element based on the given value. For example, if the attribute prefix is data-, then the selector would successfully target the element that has custom attributes such as data-id=”submit-button” or data-test-section=”submit-button”. If multiple attributes share the same prefix for the selected element, the selector value only targets the unique attribute with the corresponding prefix.


If the selector cannot find a unique custom attribute for the selected element with the assigned attribute prefix, it generates a path until it finds the closest parent assigned such prefix with a unique custom attribute. Otherwise, it generates a full path until the <body> tag.