Hier is een van de ingebouwde klikvariabelen in Google Tag Manager die op het eerste gezicht misschien weinig nuttig lijkt.
Vooral als je hebt geprobeerd hem te gebruiken op basis van de previewmodus van GTM en het niet werkte.
Dat is normaal, want deze modus kan bepaalde begripsfouten tonen die je op het verkeerde been kunnen zetten als je je niet goed inleest.
Daarom wil ik in dit artikel wat uitgebreider over deze variabele praten, want die kan ons meer dan eens uit de brand helpen.
Dat gezegd hebbende: hoewel er een iets technischer deel is -dat met CSS-selectors-, ga ik niet in op de meest geavanceerde opties van de functionaliteit, maar alleen op de meest voorkomende gebruikssituaties waarin ik hem nuttig heb gevonden.
Maar laten we bij het begin beginnen.
Wat de Click Element-variabele in GTM is: definitie
Nou, het is een variabele die het element teruggeeft waarop een gebruiker klikt tijdens het navigeren op de website.
Waarschijnlijk had je dat alleen al uit de naam afgeleid, maar bij deze de bevestiging.
Deze variabele verschijnt wanneer een bepaalde auto-listener van GTM actief is, en dat is niet altijd zo. Bij een nieuwe container is hij in feite niet actief, maar geen zorgen: je zult zo zien dat activeren uiterst eenvoudig is.
Wanneer deze listener actief is en een gebruiker op een link of element van onze website klikt, wordt informatie over die klik naar de Data Layer gestuurd. Om precies te zijn deze waarden:
- gtm.element
- gtm.elementClasses
- gtm.elementTarget
- gtm.elementUrl
- gtm.elementId
Je kunt dit controleren in de preview:
Het mooie hiervan is dat je toegang hebt tot elk van die waarden via vooraf gedefinieerde variabelen in GTM, zoals ik nu uitleg.
Nog één opmerking: al deze waarden zijn tekststrings, behalve gtm.element, dat een object is.
Zoals ik in de inleiding al zei, kan het gebeuren dat we bij het bekijken van de eigenschappen in de preview soms iets als dit tegenkomen:
En nee, ondanks wat je daar ziet, is het geen string maar een object.
Een object dat alle attributen van het element teruggeeft, zoals:
- Href: de URL (als het een link is; bij een ander element niet)
- Title
- Tekst van het element
Die worden niet in de preview getoond, maar zijn wel toegankelijk als we ze nodig hebben.
Goed, ik weet niet of je op basis van wat ik tot nu toe heb uitgelegd al een idee hebt van de mogelijkheden van deze variabele, maar zo niet, dan geef ik je een paar voorbeelden.
Belangrijkste gebruikssituaties
Op dit moment zijn er twee hoofdscenario’s waarin Click Element voor mij erg nuttig is geweest:
Het eerste is wanneer je klikken op een of meer elementen van je website wilt meten die geen ID en geen enkele class hebben.
Dit is de meest voor de hand liggende toepassing en degene die ik in dit artikel als voorbeeld verder uitwerk.
Het tweede is wanneer je een klik op een element wilt meten dat meerdere subelementen bevat.
Denk aan de toevoegen-aan-winkelwagenknop in een ecommerce, waar het heel gebruikelijk is een div te hebben die een span met het icoon en een andere span met de knoptekst omhult.
En natuurlijk wil je de klik meten wanneer de gebruiker op welk van die onderdelen dan ook klikt.
Zonder zo diep op de details in te gaan als bij het vorige geval, leg ik later uit hoe.
Hoe je de variabele gebruikt
Nu we weten wat hij doet, leg ik uit hoe je deze variabele activeert zodat je hem kunt gaan gebruiken.
De variabele activeren
Het eerste wat je doet is hem activeren in GTM.
Daarvoor ga je naar Variabelen > Ingebouwde variabelen en activeer je hem. Activeer meteen ook alle andere Klik-variabelen, want die zijn behoorlijk nuttig:
Alleen dit is niet genoeg, want de listener waar we het in het begin over hadden, staat uit.
De listener activeren
Maar hem aanzetten is zo simpel als een trigger maken voor klikken op links of klikken op elk element:
Alleen al door hem te maken begint de listener te werken.
En om dat te controleren hoef je alleen maar:
- De previewmodus te activeren.
- Naar de website te gaan.
- Op een willekeurige link of een willekeurig element te klikken, afhankelijk van de trigger die we hebben gemaakt.
Daarna kun je de variabele zien werken zoals op de afbeelding aan het begin:
Goed, nu ik alle theorie heb uitgelegd, beginnen we met de praktijk.
De Click Element-variabele van GTM gebruiken
Hier zie je hoe je de variabele toepast op de twee gebruikssituaties die ik aan het begin noemde.
#1. Menulinks zonder ID of Class
Zeg dat dit niet herkenbaar is: je wilt bijhouden hoeveel klikken er plaatsvinden op een of meer elementen van je website en zodra je het wilt instellen, ontdek je dat ze geen ID en geen enkele class hebben die je kunt gebruiken.
En ja, je kunt IT vragen die toe te voegen en vervolgens wachten.
Of je kunt Click Element vandaag nog gebruiken.
Als je voor die tweede route kiest, zie je hier een voorbeeld van hoe je dat kunt doen.
1. Het juiste CSS-attribuut voor de trigger selecteren
Ik ga ervan uit dat je de vooraf gedefinieerde Klik-variabelen van GTM al hebt geactiveerd en minstens één Click Element- of Click Link-trigger hebt gemaakt.
Als dat zo is, zoeken we eerst de CSS-selector van het element waarvan we de klik willen tracken.
Je hebt verschillende opties. Hier zijn er twee.
1.1 De CSS-selector vinden met de elementinspecteur van Chrome
Voor deze methode is het aan te raden enige basiskennis van CSS en HTML te hebben.
Eigenlijk is het voor digital analytics in het algemeen verstandig deze kennis te hebben. Hoe eerder je die opdoet, hoe beter.
Dat gezegd hebbende is het systeem eenvoudig:
- Klik met de rechtermuisknop op het menu-element dat we willen tracken.
- Selecteer "Inspecteren" in het contextmenu van Chrome zodat de Inspector wordt geopend.
- Klik met de rechtermuisknop op de bijbehorende HTML-tag (dat is een "a"-tag) en selecteer "Selector kopiëren".
Zo, klaar.
1.2 De CSS-selector vinden met een Chrome-extensie
Als je geen technische achtergrond hebt en de vorige oplossing verwarrend vindt, kun je deze Chrome-extensie gebruiken (klik op de afbeelding om hem te downloaden):
Die kan je helpen de elementen te selecteren waarin je geïnteresseerd bent:
Het is een freemium, met betaalde abonnementen en een verplichte Google-registratie. Persoonlijk geef ik daarom de voorkeur aan de vorige methode, maar als je niets van HTML weet kan deze je helpen.
1.3 Testen
Welke van de twee methoden je ook hebt gevolgd, het is verstandig te controleren of we hebben geselecteerd wat we willen.
En alleen wat we willen.
Om dat te controleren voeg ik in de elementinspecteur een class toe met wat ik heb gekopieerd, door rechts op het "+"-icoon te klikken, zo:
Dat kan iets zijn als color: red !important of iets vergelijkbaars zoals background: red !important.
Iets opvallends dat bij het bekijken van de website sterk naar voren komt en me laat zien wat ik heb geselecteerd. Zo zie ik of ik heb geselecteerd wat ik wil en alleen wat ik wil.
In dit geval zie ik dat mijn selector maar één van de drie menulinks selecteert, dus ik moet de selector iets aanpassen om ze alle drie te pakken.
Hier zijn geen trucs voor, dus misschien is dit een goed moment om die CSS-basiskennis op te doen als je die nog niet hebt…
In mijn geval ga ik van:
#footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > li:nth-child(1) > a
Naar:
footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > a
Met andere woorden, ik heb de verwijzing naar het eerste item in de lijst verwijderd, en bij het testen krijg ik dit:
Dat vertelt me dat dit de selector is die ik zoek en dat ik verder kan.
Belangrijk: deze selector is erg slecht geoptimaliseerd. Je kunt hem verfijnen en veel, veel eenvoudiger maken, maar ik wilde laten zien dat een werkende selector vinden niet zo ingewikkeld is, zelfs als je maar een heel klein beetje HTML-kennis hebt.
2. Trigger maken
Met de juiste selector gekopieerd openen we GTM en gaan we naar Triggers > Nieuw en maak ik er zo een:
Uitleg van elk veld:
- Naam: omdat het om het type Link Click gaat, begin ik altijd met "LC -".
- Wordt geactiveerd bij: "Sommige klikken op links". Logisch: we willen dat hij alleen wordt geactiveerd wanneer een gebruiker op de links in het footermenu klikt.
- Variabele: Click Element, waar we het hier over hebben.
- Matching: het is nuttig te weten dat het type "komt overeen met CSS-selector" alleen verschijnt bij deze ingebouwde variabele of bij "Form Element". Bij geen enkele andere vooraf gedefinieerde variabele.
- Waarde: ik plak de tekststring die ik in de vorige stap heb gekopieerd en getest.
We slaan op.
3. De GTM-tag maken
In dit geval willen we een klikevent tracken, dus gaan we naar Tags > Nieuw en selecteren we een "GA4-event".
We configureren hem zo:
Ik leg hem uit:
GA4-configuratietag: ik selecteer de algemene, waarin mijn tracking-ID staat. Als je die om wat voor reden dan ook niet hebt (wat doe je dan bij Click Element?), maak hem dan eerst.
Eventnaam: de naam die je in je GA4 ziet. Het enige advies dat ik hier kan geven is zorgvuldig te zijn met de naamgeving en die consistent te houden met de rest van je eventstructuur.
Parameters: dit punt is belangrijk. Ik voeg "link text" toe, want daarmee onderscheid ik de klikken op elk van de menulinks.
Als ik dat niet zou toevoegen, zou ik één event hebben dat alle klikken op de menulinks bij elkaar optelt, maar zou ik niet kunnen segmenteren en de aantallen per link kunnen zien.
Vergeet daarbij niet de aangepaste dimensie in GA4 te maken als je de data in rapporten wilt gebruiken:
Trigger: we kiezen degene die we net hebben gemaakt:
Zodra de tag is opgeslagen, hoeven we alleen nog te controleren of hij werkt zoals verwacht.
4. Testen
We moeten ervoor zorgen dat alles zowel op GTM-niveau als op Analytics-niveau goed werkt, dus we controleren beide.
GTM-preview
We activeren de previewmodus, gaan naar de website en klikken op de links.
Als alles goed is gegaan, zien we dat de tag afgaat wanneer dat moet:
Belangrijk: het is mogelijk dat je in de preview twee Link Click-events ziet voor elke klik die je op de links doet, zoals bij mij:
Dit komt zeer waarschijnlijk doordat je, net als ik, tracking van uitgaande klikken hebt ingeschakeld in de verbeterde meting van GA4.
Dit is eigenlijk geen probleem, want de tag gaat maar bij één van de twee dubbele klikken af en daardoor wordt maar één event naar Analytics gestuurd, wat correct is.
Hier zie je hoe hij bij de andere niet afgaat:
We laten GTM even voor wat het is.
DebugView in GA4
We openen onze GA4-property en gaan naar Beheer > DebugView.
En we klikken opnieuw op de website-elementen die ik wil tracken.
Dan zouden we iets als dit moeten zien:
Dat geeft aan dat we de events correct registreren.
Om te controleren of de parameter wordt verstuurd, klikken we op het event en vervolgens op de bijbehorende parameter. De waarde wordt uitgeklapt:
Alles lijkt goed, maar onthoud: als je geen aangepaste dimensie hebt die de waarde van die parameter opvangt, kun je de data ervan niet in de rapporten zien, hoe duidelijk deze view hem ook toont.
Begrepen?
Dan hoeven we alleen nog de GTM-container te publiceren om de klikken van gebruikers te gaan registreren.
#2. Klikken op gegroepeerde elementen
Dan gaan we naar de tweede meest voorkomende gebruikssituatie.
Kijk naar dit voorbeeld van een toevoegen-aan-winkelwagenknop:
Dit is de HTML-code:
Zoals je ziet is de structuur een button die twee i met het icoon en de tekst groepeert.
Als ik de GTM-preview activeer en op de knop klik, krijg ik afhankelijk van waar ik precies klik dit (als ik op het icoon klik):
Of dit (als ik op de tekst klik):
Ook al kun je het niet lezen, je ziet dat het verschillend is.
Maar natuurlijk wil ik de klikken tracken op elk van de elementen waaruit de knop bestaat als één geheel.
Dan heb ik twee oplossingen:
- De makkelijke: in GTM drie regels maken met drie verschillende events en drie verschillende triggers, één voor elk element.
- De goede: Click Element gebruiken met een trigger als deze:
Door "Komt overeen met CSS-selector" te kiezen en als waarde de selector in te voeren:
- De class van de knop (".add-to-cart").
- En die van zijn child nodes (".add-to-cart *").
Worden klikken op elk deel van de knop (icoon, tekst) ook geregistreerd.
Dat is een goeie, toch?
Ja, maaaaar…
Aanbevelingen
Triggers met CSS-selectors gebruiken brengt een risico.
Met name als jij de code van de website niet zelf beheert.
De reden?
Eenvoudig: het developmentteam kan op elk moment een wijziging in de code doorvoeren waardoor je selector het gewenste element niet meer registreert. Dit gebeurt eerder op websites die voortdurend worden bijgewerkt.
In mindere mate, maar het kan ook gebeuren door een update van het theme of een plugin in je CMS.
Is Click Element dan niet nuttig met deze configuratie?
Zeker wel, het is heel nuttig, maar ik wil dat je je bewust bent van het belangrijkste nadeel.
Aan de andere kant, voor de wat meer techies, moet je weten dat de developerconsole veel meer informatie geeft over deze variabele van het type object.
Om die te zien hoef je alleen de console te openen en "dataLayer" te typen:
Nu navigeer je naar het element en klap je alle waarden uit:
De afbeelding toont er maar een paar, maar het zijn er heel veel.
Vanaf hier is het aan jou en JavaScript om nog wat extra mogelijkheden te benutten, zoals de parent node bekijken:
En de class van de parent node ophalen met gtm.element.parentElement.className via een GTM Data Layer-variabele:
Of ook gtm.element.firstChild.id gebruiken om volgens dezelfde procedure toegang te krijgen tot de ID van de eerste child node.
Conclusie
Click Element is waarschijnlijk de krachtigste vooraf gedefinieerde klikvariabele in GTM.
Het is in het begin ook de moeilijkste om goed te gebruiken.
Maar het is de moeite waard, want in bepaalde scenario’s redt hij ons leven.
Goed, dat is misschien wat overdreven, maar in elk geval bespaart hij ons tijd.
Ik hoop dat je met deze basiskennis de variabele in je projecten goed kunt benutten.
Geef een reactie