Hotjar heatmaps met Lazy Loading

Geschreven door: op zondag 10 maart 2019

Leestijd: 2 minuten

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:

Een mislukte heatmap

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.

Sigma Solutions heatmap

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!


Andere blogartikelen

  • B2B SEO en Geoptimaliseerde Afbeeldingen

    Geschreven door: op woensdag 12 augustus 2020

    In een tijd waarin 27% van het koopproces van B2B kopers met eigen online research wordt doorgebracht is het essentieel om een goed vindbare website te hebben. Afbeeldingen kunnen, indien geoptimalise ...

    Bekijk het artikel »
  • Prospects zoeken B2B

    Geschreven door: op woensdag 12 augustus 2020

    Het zoeken van B2B prospects is een uitdaging voor elk bedrijf. Met name kwalitatieve B2B prospects.Door vooraf onderzoek te doen naar bedrijven die voldoen aan je criteria en je marketing hierop aan ...

    Bekijk het artikel »
  • Succesvolle B2B Marketing met deze 5 Tools

    Geschreven door: op woensdag 12 augustus 2020

    Zoals mooi gevisualiseerd in het filmpje ‘The Man in the Chair’. De fundamenten onder marketing veranderen niet, de technologieën en bijbehorende tools wel. Lees hier 5 tools die wij inzetten om B2B M ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
AOC is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten