GA4 implementeren op een Single Page Application

Een Single Page Application laadt één HTML-pagina en werkt die vervolgens dynamisch bij terwijl de bezoeker rondklikt. Frameworks als React, Angular en Vue.js hebben die aanpak groot gemaakt: minder wachten, en een ervaring die aanvoelt als een app.

Je herkent er een aan drie dingen. De URL verandert zonder dat de pagina zichtbaar ververst. De broncode bevat meer scriptverwijzingen dan zichtbare inhoud. En het netwerktabblad toont weinig volledige pagina-loads maar veel AJAX- of API-aanroepen.

GA4 gaat er standaard van uit dat een nieuwe pagina ook een nieuwe pageview betekent. Op een SPA klopt die aanname niet, en dat levert vier problemen op:

• Dubbele pageviews: één handeling van de bezoeker wordt als meerdere weergaven geteld.
• Scheve sessieduur: zonder paginaverversingen interpreteert GA4 de duur van een sessie verkeerd.
• Gemiste interacties: belangrijke acties blijven ongemeten als GA4 niet is ingesteld op virtuele navigatie.
• Verwarde verwijzingen: de bron van het verkeer wordt niet correct toegekend, waardoor je referral-data niet klopt.

Google Tag Manager heeft hier een trigger voor die precies op dit gedrag is gemaakt. De opzet in het kort:

• Maak een nieuwe GA4-tag aan in GTM.
• Kies de History Change-trigger. Die herkent URL-wijzigingen zonder volledige paginaverversing.
• Hernoem het event naar iets duidelijks, bijvoorbeeld virtual_pageview.
• Haal de relevante informatie op met GTM-variabelen zoals New History Fragment.
• Test in preview mode voordat je live gaat, en controleer of de tag echt bij elke URL-wijziging afgaat.

Duw belangrijke gebruikersacties naar de data layer, zodat GTM ze kan oppakken. En maak in GA4 eigen events aan voor virtuele navigaties en andere acties die ertoe doen.

Voor attributie geldt: bewaar de oorspronkelijke verwijzingsgegevens over meerdere virtuele navigaties heen, anders raak je de bron kwijt. Beslaat je SPA meerdere domeinen, zet dan cross-domain tracking aan.