Adobe Target integration with AEM

[yogeshVaidya]

We have few buttons on our webpage. When "documentContentLoaded" event is fired, we are assigning event listener to the buttons. We have added target script in the head section and our client library is near the closure of body tag. Sometimes, target script is loading before our client and vice versa. When our client library is loaded before target script, event listeners get assigned to the buttons. Then target script loads which replaces HTML body with a new body. This deletes old buttons and adds the same buttons again. Due to this, event listeners aren't working. This doesn't happen if target scripts loads before our client library. What is a possible solution to load target script before client library.

[antoniom5495929]

Hi,

how you are using target library into your AEM site?

Are you including it by using cloudservices configuration?

Let us know.

Thanks,
Antonio

[Gaurav-Behl]

The Target libraries are supposed to be loaded synchronously in the page head. Can you validate that?

How do you load the clientlibs - in sync or async?

In a nutshell, if you've same elements, say button on both parent-DOM and on target-DOM and you want to manage both by your parent DOM and not by target's provided bindings, you'd have to bind both DOMs with appropriate event listeners to solve for this issue. Make sure that you unbind first and then bind to avoid double binding issues and add relevant missing element/container checks to avoid js errors.

Based on the sequence order loading of scripts, bind both of them in DOM ready or onload as applicable including target-DOM..

[yogeshVaidya]

We are using Adobe launch. We have added added the dtm script using script tag in head.

[yogeshVaidya]

We haven't specified sync or async attribute on script tags. So, i think sync is the default.

[smacdonald2008 · Accepted solution]

See -- https://helpx.adobe.com/experience-manager/using/aem_adobetarget_integration.html

[Gaurav-Behl]

I would recommend to go through code or test it to understand if mbox/at.js and your clientlibs load in sync or async irrespective of the fact that one is in head and other is in the body. Once you test and get to know, tweak the implementation accordingly.