Adobe DTM

[srikanths356410]

How can I track number of user button clicks on a web page using adobe DTM? Can anyone elevate me the process to setup this rule and populate button click event?

[jantzen_b]

Hi,

You could do this with an event based rule in DTM. Inside the event based rule, you would set the condition to watch for a "click" event on the element you wish to track. The element can be selected via JSON, CSS selector, or ID. Once you've got the rule firing correctly, you can use the various installed tools within your DTM property to fire various beacons and code.

Cheers,
Jantzen

[srikanths356410]

I'm trying to implement it on this tag   <button class="btn" type="button">DONATE Today</button>

I have given element tag as button.btn, tracking as s.tl(), set page url and created a event in adobe analytics, then assigned that event to to this rule. When I run debugger it just detects the click on that button but doesn't fire event based rule.

[satishk44666483]

Hi,

- Compare DTM snippet code from your source code and current DTM property.

- Button is available in  iFrame ?

Same scenario it's working in my side.

Try to execute below script in your browser console and test whether the log is coming or not after clicking on button.

$('button.btn').click(function() {

  console.log( "Handler for .click() called." );

});

Thanks - Satish

[srikanths356410]

Hi Satishk,

Nope the given button is not in iframe.

But the link for next page in that button is mentioned in <a href> tag. I did try to execute that script and it gave me Handlerfor.click()called as result.

[josh_donley · Accepted solution]

Depending on a number of other factors, e.g. other elements within your <button> element, or other javascript event handler configurations, you may need to alter other settings in your rule.

Two of the most common settings to try toggling are:

Apply event handler directly to element - By default, DTM uses event delegation for DOM element event handling.  It may be possible you have some other javascript code attached to the element (or a child of it) that is preventing the event from bubbling up to the body element for DTM to listen for (and then filter for your event). For scenarios such as this, you can try enabling this option, which will force DTM to apply a separate event listener directly on the selected element.  Note: this should help for other code stopping bubbling between the button and body on the button's ancestor tree, but it will not help if you have child elements within the button with code that prevents bubbling.  (If you are unfamiliar with the concept of event delegation, you can read about jQuery event delegation . DTM does not use jQuery syntax to accomplish this, but the concept is the same). Given that you said that test with console log showing "Handlerfor.click()" worked for you, then this is the likely culprit and solution.

Don't allow if child element already triggers event - Related to the above, if you have child elements within your button element that have event handler(s) attached to them and triggering, this option will cause the rule to not trigger if enabled. This option is normally for helping prevent duplicate tracking. For example if you have a rule targeting all links within some header div, but some links might trigger automated exit link tracking or whatever, you may want to keep the rule from triggering so as to avoid duplicate tracking.  So if you have this option checked, try unchecking it.