Webevents eenvoudig taggen met GTM en GA4 dankzij AI

Events meten op een website klinkt makkelijk.

Maar daarna open je elk van je WordPress-templates en begin je na te denken over klikken, knoppen, modules, transacties, formulieren, menu’s, CTAs, kaarten, banners, sidebars…

En dan schuif je het door naar een andere dag.

Want één ding is denken: “ik wil meten wat er op mijn website gebeurt”, en iets heel anders is een echte website goed taggen.

Een website met verschillende templates.

Met modules die in meerdere secties terugkomen.

Met kaarten en tabs die hetzelfde lijken maar toch ergens in verschillen.

Met knoppen die er visueel identiek uitzien maar totaal verschillende functies hebben.

En hier, zoals op zoveel andere plekken, kan AI je behoorlijk helpen.

Niet omdat AI je meetstrategie voor je gaat bepalen — dat blijft jouw werk, al kan het je ook voorstellen aanreiken — maar omdat het bijna al het werk kan uitvoeren: 

• Templates controleren.
• Vergelijkbare modules en componenten detecteren.
• Een herbruikbare structuur voorstellen.
• Een naamgevingsconventie definiëren als je die zelf nog niet scherp hebt.
• Een GTM-container voorbereiden.
• En zelfs de code van je website aanpassen om bijvoorbeeld “data-”-attributen toe te voegen die de meting makkelijker maken. 

Dit heb ik net allemaal op mijn eigen website gedaan, dus ik leg het proces uit aan de hand van mijn echte geval.

Ik heb de klikmeting op de redactionele modules van mijn website voorbereid (uitgelichte artikelen, aanbevolen artikelen, nieuwigheden, enz. op elke pagina), maar het systeem werkt voor elk event.

Dat gezegd hebbende, hebben we hier twee routes: de handmatige en de geautomatiseerde met AI.

We beginnen met de eenvoudige, zodat je ziet hoe snel die is. Daarna kun je, als je wilt, bekijken hoeveel werk je jezelf bespaart door het aan AI over te laten.

Route 1: stap-voor-stap tutorial om de events van je website te tracken snel met AI

We beginnen met de snelle, korte versie.

Stap 1: vraag AI om je te helpen de structuur te ontwerpen

Als je ervaring hebt met analytics, weet je dit al. Maar als je die ervaring niet hebt of GA4 niet goed kent, kan AI erg nuttig zijn.

Daarvoor hoef je alleen maar naar je favoriete tool te gaan (ChatGPT, Claude of Gemini) en twee dingen in een prompt te doen:

1. Voeg volledige screenshots (van boven tot onder) van elke sectie van de website toe (homepage, categorieën, checkout, enz.)
2. Leg uit wat je wilt.

Dat wil zeggen: 

<em>“Ik wil klikken meten op de belangrijkste modules van mijn website. Voordat ik code aanraak, help me een eventnaamgeving en parameters te definiëren zodat dit herbruikbaar is in GTM en GA4.</em>
Ik wil geen event per module. Ik wil één enkel event met parameters.

De templates die ik heb zijn:

- home

- categorie

- subcategorie

- tag

- post

Stel voor:

1. naam van het event

2. minimale parameters

3. toegestane waarden

4. echte voorbeelden van dataLayer

5. dimensies die ik in GA4 zou moeten aanmaken”

Dit dwingt AI om in structuur te denken voordat het aan code denkt.

En dat is precies wat je wilt, want het zal je een plan voorstellen dat meestal behoorlijk logisch is. Want als je een website gaat taggen zonder naamgevingsconventie, eindig je met Frankenstein-analytics.

Stoei wat met AI totdat je de structuur helder hebt en begrijpt waarom je het zo doet.

Stap 2: geef je GTM-container aan AI

En laat het bijna al het werk doen:

1. Exporteer de GTM-container van het project en geef die aan AI.
2. Vraag het de relevante wijzigingen uit te voeren op basis van de strategie die je in het vorige punt hebt gedefinieerd.
3. Zodra het klaar is, download je het.
4. Je importeert het in GTM. AI zal je vertellen of je het moet samenvoegen met wat er al staat of het moet vervangen.

Hier kan het zijn dat we klaar zijn, of niet, afhankelijk van hoe AI het taggingplan maakt of hoe wij het hebben gevraagd dat plan uit te voeren.

Stap 3 (optioneel): geef de code van je templates aan AI

Als het voor de tagging nodig is om data-attributen toe te voegen (ik leg uit wat ze zijn in het deel over handmatig taggen) kun je AI de echte templates van je website geven. En hier bespaar je echt tijd.

In WordPress kunnen dat bestanden zijn van het actieve thema, zoals:

• front-page.php
• category.php
• tag.php
• single.php
• functions.php

Of welke bestanden je thema ook gebruikt.

Upload ze en geef een concrete instructie:

<em>“Ik geef je de huidige templates van mijn website.</em>
Ik wil dat je data-*-attributen toevoegt aan de links van de belangrijkste modules om het event editorial_module_click te meten.

Verander het ontwerp niet.

Verander geen CSS-klassen.

Verander geen querylogica.

Verander geen teksten.

Voeg alleen analytics-attributen toe.

Gebruik deze parameters:

- data-analytics-event

- data-page-type

- data-module-type

- data-module-area

Geef me de volledige gecorrigeerde bestanden terug en controleer PHP-syntaxfouten.”

Let hiermee op: laat AI je template niet “verbeteren”.

AI heeft de neiging meer aan te raken dan nodig als je het niet begrenst. Zeg duidelijk dat het alleen analytics-attributen toevoegt. Niets anders.

Zodra de bestanden zijn gedownload en naar de website zijn geüpload, kunnen we alles testen voordat we de wijzigingen publiceren en de benodigde aangepaste dimensies in GA4 aanmaken. 

Hieronder leg ik alles uit, maar eerst wil ik dat je ziet al het handmatige werk dat we hebben bespaard door dit proces te volgen.

Route 2: stap-voor-stap tutorial om handmatig de events van je website te tracken

We gaan nu voor de lange route, zodat je begrijpt wat AI eigenlijk echt heeft gedaan.

Stap 1: beslis welk event je wilt maken

Allereerst: maak geen twintig events aan als je één herbruikbaar en goed doordacht event kunt maken.

In mijn geval wilde ik klikken op redactionele modules van de website meten, dus maakte ik één enkel event:

editorial_module_click

Maar hetzelfde proces werkt voor andere events:

• cta_click
• resource_download
• pricing_click
• affiliate_click
• lead_magnet_click
• video_module_click
• product_card_click
• internal_navigation_click

De sleutel is bedenken of het event herbruikbaar nu of in de toekomst kan zijn. Als je bijvoorbeeld CTAs wilt meten, maak dan niet dit:

• click_boton_home
• click_boton_sidebar
• click_boton_footer
• click_boton_categoria
• click_boton_post

Maak liever cta_click en onderscheid elke klik met parameters. Dat is schoner en schaalbaarder.

Stap 2: definieer de minimale parameters

Het is nooit nodig om alles te meten, maar wel wat belangrijk is: wat je echt gaat gebruiken en wat je helpt beslissingen te nemen.

In mijn geval gebruikte ik voor klikken op redactionele modules deze parameters:

• page_type
• module_type
• module_area
• link_url
• link_text

Vertaald:

Parameter	Wat het aangeeft
page_type	Type pagina waarop de klik plaatsvindt (home, categorie, subcategorie, tag of artikel). Elk daarvan heeft een andere structuur.
module_type	Type aangeklikte module: nieuwigheden, aanbevolen sectie, sectie met laatste artikelen… Elke template heeft een flinke hoeveelheid secties.
module_area	Content, sidebar, footer…
link_url	URL van de link. Ik voegde die toe omdat ik de variabele al had aangemaakt; anders had ik het niet gedaan, want ik weet dat ik er weinig naar ga kijken.
link_text	En deze nog minder

Voorbeeld:

• page_type  = category
• module_type  = latest
• module_area  = main
• link_url = https://yagogonzalez.com/ocio/
• link_text = Hoe je lange YouTube-lijsten downloadt...

Hiermee kan ik al vergelijken:

• Welke pagina’s en paginatypen meer klikken genereren.
• Welke zones van de pagina meer klikken genereren.
• Welke modules meer klikken genereren.

Ruim voldoende om te beginnen.

Stap 3: maak een gesloten naamgevingsconventie

Dit is belangrijk: laat niet elk event ter plekke een verzonnen naam krijgen. Definieer vaste waarden.

Bijvoorbeeld, voor page_type kunnen dat zijn:

• home
• category
• subcategory
• tag
• post
• page
• landing
• product
• checkout

Gebruik alleen wat je nodig hebt. In mijn geval:

• home
• category
• subcategory
• tag
• post

Voor module_area:

• main
• sidebar
• bottom
• footer
• post_footer

En voor module_type, definieer een lijst op basis van je website.

In mijn geval was die lijst vrij lang, omdat ik behoorlijk veel verschillende modules heb. Sommige waren:

• home_hero
• home_hero_side
• featured
• latest
• sidebar_popular
• sidebar_more
• bottom_cta_newsletter
• home_section_tecnologia
• home_section_ocio
• home_section_negocio

Als je website diensten aanbiedt, zou je kunnen hebben:

• hero_cta
• services_grid
• case_studies
• testimonials
• pricing_table
• contact_cta
• lead_magnet

Of, als het een ecommerce is:

• product_card
• category_grid
• promo_banner
• recommended_products
• cart_cta
• checkout_step
• wishlist_button

De logica is dezelfde; alleen de context verandert, maar de methode blijft hetzelfde.

Stap 4 (optioneel): gebruik data-attributen in de HTML

In mijn geval, was dit een belangrijk onderdeel van het systeem.

Ik had kunnen proberen GTM de aangeklikte module te laten achterhalen via een rare CSS-klasse of via de tekst van de knop, maar bij middelgrote projecten is dat fragiel: vandaag werkt het, maar over drie maanden wijzig je het ontwerp en werkt het niet meer, omdat je niet meer weet hoe je het event had opgebouwd.

De oplossing die ik koos is het toevoegen van data-attributen direct aan de links of knoppen die je wilt meten.

Voorbeeld:

<a
href="https://tudominio.com/articulo/"

  data-analytics-event="editorial_module_click"

  data-page-type="home"

  data-module-type="home_hero"

  data-module-area="main"

>

  Título del artículo

</a>

Daarmee bevat de link zelf al de informatie die je wilt verzenden. GTM hoeft niets te raden, alleen de attributen te lezen.

Dit werkt voor bijna elk event:

<em><a</em>
href="/contacto/"

  data-analytics-event="cta_click"

  data-page-type="landing"

  data-module-type="hero_cta"

  data-module-area="main"

>

  Solicitar presupuesto

</a>

Of voor een ecommerce:

<em><a</em>
href="/producto/zapatilla-x/"

  data-analytics-event="product_card_click"

  data-page-type="category"

  data-module-type="product_grid"

  data-module-area="main"

>

  Zapatilla X

</a>

Ja, je voegt meer code toe, maar het is een eenvoudige, begrijpelijke en schaalbare oplossing.

Stap 5: maak een listener in GTM

Nu moet Google Tag Manager luisteren naar de klikken op links met jouw attribuut.

Maak een Custom HTML-tag.

Bijvoorbeeld:

<em><script></em>
(function() {

  document.addEventListener('click', function(event) {

    var link = event.target.closest('a[data-analytics-event]');

    if (!link) {

      return;

    }

    window.dataLayer = window.dataLayer || [];

    window.dataLayer.push({

      event: link.getAttribute('data-analytics-event') || '',

      page_type: link.getAttribute('data-page-type') || '',

      module_type: link.getAttribute('data-module-type') || '',

      module_area: link.getAttribute('data-module-area') || '',

      link_url: link.href || '',

      link_text: (link.innerText || link.textContent || '').trim()

    });

  });

})();

</script>

Deze listener doet iets heel eenvoudigs:

1. Detecteert klikken.
2. Controleert of de link data-analytics-event heeft.
3. Leest de attributen.
4. Doet een dataLayer.push().
5. GTM gebruikt dat event om data naar GA4 te sturen.

Er zit niet meer mysterie achter: schrijf het gewoon goed. En ook hiervoor kun je AI gebruiken.

Stap 6: maak de variabelen in GTM

Maak in GTM data layer-variabelen om de parameters te lezen.

Bijvoorbeeld:

GTM-variabele	Data layer-variabele
DL – page_type	page_type
DL – module_type	module_type
DL – module_area	module_area
DL – link_url	link_url
DL – link_text	link_text

Ze zijn allemaal van het type Data layer-variabele.

Improviseer geen namen. Als je in de listener module_type, dan moet de variabele in GTM module_type. Niet module-type. Niet moduleType. Niet tipo_modulo.

Liever hetzelfde. Exact hetzelfde.

Stap 7: maak de trigger

Maak een trigger voor een aangepast event.

Als je event zo heet:

editorial_module_click

Dan moet de trigger luisteren naar:

editorial_module_click

Als je event zo heet:

cta_click

Dan moet de trigger luisteren naar:

cta_click

Het lijkt vanzelfsprekend, maar veel GTM-fouten zijn gewoon namen die niet overeenkomen.

In mijn geval was de trigger:

• CE – Editorial Module Click
• Type: Aangepast event
• Naam van het event: editorial_module_click

Stap 8: maak de GA4-tag

Maak een GA4-eventtag.

Naam van het event:

editorial_module_click

Of het event dat jij hebt besloten.

Voeg de parameters toe:

GA4-parameter	GTM-waarde
page_type	{{DL – page_type}}
module_type	{{DL – module_type}}
module_area	{{DL – module_area}}
link_url	{{DL – link_url}}
link_text	{{DL – link_text}}

En gebruik als trigger het aangepaste event dat je zojuist hebt gemaakt.

Hiermee stuurt GTM telkens wanneer iemand op een getagde link klikt het event naar GA4.

Tests en volgende stappen

Welke route je ook hebt gevolgd, hier komen ze samen. Zodra alles is geïmplementeerd, moet je ervoor zorgen dat alles werkt zoals het hoort.

Bovendien moet er nog nog één klein ding in GA4 worden aangepast.

Stap 1: test voordat je publiceert

Publiceer niet blind:

1. Open de preview van GTM.
2. Klik op verschillende modules van de website.
3. Controleer of het event verschijnt editorial_module_click (of het event dat je hebt gemaakt).
4. Ga daarna naar de GA4-tag en controleer of de parameters een waarde hebben (page_type, module_type…)

Als je lege waarden ziet, controleer dan:

• Dat de HTML de data-attributen heeft.
• Dat de listener wordt geladen.
• Dat het eventattribuut de juiste naam heeft.
• Dat de GTM-variabelen dezelfde naam lezen als de dataLayer verzendt.
• Dat de trigger naar het juiste event luistert.

Ga pas verder als dit werkt. Hier is de GTM-preview je vriend. Gebruik hem.

Stap 2: controleer DebugView

Controleer wanneer je publiceert de DebugView van GA4.

Je zou je event moeten zien binnenkomen, maar let op: DebugView loopt soms achter, ververst niet goed of toont je een andere sessie.

Daarom, als je in de extensie Tag Assistant ziet dat de hit correct is verzonden, dan gaat het event eruit.

DebugView is nuttig, maar word niet gek als het even duurt of als het niet verschijnt.

In mijn geval zag ik in Tag Assistant dat het event als hit naar GA4 was verzonden, hoewel DebugView het niet op de tijdlijn liet zien.

Dat kan gebeuren.

Stap 3: maak aangepaste dimensies in GA4

Ga tot slot in GA4 naar:

Beheer > Gegevensweergave > Aangepaste definities

En maak alleen de dimensies aan die je echt gaat gebruiken. Dat wil zeggen: de eventparameters die je gaat analyseren.

In mijn geval:

Naam	Bereik	Parameter
page_type	Event	page_type
module_type	Event	module_type
module_area	Event	module_area

Ik had link_url en link_text al geregistreerd als aangepaste dimensies van eerdere tags.

Stap 4: (optioneel) documenteer de naamgeving

Als het project groot is, is het onmisbaar om een eventtagging-tabel te maken die hierop lijkt:

Event	Parameter	Mogelijke waarden	Waarvoor het dient
editorial_module_click	page_type	home, category, subcategory, tag	Type template
editorial_module_click	module_type	featured, latest, sidebar_popular	Type module
editorial_module_click	module_area	main, sidebar, bottom	Visuele zone

Zo hoef je, als je over twee maanden nog een module moet toevoegen, niets opnieuw uit te vinden: je volgt gewoon het systeem zonder opnieuw te moeten nadenken of alles te heroverwegen.

En dat is het, we zijn klaar.

Als je de handmatige route hebt gevolgd: gefeliciteerd. Het heeft je wat moeite gekost.

Als je de AI-route hebt gevolgd, vraag je je waarschijnlijk af of je echt klaar bent. En ja, het antwoord is ja. Een beetje verrassend, toch?

Typische fouten

Kom op, laten we alles verzamelen wat hier is genoemd en wat we allemaal weleens hebben meegemaakt.

Te veel events maken

Slecht:

• home_button_click
• sidebar_button_click
• footer_button_click
• category_button_click

Beter cta_click   met parameters.

Afhankelijk zijn van CSS-klassen

Slecht:

Als de gebruiker op .boton-verde-grande klikt…

Morgen verander je het ontwerp en dag meting.

Beter: data-attributen toevoegen: data-analytics-event="cta_click"

Niet testen in GTM

Publiceren zonder te testen is Russische roulette spelen. Gebruik altijd Preview.

Te veel dimensies registreren in GA4

Maak niet van elke parameter een aangepaste dimensie.

Begin uitsluitend met de dimensies die je gaat gebruiken om te analyseren. De rest kan wachten, en als je ziet dat je het echt nodig hebt, voeg je het later toe.

Namen halverwege het proces wijzigen

Als je module_type gebruikt, gebruik het dan altijd exact zo.

Verander het niet naar:

• module-type
• moduleType
• tipo_modulo

Niet halverwege het proces en ook niet later. Het lijkt een kleinigheid, maar het maakt je analytics ingewikkelder wanneer je periodes vergelijkt met beide events.

Snelle samenvatting en conclusies

Laten we het algemene handmatige proces nog eens doornemen:

1. Definieer wat je wilt weten.
2. Maak een herbruikbaar event.
3. Definieer weinig parameters.
4. Voeg data-*-attributen toe aan belangrijke links.
5. Gebruik AI om templates te controleren en aan te passen.
6. Maak een listener in GTM.
7. Maak data layer-variabelen.
8. Maak een trigger voor een aangepast event.
9. Maak een GA4-tag.
10. Test in Tag Assistant.
11. Publiceer.
12. Registreer in GA4 alleen de noodzakelijke dimensies.

En zoals je hebt gezien, is dit heel makkelijk terug te brengen als je je vriend ChatGPT om hulp vraagt.

Iets waar je handmatig uren over zou doen, heb ik in iets meer dan 30 minuten werkend gekregen.  

Het lijkt magie als je het probeert. Echt.

En ik sluit af met een paar aanbevelingen:

Events meten gaat niet om veel of alle data hebben, maar om informatie verkrijgen om te beslissen. En daarvoor heb je er maar een paar nodig.

AI vervangt je meetoordeel niet — dat wat je vertelt welke data je moet meten — maar het bespaart je een enorme hoeveelheid mechanisch werk en helpt je vooral om consistentie. 

te behouden. En dat is bij grote projecten puur goud. Laat het niet liggen.