Google Analytics en AJAX: pagetracking inclusief alle data

Veel sites gebruiken AJAX (Asynchronous JavaScript And XML). Dit kan ervoor zorgen dat Google Analytics trackingcodes niet volledig werken. Deze blogpost zet het probleem uiteen en geeft ook twee oplossingen, waarvan één gebruik maakt van Google Tag Manager.

Probleem: Pagetracking terwijl de initiële data nog niet klaarstaan

Wanneer je gebruik maakt van Custom Dimensions, Custom Metrics, Enhanced Ecommerce en/of User ID’s sturen trackingcodes aanvullende data. Deze gegevens moeten klaarstaan voordat de trackingcode begint. Is dit niet het geval, dan kan de trackingcode er geen gebruik van maken.

Op veel AJAX-sites start de trackingcode voordat de code die de data aanlevert klaar is. Hierdoor worden paginaweergaven geregistreerd zonder bovengenoemde aanvullende informatie.

Oplossing met Google Tag Manager: Pagetracking na een dataLayer event

Ten eerste dient de activeringsregel van de trackingcode-tag vervangen te worden door een activeringsregel met de voorwaarde:

{{event}} is gelijk aan executeTrackingCode

Hiermee wordt de pagetracking-tag zo ingesteld dat het pas geactiveerd wordt als een dataLayer event met de naam executeTrackingCode wordt aangemaakt.

tracking code nieuwe regel event

Ten tweede dient de code die de data inlaadt afgesloten te worden met de volgende JavaScript-code:

dataLayer.push({'event': 'executeTrackingCode'});

Met deze JavaScript-code wordt een dataLayer event met de naam executeTrackingCode aangemaakt.

Oplossing zonder Google Tag Manager: Pagetracking na een JavaScript event

Ten eerste dient de trackingcode binnen een event listener geplaatst te worden. De benodigde JavaScript-code ziet er zo uit:

document.addEventListener('executeTrackingCode', function(){ [[Tracking code]] });

Door de trackingcode binnen de accolades ({}) te zetten wordt deze pas uitgevoerd als een event met de naam executeTrackingCode wordt verzonden.

Ten tweede dient de code die de data inlaadt afgesloten te worden met het versturen van een event. De benodigde JavaScript-code ziet er zo uit:

document.dispatchEvent(new Event('executeTrackingCode'));

Het plaatsen van deze JavaScript-code zorgt ervoor dat een event wordt verstuurd nadat de AJAX-code de gegevens geladen heeft.

Pagetracking & AJAX samengevat

Door de pagetracking te activeren m.b.v. een event-activeringsregel (Google Tag Manager) dan wel een JavaScript event listener worden paginaweergaven geregistreerd nadat een specifiek event is verstuurd.

Door de datacode met dit event af te sluiten is de datacode klaar wanneer de pagetracking wordt geactiveerd.

Tot slot: virtuele paginaweergaven

Naast initiële paginaweergaven kennen veel AJAX-sites virtuele paginaweergaven. Deze worden niet gemeten omdat trackingcodes alleen niet-virtuele paginaweergaven registreren.

Zie je graag een blog verschijnen dat uiteenzet hoe je virtuele paginaweergaven meet? Of heb je vragen over dit artikel? Laat dan hieronder een reactie achter.