0

I am new to Adobe Analytics and DTM.

On my website, an asynchronous API is creating a div on the page dynamically. This DIV has a special CSS class, let's say "wantedClass".

I want to create 2 rules :

  • A rule that fires once the DIV appears on the page, which i did like using Page Load Rules as following :

enter image description here

On this trigger, an event1 is fired in Adobe Analytics.

I picked onLoad because I read that this is the last one among the other options, and I want to make sure that the API async finished creating the DIV so this event would be fired.

  • A rule that fires once the DIV is clicked, which I did using Event Based Rules as following :

enter image description here

On this trigger, an event2 is fired.

What's happening when I test is :

  1. Page loads, no event1 is fired
  2. DIV clicked, no event2 is fired, BUT event1 is fired.

What am I doing wrong?

Any help would be appreciated;

HelpASisterOut
  • 3,085
  • 16
  • 45
  • 89

1 Answers1

0

1. Page loads, no event1 is fired

Async calls by their nature can happen after DOM Ready or window load (onLoad), so onLoad is not guaranteed to trigger after some API (async) ajax call is made and returns something.

Ideally, you should trigger something in the API's ajax success callback function. You can create and trigger a Custom Event which DTM can listen for in an Event Based Rule. Note: If you go this route, make sure you create/trigger on document.body or a decendant; DTM will not listen for custom events on document itself. Also, since I see you using jQuery syntax in your screenshot, if you go this route, also note that jQuery custom event functionality is NOT the same as native javascript custom events. So for example if you do $( document.body ).trigger( "someEvent" ), this does NOT push to something listening to

document.body.addEventListener('someEvent', function (e) { /* ... */ }, false);

DTM uses the above to listen for custom events. So TL;DR - don't use jQuery syntax to create or broadcast custom events if you intend on using DTM's built-in custom event listener.

Alternatively, within the API's ajax callback function, you can just do _satellite.track('dc_rule_value_here'); and create a Direct Call rule with 'dc_rule_value_here' as the string condition.

If you cannot add something to the API ajax callback function, the next best thing is to create a Data Element of Custom Code type, with the code you have in your screenshot condition (returning true or false if .wantedClass is found). Then, create an Event Based Rule of Data Element Changed type, with a condition reflecting what you return from the data element. This isn't ideal because this rule type works by polling the data element every 1 second for the duration of the page view. This isn't that big a deal in the grand scheme of things but it is not as efficient as other methods (and if you 0make it a practice to do this for a lot of rules, then it might become a problem). Note that you should also bake into your Data Element to only return true once, so that it doesn't keep triggering the EBR every 1s after its found (DTM does not have a native "fire only once" type config).

2. DIV clicked, no event2 is fired, BUT event1 is fired.

Not sure about this one. At face value, it sounds like the DTM rule itself is working, but there is a problem with the AA s.events being set. Could be that you simply typo'd and put event1 into the rule, though I'm sure you checked that.. right?

Could be you have other code (e.g. code within s.doPlugins callback) that is overwriting it. Or maybe it's some other rule entirely that is triggering, not the one above.

May be able to help further if you provide more details on how/where you actually set the event (including other places you may be setting both events), but it but kinda sounds like something I'd have to see this in action on a page to really get to the bottom of it :/

CrayonViolent
  • 32,111
  • 5
  • 56
  • 79