Tracking clicks on a dynamic element

[traviss75445197]

I am attempting to track clicks on a button that lives inside a modal. The modal does not exist when the page first loads -- it is rendered only after the user takes a certain action.

I have successfully added the goal metric using the VEC; I can see the blue highlight around the selected element.

However, clicks on this element are not being tracked. When I inspect the element with dev tools, it lacks the class "at-element-click-tracking", which tells me that is not getting wired up properly. (For reference, other elements on that page are tracked just fine.)

Should I expect this setup to work? Should I be able to track clicks on dynamic elements? Or is Target limited to tracking elements which are present at the time of page load?

I'm running at.js 2.2. The activity is being served through my global mbox.

[Gaureshk_Kodag]

You can select button in modal by using browse option in VEC.

If you are still not sure if clicks are getting tracked you can add button id/class in modifications (add modifications) this will work if html of modal is already present after page load.

Let me know if this helps you

[traviss75445197]

_

[traviss75445197]

Thanks for chiming in! I really appreciate you trying to help. But I'm afraid I haven't made any progress. I've already selected the modal button with the VEC. The button already has an ID. However, when I visit the page and activate the modal (which appears AFTER page load, when the user clicks on a link.) The button in question does not have the click tracking class (.at-element-click-tracking), which tells me it's not connected.

[Gaureshk_Kodag]

Hey Travis, I would like to give you small overview about how target tracks click of any element. when your webpage loads target library gets fired and it binds all track events to elements which you have selected in Goals and setting. In some cases where elements are generated dynamically on some event (like on click modal html gets generated dynamically, target will not be able to find those element on page load and eventually fail to bind click tracking event. Check whether your modal html is already present on page load and not getting generated on any event (AJAX call). if yes, it should track CTA clicks after selecting it through VEC. if no, you'll need to find another way to track button click. When we faced this, we tracked dynamic elements by extra mbox call on click event. which is I guess not 100% ideal way.

[FerranSa]

Should be also possible to track contents generated after an AJAX Call using the AT v2 triggerView() ? Does Adobe Target bind all track events to elements once a particular view is triggered?

[traviss75445197]

Got it, thank you for explaining it plainly. I was afraid that might be the case. Our team has been experimenting with a few workarounds -- creating new DTM/Launch rules to track clicks, dispatching custom events, or attaching a click handler and using adobe.target.trackEvent(). In any case, thanks for helping check my findings! Happy Targeting.

[FerranSa]

Was any of those workarounds successful? Could you please comment how you did if you found a successful way to track those kind of cases? Thanks

[traviss1234]

We've been getting a lot of mileage out of custom events. Here's a simplified/contrived example:

let header = document.querySelector('.header');

let newButton = '<a id="new-cta-button" href="https://www.google.com">Click here</a>';

header.insertAdjacentHTML('afterbegin', newButton);

const linkElement = document.querySelector('#new-cta-button');
linkElement.addEventListener('click', function(event) {
  s.tl(this, 'o', 'target-cta-button-click');
});

(I'm the original poster, btw. Not sure why my usernames are crossed up.)

[FerranSa]

Thanks for your insights! Looks promising.

I understand all the code until the ¿minified? line:

s.tl(this, 'o', 'target-cta-button-click');

Could you further explain or use the unmifiedtversion?

[traviss1234]

It's not minified.

"s" is the AppMeasurement instance, and .tl() is the track link method:

https://experienceleague.adobe.com/en/docs/analytics/implementation/vars/functions/tl-method#stl-met...

[Gaureshk_Kodag]

Cool!

[bhemarasettys43 · Accepted solution]

Hi Travis, 

The modal code should to added in the custom code, then the modal gets rendered when the page load event . You can use Adobe Experience template for the same . Refer to this url (https://github.com/Adobe-Marketing-Cloud/target-experience-templates/tree/master/lightbox-exit-inten...). Once you deploy the code through the custom code in modifications. The pop - up comes up for every page load event.

[traviss75445197]

Thank you for taking the time respond, but this doesn't really answer the question. I don't want to create a new modal via custom code. I want to track clicks on a modal that already exists.