Expand my Community achievements bar.

Applications for the 2024 Adobe Target Community Mentorship Program are open! Click to the right to learn more about participating as either an Aspirant, to professionally level up with a new Certification, or as a Mentor, to share your Adobe Target expertise and inspire through your leadership! Submit your application today.
SOLVED

Target Offer exchanged due to CSS collision on the page

Avatar

Level 2

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

1 Accepted Solution

Avatar

Correct answer by
Level 1

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

View solution in original post

1 Reply

Avatar

Correct answer by
Level 1

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