Google Tag Manager Tip: Wat als gtm.click en gtm.linkClick niet werken? | Publicaties

Op sommige websites werken de gtm.click en gtm.linkClick events niet. Het maakt niet uit waar je klikt, de events worden nooit toegevoegd aan de lijst met events. Als je een complexere tagging wil uitvoeren op een website zijn de gtm.click en gtm.linkClick events onmisbaar.

De events kunnen geblokkeerd worden door verschillende redenen. Meestal is het een conflicterende JavaScript code of bibliotheek. In JavaScript “bubblen” events omhoog van het diepste element dat werd aangeklikt, tot het document element. Als je bijvoorbeeld klikt op een link, zal het click event eerst daar worden uitgevoerd, daarna zal het click event worden uitgevoerd op het oude reglement van die link, bijvoorbeeld een paragraaf waarin de link zit. En zo gaat het verder tot het event het document element bereikt en daar wordt uitgevoerd. GTM luistert naar click events op documentniveau dus elke keer een ander script het event stopt vooraleer het het documentelement bereikt heeft, zal GTM nooit weten dat de klik ooit gebeurde.

Gelukkig is hiervoor een gemakkelijke oplossing: we maken een custom HTML tag die een GTM event aanmaakt telkens een element of link op de pagina wordt aangeklikt.

1. Maak een nieuwe Custom HTML tag en noem hem GTM Click Helper.
2. Voeg volgende code toe aan de tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

/// load jQuery in no-conflict mode

jQuery.noConflict();

/// run the following script using our jQuery library

(function($) {

/// dom ready

$(function() {

/// add gtm.click handlers

$('body').on('click', function(e)

{

dataLayer.push({

"gtm.element": e.target,

"gtm.elementClasses": $(e.target).attr('class'),

"gtm.elementId": $(e.target).attr('id'),

"gtm.elementTarget": e.target,

"gtm.elementUrl": $(e.target).attr('href'),

"event": "gtm.click"

});

});

/// add gtm.linkClick handlers

$(document).on('click', 'a', function(e)

{

dataLayer.push({

"gtm.element": e.currentTarget,

"gtm.elementClasses": $(e.currentTarget).attr('class'),

"gtm.elementId": $(e.currentTarget).attr('id'),

"gtm.elementTarget": e.target,

"gtm.elementUrl": $(e.currentTarget).attr('href'),

"event": "gtm.linkClick"

});

});

});

})(jQuery);

</script>

3. Zorg ervoor dat de tag wordt uitgevoerd op All Pages.
4. Publiceer je GTM container.

Dat is alles! Wanneer je nu klikt op elementen of links op een pagina, zullen de gtm.click en gtm.linkClick events correct uitgevoerd worden.

Auteur: David Peeters

Tags:

Contacteer Ons

Semetis | Paleizenstraat 44, 1030 Brussel - België

+32 (0)2 211 34 50

welcome@semetis.com

Volg Ons