Target Offer exchanged due to CSS collision on the page

[sanjeevdogra]

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.?

[priyanka_mathu1 · Accepted solution]

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