AJAX applicaties analyseren en tracken met Google Analytics

Published on Jul 18, 2011

Google Analytics

Google Analytics is een enorm handig en waardevol hulpmiddel om de prestaties van uw website of webapplicatie te meten. Met Google Analytics kan je veel meer dan alleen maar bezoekersaantallen meten. Wij gebruiken de gratis dienst bijvoorbeeld om te analyseren via welke zoekopdrachten bezoekers op onze website en die van onze klanten terecht komen, of om te analyseren welke browsers onze bezoekers het meest gebruiken. Maar we willen meer: we willen in AJAX-applicaties kunnen bijhouden wanneer iemand een bepaalde actie heeft uitgevoerd door hiervoor goals te definiëren in Google Analytics.

Wat zijn goals?

Wat zijn nu eigenlijk goals? Een goal is bijvoorbeeld een verkoop van een product in een webwinkel, een aanvraag tot prijsofferte, een mail die verzonden wordt via een contactformulier, enzovoort. Anders gesteld: een goal is een waardevolle actie die een gebruiker kan ondernemen op uw website of webapplicatie.

En wat zijn funnels?

Een funnel kunnen we beschrijven als de weg die een gebruiker moet afleggen op uw website om een bepaald doel te bereiken. Zo kan een funnel bijvoorbeeld bestaan uit een startpagina waar elke gebruiker begint, vervolgens een detailpagina met gegevens over een bepaald product, om daarna te eindigen op een bestelformulier dat ingevuld wordt door de gebruiker. Wanneer deze drie pagina's (index, product details, bestelformulier) in die volgorde werden bezocht dan werd de funnel succesvol doorlopen.

Wat met AJAX applicaties?

Google Analytics kan heel eenvoudig detecteren wanneer een gebruiker een bepaalde pagina heeft bezocht. Het gaat hier namelijk om een gewone webpagina, waarin de webdesigner een stukje javascriptcode van Google Analytics heeft toevoegd. Zodra de pagina wordt bezocht, wordt de javascriptcode uitgevoerd en wordt de bezoekersteller verhoogd. Wanneer we een AJAX-applicatie willen analyseren en meten voldoet deze manier van bezoekers tellen helaas niet. Een kenmerk van goede AJAX-applicaties is juist dat een gebruiker niet meer zo vaak van de ene naar de andere pagina moet surfen om acties te kunnen voltooien.

Binnen AJAX-applicaties zal een gebruiker vaak op één bepaalde interactieve pagina blijven en daarbinnen allerlei acties ondernemen zoals het versturen van een contactformulier, het toevoegen van producten, ... In een nieuwe online dienst die we aan het ontwikkelen zijn zullen we ook vaak gebruik maken van AJAX in onze interface. Zo kunnen bezoekers momenteel hun emailadres reeds achterlaten via een formulier om op de hoogte gesteld te worden van de datum waarop we de dienst zullen lanceren voor een beta-publiek. We willen in Google Analytics graag snel kunnen zien hoeveel mensen zich succesvol hebben ingeschreven via ons AJAX-formulier. AJAX signup formulier Probleem: het verzenden van het formulier kan gebeuren zonder dat de gebruiker naar een andere webpagina moet navigeren. Google Analytics detecteert met andere woorden geen nieuwe pagina en voert de ingebouwde analytics functies niet uit. Bijgevolg zal dan ook niet zomaar kunnen bijhouden worden hoeveel mensen het contactformulier hebben verzonden.

Omdat meer en meer moderne applicaties gebruik maken van AJAX heeft Google Analytics een functie voorzien waarmee we zelf pageviews kunnen gaan definiëren en detecteren bij een welbepaalde actie zoals het inschrijven in onze mailinglijst. Zodra we via javascript kunnen detecteren dat een gebruiker zijn email adres succesvol heeft verzonden gaan we zelf een pageview aanroepen met een bepaalde naam, bijvoorbeeld "BETA EMAIL SIGNUP". Dit kan in javascript via het volgende stukje code:


pageTracker._trackPageview('/AJAXCLICK/SIGNUP_FOR_BETA');

Dit stukje code zorgt ervoor dat we kunnen communiceren met Google Analytics door zelf een pageview aan te roepen. Vanaf nu kunnen we in Google Analytics zien hoeveel keer deze pagina reeds werd aangeroepen. AJAX pageviews detecteren Bovenstaande functieaanroep dient natuurlijk geplaatst te worden in uw javascriptcode waar je zeker bent dat dit bepaald event werd uitgevoerd. De plaats waar u dit stukje code kleeft hangt vanzelfsprekend af van project tot project.

Wanneer een gebruiker op solidshops.com zijn of haar emailadres foutief ingeeft willen we dit niet laten meetellen als een succesvolle signup. Enkel een succesvolle signup zal ervoor zorgen dat we de Pageview functie van Google Analytics aanroepen. Daarom kunnen we hier de functie niet zomaar uitvoeren wanneer iemand op de signup-knop klikt. Ook mensen die zich niet of niet correct inschrijven zouden dan meegeteld worden door Google Analytics. Javascript functie Google Analytics

AJAX goals opzetten

De volgende stap is het definiëren van een goal. Voor ons is het namelijk een waardevolle actie wanneer een gebruiker zich inschrijft op onze nieuwsbrief. Dit willen we bijhouden in een duidelijke goal. Om goals op te zetten in Google Analytics zoekt u het gewenste website profiel en klikt u op "Edit" onder "Actions".

Meer informatie kan u vinden op volgende documentatielink. Aangezien we reeds zelf Pageviews opwerpen op een door ons gekozen moment wordt het mogelijk deze specifieke Pageview te definiëren als een goal in Google Analytics. In ons bovenstaand codevoorbeeld hebben we de pageview "/AJAXCLICK/SIGNUP_FOR_BETA" genoemd.

Definieer deze "pagina" als een nieuwe goal en Google Analytics zal vanaf dan netjes bijhouden hoeveel mensen er via onze AJAX-applicatie succesvol werden ingeschreven op onze beta nieuwsbrief, net alsof ze naar een gewone webpagina zouden surfen. Schermafdruk van dit project Happy AJAX analyzing!

No comments? But that’s like a Gin & Tonic without the ice?

I’ve removed the comments but you can shoot me a message on LinkedIn to keep the conversation going.