- 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
Use custom attribute selector targeting (beta)
- Go to Settings > Advanced.
- Click Enable Support for Dynamic Selectors.
- 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 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.