Meet het scrollgedrag van je bezoekers in Google Analytics

30 juni 2017

Het leven van een blogger is een stuk leuker als hij weet dat zijn blogs gelezen worden. Met de basis configuratie van Google Analytics kan je niet zien of mensen je blog volledig hebben gelezen. Hier gaan we verandering in brengen door het scrollgedrag van je bezoekers te meten.

In dit blog beschrijven we twee verschillende methodes om het scrollgedrag te meten. Voor beide methodes heb je Google Tag Manager nodig. Heb je Google Tag Manager nog niet geïnstalleerd op je website? Ga naar de Tag Manager Help omgeving voor instructies of neem contact met ons op!

Methode #1: Plug-And-Play

Deze methode is oorspronkelijk geplaatst door Lunametrics.

Wat doet het? Met deze methode meet je het scrollgedrag op alle pagina’s in de vorm van events in Analytics. Standaard wordt een event naar Google Analytics gestuurd wanneer iemand 25% van de pagina heeft bekeken, 50%, 75% en 100%. Het scrollgedrag heeft in de standaardconfiguratie geen impact op het bouncepercentage of de tijd op de website. Met een aantal kleine aanpassingen kan je er wel voor zorgen dat dit wel het geval is. Hierover later meer.

Instructies

Stap 1. Download Container bestand

Download het container JSON bestand (rechtermuisklik op de link en klik op “Bestand opslaan als” of “Link opslaan als”).

Stap 2. Importeer het JSON bestand in Google Tag Manager

Log in bij Google Tag Manager en ga naar het Beheer gedeelte. Klik daar op de optie Container importeren. Importeer het containerbestand, selecteer de juiste werkruimte en kies voor de importoptie ‘Samenvoegen’.

Stap 3. Maak of update je tracking-ID variabele

In de Werkruimte ga je naar Variabelen. Daar maak je een nieuwe constante variabele aan met de naam YOUR_GA_TRACKING_ID. In het veld ‘waarde’ vul je de tracking-ID van je eigen Analytics account.

Stap 4. Preview & publiceren

Gebruik de voorbeeldmodus om de geïmporteerde container te testen. Test of alle scrolldieptes worden gemeten. Als het er allemaal goed uit ziet kan je de container publiceren.

Stap 5. Optioneel – Configureer de Scrolldieptes

Het aangepaste HTML-script is op verschillende manieren te configureren. Je kan er bijvoorbeeld voor kiezen om de scrolldiepte pas vanaf 50% van de pagina te meten. Dit doe je door de code in het script aan te passen.

Dit is het gedeelte uit de code wat je aan gaat passen

// Configure percentages of page you'd like to see if users scroll past
    'percentages': {
      'each': [10,90],
      'every': [25]
    },

Dit stukje code vervang je met onderstaande code. Nu wordt er een event naar Analytics gestuurd wanneer iemand 50% van de pagina heeft bekeken, 75% of 90%.

// Configure percentages of page you'd like to see if users scroll past
    'percentages': {
      'each': [50,75,90],
    },

Op deze pagina vind je nog meer voorbeelden om het script aan te passen. Met een paar eenvoudige aanpassingen aan het script kan je de pixeldiepte en diverse andere elementen meten.

Methode #2: Do it Yourself

Deze methode is oorspronkelijk geplaatst door Rob Flaherty.

Wat doet het? Met deze methode meet je naast het scrollgedrag ook de tijd van het scrollgedrag. Ook bij deze methode heeft het scrollgedrag geen impact op het bouncepercentage of de tijd op de website.

Instructies

Stap 1. Kopieer de JavaScript code

Ga naar Gifthub en kopieer de gehele code.

Stap 2. Voeg een aangepaste HTML-tag toe

Ga in Google Tag Manager naar Tags en voeg een nieuwe Tag toe met de naam Scroll-Tracking. Bij Tagconfiguratie kies je voor een aangepaste HTML-tag. Voeg hier de code toe. Bedenk voor jezelf voor welk gedeelte van je website het nodig is om het scrollgedrag te meten. Als je bijvoorbeeld niet wilt dat deze tag op alle pagina’s afgevuurd wordt zal je hiervoor een trigger moeten maken.

Stap 3. Verzamel de benodigde informatie via variabelen

Ga in Google Tag Manager naar Variabelen en klik op Nieuw. Voeg daar een variabele voor gegevenslaag toe met de naam ‘eventAction’. Maak daarnaast ook een variabele aan voor eventCategory, eventLabel en eventTiming.

Stap 4. Voeg een Trigger toe

De Trigger die je nu in gaat stellen gaat af op het moment dat een bezoeker een X-percentage van de pagina heeft bekeken. De Trigger gaat af op 25%, 50%, 75% en 100%. Ga in Google Tag Manager naar Triggers en voeg een nieuwe Trigger toe. Kies bij Triggertype voor Aangepaste gebeurtenis en noem de Trigger ‘ScrollTiming-event’. Onder “naam van gebeurtenis” vul je ScrollTiming in. Sla de Trigger op.

Stap 5. Stuur de data naar Analytics

Ga in Google Tag Manager naar Tags en kopieer de Analytics tag. Heb je deze nog niet, configureer deze dan eerst. Kies onder Trackingtype voor Gebeurtenis. Vervolgens vul je de vier parameters in zoals in de onderstaande afbeelding. Als laatste stel je een Trigger in. Kies hier voor de Trigger die je in stap 4 hebt gemaakt.

Stap 6. Preview & publiceren

Gebruik de voorbeeldmodus om deze methode te testen. Test of alle scrolldieptes worden gemeten en of de tijd van het scrollgedrag binnenkomt in Analytics. Hiervoor kan je de Realtime omgeving in Analytics raadplegen. Als het er allemaal goed uit ziet kan je de GTM-container publiceren.

Stap 7 Optioneel – Meet alleen webpagina’s met een bepaalde pixel-hoogte

Dit script kan je zo configureren dat alleen webpagina’s met een minimale pixel-hoogte worden gemeten. Pas hiervoor de minHeight aan op regel 29 in de code.

Vond je dit interessant?

Schrijf je in voor onze nieuwsflits en ontvang maandelijks een update met onze laatste blogs en updates!

volg ons op