Tracking clicks on a dynamic element

[#1]

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.

[traviss75445197 · 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 · Accepted solution]

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.

[traviss75445197]

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.

[gaureshk3014423]

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.

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

[gaureshk3014423]

Cool!