CVS Target Lab Recap
7 min
Session recordings
Session 1 (09 July 2025)
Session 2 (11 July 2025)
Challenges and resolutions from the lab
In the lab we encountered some challenges QAing and rendering some VEC modifications to the site. Further details and resolutions are outlined below.
- The UAT MAH site (used in the lab) relys on Chakra UI to handle site styling. Target's VEC uses element IDs and classes by default to generate unique selectors for different DOM elements on a page that need updating.
- Chakra UI class names can change from build to build.
- When Target has used a class name in a selector that element won't be succesfully found if/when the class name changes later.
- Since we were running the lab on a UAT site we did run into a case where our class based selectors broke due to a UAT site update and Chakra UI class renaming.
- Resolution: We changed the VEC settings to only use IDs for selectors, never classes. This can be set at both an acount level or per activity.
- Pageload requests that fired in the default configuration were sometimes too early to properly apply the Target modifications. As a result, Target changes on pageload occasionally were applied before the targeted elements were avaiable in the DOM
- Resolution: Alternative events/timing can be used to handle when the pageload request to Target (Adobe Edge) fires, ensuring all the elements are available in the DOM. Modifcations did render after a app view updates, confirming a timing situation.
- Some element ID tag based selectors were still not rendering Target modifications correctly. These selectors tended to have colons in their ID values.
- Initially, it was suspected that the VEC might not be handling the special charcters in the IDs properly. However, when testing other sites with colons in their ID values the Target modfications rendered correctly.
- Customer selectors such as DIV[data-testid="xyz"] did work for VEC modifications.
- More research on the UAT MAH site would need to be done to identify the root cause as to why the regular ID based selectors didn't work. It is possible that the JS frameworks are adding or updating the element IDs at a later point. Which could cause the observed behavior.
- Resolution: Can edit VEC modifications that rely on IDs with colons to use custom selectors like: DIV[datat-testid="xyz"]. You could also request that IT add static IDs to elements that are expected to be modified via Target in the future.
Additional documentation links
Here are some links to topics and items of interest from the lab:
- Single Page Application (SPA) implementation for Target using Web SDK
- Flicker management for Target implementation
- Send Target activity and experience information to another analtyics tool for reporting on your Target AB tests