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