Hotjar heatmaps met Lazy Loading

Hotjar is een prachtige service waarmee je het gedrag van de gebruikers van je site kunt vastleggen. Zo kun je bijvoorbeeld opnames maken van het scherm, de interacties met formulieren onderzoeken en controleren waar gebruikers in een lineair pad afslaan. Wij gebruiken Hotjar ook om heatmaps te maken. Dat zijn afbeeldingen van het scherm waarin je kunt zien waar gebruikers heen scrollen en waar ze op klikken. Ook gebruiken wij op onze sites vaak een techniek die ‘lazy loading’ heet. Dit houdt in dat afbeeldingen op de site pas worden gedownload als je ze in beeld ziet. Hotjar kan echter slecht omgaan met lazy loading – alle afbeeldingen die zo worden ingeladen worden door Hotjar niet correct getoond omdat het genereren van de heatmap gebeurt voordat de afbeeldingen worden ingeladen. Zie hieronder een screenshot van hoe dat er uit ziet:

De oplossing

Niet zo fraai, want dit is niet wat de gebruiker ziet! Gelukkig is dit op te lossen. Hiervoor moet je een nieuwe heatmap aanmaken, en daarbij een custom screenshot URL toevoegen. Achter deze URL plaats je ?hjDelay=10000. Dit houdt in dat Hotjar pas na 10 seconden wordt ingeladen op deze pagina. Nadat je de heatmap hebt gemaakt en 5 minuten hebt gewacht kun je de screenshot die als achtergrond van je heatmap dient genereren. Dit doe je door de URL met ?hjDelay=10000 erachter te openen en naar de onderkant van de pagina te scrollen, waardoor alle afbeeldingen worden ingeladen. Je hebt hiervoor 10 seconden de tijd, want dan wordt de heatmap gegenereerd. Let op! Je moet dit voor zowel desktop, tablet én mobile doen. Je kunt dit het beste met de Chrome developer tools doen waarin je de resolutie kunt aanpassen naar tablet en smartphone. Je kunt de correcte heatmap pas zien als er Hotjar de acties van een aantal gebruikers heeft geregistreerd in de heatmap. Om meer te weten over dit proces kun jedit artikel van de Hotjar documentatie lezen. De gegenereerde heatmap ziet er nu correct uit.

Experimenten

Je hebt nu je heatmap, maar wat kun je er precies meedoen? Hier volgen enkele ideeën om snel te starten met onderzoeken:

• Scrollen gebruikers naar het einde van de pagina? Dit is belangrijk om te controleren als er belangrijke content aan de onderkant van de pagina staat.
• Waarop wordt het meeste geklikt? Is het wenselijk dat hierop wordt geklikt?
• Waarop wordt het minste geklikt? Zijn dat belangrijke buttons?
• Is er een verschil hoe gebruikers de site op desktop, tablet en mobile gebruiken? Zo ja, is dit verschil wenselijk?

Ik wens je veel succes én plezier met het onderzoeken van het gebruik van je site! Wil je starten met het analyseren van het gebruikersgedrag op je website, maar weet je niet waar je moet beginnen? Neem contact met ons op en laat je adviseren!