1. I dropped the Text Component twice on the page and configured the default text as follows:
<div> <!-- component A --> <div> Company Financing </div> <!-- component B --> <div> Our Accounting </div> </div>
2. I have a Target A/B activity created to change the text Company Financing->Finance and Our Accounting->Accounts. This is working fine and the page shows the text as: <div> <!-- component A --> <div> Finance </div> <!-- component B --> <div> Accounts </div> </div>
3. Next I swapped the components on the page from author as follows: <div> <!-- component B --> <div> Our Accounting </div> <!-- component A --> <div> Company Financing </div> </div>
4. However when I access the page from site, it changed shows me the output as follows, I was expecting Accounts in Component B and Finance under Compnent A : <div> <!-- component B --> <div> Finance </div> <!-- component A --> <div> Accounts </div> </div>
On further troubleshooting it seems Target apply the changes based on the css selector, so Target change the text no matter what is the current text. I can think of adding a special css class for such text.
Any recommendation to design our components to make Target Friendly. Like create unique css class etc.?
Hi there! You're right, Target applies offers using CSS selectors. You can use unique ids for each of the elements you're modifying using Target. Alternately, make sure the element can be uniquely accessed using a hierarchy of classes. Also, see that the 'Use element IDs' and 'Use element Classes' toggles are turned on in your Site Preferences. You can check that by going to Configure -> Site Preferences in VEC. You can find more on how Adobe Target generates a selector for an element - https://marketing.adobe.com/resources/help/en_US/target/target/c_vec_selectors.html