Angular and Google tag manager (GTM) gtm.click

Question

I am running into a problem, and I cannot seem to find a fix for it. The situation is as follows the marketing department wants to integrate GTM. Which is fine as they want to have full control over the different third party providers they wish to integrate. But for this to happen they would like to have the ability to track all clicks on a page.

And they came back to me that currently no click events are being tracked with the current configuration within GTM. At first the thought was that events were not propagating (bubbling) upwards. But having tested this myself by binding a event listener to the document (click) (see below) all div, buttons etc. with an ng-click directives did reach this handler without problems.

document.addEventListener("click", function(event){
    console.dir(event.target);
});

So my assumption was that there was something wrong with the configuration but after looking at the configuration (one I created myself which looks as follows):

I still could not get it to work. Buttons that already use angulartics - https://luisfarzati.github.io/angulartics/ to send an event to the GTM container work as expected:

<a href="file.pdf" analytics-on="click" analytics-event="Download">Download</a>

Only the catch all click events (or any filter on it like purely looking at button clicks) does not. Now after looking at it a little more it seems GTM expects the gtm.click _event to happen. But I can't figure out (gazing through the gtm.js file) how they bind to all click events within the document (there is a click binding on the document after initialization but I am unsure if this is GTM or something from angular). And even if so I have placed many breakpoints within this file which seemingly could be related to it but none of them triggered when something was clicked.

So my question is, has anybody got experience combining angularjs with angulartics and GTM while having it catch all click/touch/mousedown etc. events and send these to GTM?

Answer 1

Make sure that you pusblished GTM container after you made some changes. Use "Publish Now" or "Preview and Debug" buttons inside of GTM interface(top-right corner). Because according to your tag config this tag should fire every time when user clicks something on the website.

Regarding to "gtm.click" - this GTM-event will fire every time, when user clicks something on the website. On the screenshot you may see, how it looks like in GTM debug mode("Preview and Debug") when user clicking on somethig at web-page, when GTM click listener turned on(like in your tag).

May be some relevant articles from my website about tracking of buttons/links on GTM will help you too:

http://konygin.net/gtm/tracking-links-en/

http://konygin.net/gtm/tracking-buttons-en/

Answer 2

My problem turned out to be that the person (from marketing) who gave me the html GTM tags (noscript / script) did not copy it properly (or something went wrong when it was pasted within JIRA). And after I copied it directly (having gotten access to the GTM admin panel) it worked as I would expect it to work.

Seeing as I debugged it by trying to only have one index.html with purely a button in it. Even at that point the tracker did not work and I became suspicious why that was happening as there was no angular code any more that could cause the problems.

Lesson learned, next time copy code yourself when you need it to make sure it does not get corrupted along the way :/