Target dynamic selectors
- Optimizely Web Experimentation
- Optimizely Performance Edge
- Optimizely Personalization
You may have made changes to a page in the Visual EditorVisual Editor, but when you reloaded the page or later re-opened the experiment, the changes were 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 change 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
Target dynamically generated selectors using custom attributes, if available. If the selector cannot find a unique custom attribute for the selected element with the assigned attribute prefix, Optimizely searches for a parent element with such and generates a path. Otherwise, it generates a full path until the <body> tag.
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 so on. 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, 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.
- Go to Settings > Advanced.
- Select the Enable Support for Dynamic Selectors checkbox.
- Enter an Attribute Prefix, if you want to modify the default data-. The prefix must start with a letter, containing only letters, numbers, ‘-’, and ‘_’.
- Click Save.
When you select an element in the Visual Editor, Optimizely 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.
