Expand my Community achievements bar.

Join us for an upcoming in-person Adobe Target Skill Builders event ~~> We're hosting these live learning opportunities to equip you with the knowledge and skills to leverage Target successfully. Learn more to see if we'll be coming to a city near you!
SOLVED

How to avoid Target modifications from breaking when source code is changed

Avatar

Level 4

Hello everyone,

 

I believe this is common knowledge - that a Target modification within an activated activity can and will most likely break when the page (where the activity is delivered) is edited in AEM and the changes are published. Consider this scenario:

Create a new activity.

When creating modifications, I always try to check if there's a unique ID or class applied to the part/component of the page I'm making changes to. If there's a unique ID or class, I use it as the CSS Element Selector; e.g. CSS Element Selector is div.myclass. As long as the class used in the selector ("myclass" in this example) is kept intact, I can almost guarantee that the modification and activity will continue to work.

 

If there is no unique ID or class, I'm left to use the default AEM classes. This is just one random example of a div to show what they look like:

<div class="layoutContainer parbase aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--12 aem-GridColumn--offset--default--0">

some content

</div>

 

When I have to work with something like this, I end up using the VEC to select the CSS Element Selector; i.e. right click on the part I want to edit, Target automatically determines the selector and I go ahead and make my changes.

 

The selector ends up something like this: #content > DIV:nth-of-type(2) > DIV.responsivegrid:eq(0) > DIV.aem-Grid:eq(0) > DIV.layoutContainer:eq(1) > DIV:nth-of-type(1) > SECTION.layout-container-contents:eq(0) > DIV.aem-Grid:eq(0) > DIV.layoutContainer:eq(0) > DIV.bg-brand-secondary:eq(0) > SECTION.layout-container-contents:eq(0)

 

When I use VEC to set the selector, it works fine until the page is updated in AEM and published. In most cases the modification breaks after any edits (from AEM) are made. I don't know why but I assume that something in the selector gets inadvertently changed when edits are made to the page.

 

How can this be avoided? I assume if we have unique classes applied to the components we modify in Target, that any updates to the page (by our dev team) will not affect the activity and it will continue to work. Is this correct? Also, is this the only way to avoid it? If so, it will involve asking our dev team to start adding classes to any components we want to use in Target. Is there a different workaround?

 

Thanks!

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

You're correct, the most reliable way to avoid this issue is to add classes, ids or data attributes to the elements that you want to modify 

View solution in original post

1 Reply

Avatar

Correct answer by
Employee Advisor

You're correct, the most reliable way to avoid this issue is to add classes, ids or data attributes to the elements that you want to modify