5.6 Heatmaps & sessie-opnames
GA4 vertelt je dát mensen afhaken op de productpagina. Het vertelt je niet waaróm. Heatmaps en sessie-opnames laten je over de schouder van de bezoeker meekijken: waar ze klikken, hoe ver ze scrollen, waar ze frustreren en op welk veld ze blijven hangen. Het is de kwalitatieve laag die je kwantitatieve diagnose uit 5.1 tot een toetsbare hypothese maakt.
Kernconcepten
Section titled “Kernconcepten”Heatmap. Een visuele weergave van bezoekersgedrag, over honderden sessies opgeteld. Er zijn drie soorten:
- Click-map: waar wordt geklikt. Onthult welke elementen aandacht trekken en welke genegeerd worden.
- Scroll-map: hoe ver bezoekers scrollen. Toont de “vouw” (waar de gemiddelde bezoeker stopt) en of belangrijke content gezien wordt.
- Move-map (hover): waar de cursor beweegt — een ruwe proxy voor waar de ogen kijken (vooral op desktop).
Sessie-opname (session recording). Een afspeelbare opname van één individuele bezoeker: muisbewegingen, klikken, scrollen, formulierinteractie. Anders dan de heatmap (geaggregeerd) kijk je hier naar één persoon van begin tot eind.
Dode klik (dead click). Een klik op iets dat eruitziet als een knop of link maar niet reageert. Een klassieke conversiekiller: bezoekers verwachten interactie en krijgen niets.
Rage click. Snel herhaald klikken op dezelfde plek — een duidelijk signaal van frustratie, meestal door iets dat niet werkt of te traag laadt.
Scroll-diepte. Het percentage van de pagina dat bezoekers gemiddeld zien. Als je “In winkelwagen”-knop of je reviews onder het punt liggen waar 60% afhaakt, ziet de meerderheid ze nooit.
Formulieranalyse. Een rapport dat per veld toont waar bezoekers in een formulier (checkout) afhaken, hoeveel tijd ze per veld besteden en welk veld de meeste correcties oplevert.
Stap-voor-stap workflow
Section titled “Stap-voor-stap workflow”-
Begin bij een bekend lek. Open heatmaps niet “om eens rond te kijken”. Vertrek vanuit een concrete drop-off uit je funnel (5.1).
-
Installeer Microsoft Clarity (gratis) of Hotjar. Plaats de tracking-snippet (op Shopify via een app of in het thema). Zet maskering van invoervelden aan vóór je begint — zie de AVG-sectie.
-
Verzamel voldoende data. Wacht op minimaal 100 à 300 sessies per pagina voordat je een heatmap interpreteert. Onder dat aantal kijk je naar toeval.
-
Lees de scroll-map: zit cruciale content boven de afhaaklijn? Staan je “In winkelwagen”, USP’s en reviews binnen het bereik dat de meerderheid ziet?
-
Lees de click-map: waar klikken mensen, en op wat dat niet klikbaar is? Dode klikken op een productfoto betekenen vaak: mensen verwachten te kunnen inzoomen.
-
Bekijk 10 à 20 sessie-opnames van afhakers. Filter op sessies die in jouw lek-stap stopten. Let op aarzeling, terugscrollen, rage clicks.
-
Draai een formulieranalyse op de checkout. Welk veld kost de meeste tijd of veroorzaakt afhaken? Vaak: verplicht account, verwarrend adresveld, ontbrekende betaalmethode.
-
Vertaal observatie naar hypothese naar test. Elke observatie wordt een hypothese die je toetst via 5.2 A/B-testen of, bij weinig verkeer, direct doorvoert en monitort.
Voorbeelden van concrete inzichten
Section titled “Voorbeelden van concrete inzichten”Scroll-diepte legt verborgen reviews bloot. Een shop zag in de scroll-map dat 65% van de bezoekers stopte vóór de reviewsectie, die onderaan de productpagina stond. De reviews — hun sterkste vertrouwenssignaal — werden door tweederde nooit gezien. Ze verplaatsten de sterrenscore naar direct onder de titel; de add-to-cart-ratio steeg merkbaar.
Dode klikken op de productfoto. De click-map toonde een cluster klikken midden op de hoofdfoto, terwijl die niet inzoombaar was. Bezoekers wilden detail zien en kregen niets. Na het toevoegen van zoom-functionaliteit en extra detailfoto’s daalde de bounce op de productpagina.
Rage clicks op een trage “Toevoegen”-knop. Sessie-opnames lieten bezoekers drie, vier keer op de winkelwagen-knop klikken omdat de bevestiging traag verscheen. Gevolg: dubbele toevoegingen en verwarring. De fix lag in snelheid (zie 3.7 Snelheid & Core Web Vitals), niet in design.
Formulieranalyse onthult het account-veld. In de checkout bleek het “Maak een wachtwoord aan”-veld het grootste afhaakpunt. Een groot deel van de bezoekers stopte daar. Het inschakelen van gastcheckout verhoogde de checkout-voltooiing direct.
Formules & benchmarks
Section titled “Formules & benchmarks”Heatmaps zijn primair kwalitatief, maar een paar getallen helpen bij interpretatie.
Minimale sessies voor betrouwbare heatmap: richt op 100 à 300 sessies per pagina/segment. Splits altijd mobiel en desktop — gedrag verschilt fundamenteel.
Scroll-diepte tot je primaire CTA: streef ernaar dat minimaal 75% van de bezoekers je “In winkelwagen”-knop ziet zonder te scrollen op mobiel, of binnen de eerste schermlengte.
| Signaal | Wat het betekent | Actie |
|---|---|---|
| Veel klikken op niet-klikbaar element | Verwachte interactie ontbreekt | Maak het klikbaar (zoom, link, accordion) |
| Rage clicks | Frustratie, vaak traagheid of bug | Controleer snelheid en functionaliteit |
| Scroll-diepte stopt vóór CTA bij meer dan 40% | Cruciale content wordt gemist | Verplaats CTA/reviews omhoog |
| Lange tijd op één checkout-veld | Verwarrend of onnodig veld | Vereenvoudig of verwijder het veld |
| Veel terugscrollen | Informatie ontbreekt waar verwacht | Herorden de pagina |
| Metric | Zorgwekkend | Gezond |
|---|---|---|
| Sessies per heatmap | minder dan 100 | meer dan 300 |
| Scroll-bereik tot primaire CTA | minder dan 60% | meer dan 80% |
| Rage-click-sessies | meer dan 5% | minder dan 1% |
| Gem. tijd op cruciaal checkout-veld | meer dan 15 sec | minder dan 8 sec |
| Tool | Functie | Wanneer kiezen |
|---|---|---|
| Microsoft Clarity | Heatmaps + sessie-opnames + rage/dead-click-detectie | Altijd starten — volledig gratis, onbeperkt, AVG-instelbaar |
| Hotjar | Heatmaps, opnames, surveys, funnels | Als je enquêtes/feedback-widgets wilt combineren |
| Lucky Orange | Heatmaps + live chat + opnames | Bij behoefte aan live observatie en chat in één |
| FullStory | Geavanceerde sessie-analyse, frictiescores | Grote shops met serieus UX-budget |
| Mouseflow | Formulieranalyse en friction-rapporten | Wanneer checkout-formulieranalyse je hoofddoel is |
AVG en privacy
Section titled “AVG en privacy”Heatmaps en opnames registreren bezoekersgedrag — dat raakt de AVG. Houd je aan deze regels:
- Maskeer alle invoervelden. E-mailadressen, namen, adressen en betaalgegevens mogen nooit zichtbaar worden in opnames. Goede tools maskeren dit standaard; controleer dat het aanstaat.
- Anonimiseer IP-adressen waar de tool dat aanbiedt.
- Vermeld het gebruik in je privacyverklaring en, waar nodig, regel toestemming via je cookiebanner. Sessie-opnames zijn doorgaans geen strikt noodzakelijke cookies, dus consent is vereist.
- Bewaar opnames niet langer dan nodig. Stel een bewaartermijn in (bijv. 30 dagen) in plaats van onbeperkt opslaan.
- Geef nooit ruwe opnames door aan derden zonder grondslag.
Veelgemaakte fouten
Section titled “Veelgemaakte fouten”- Conclusies trekken uit te weinig sessies. Tien opnames zijn anekdotes, geen patroon. Een heatmap op 40 sessies is ruis. Wacht op voldoende data.
- Mobiel en desktop samenvoegen. Het gedrag, de vouw en de afhaakpunten verschillen sterk. Bekijk ze altijd apart.
- Zonder doel rondkijken. Eindeloos opnames bekijken zonder vraag levert tijdverlies op. Begin altijd bij een concreet lek.
- Observatie verwarren met bewijs. Een heatmap geeft een hypothese, geen conclusie. Toets de wijziging via een A/B-test of monitor het effect — zie 5.2.
- Maskering vergeten. Het grootste privacyrisico. Standaard aanzetten en controleren.
- Alleen naar afhakers kijken. Bekijk ook opnames van succesvolle kopers — die laten zien wat wél goed werkt en wat je niet kapot moet maken.
Checklist
Section titled “Checklist”Sjablonen
Section titled “Sjablonen”Per inzicht noteer je:
- Bron: [scroll-map / click-map / sessie-opname / formulieranalyse]
- Pagina en apparaat: [bijv. productpagina, mobiel]
- Aantal sessies bekeken: [getal]
- Observatie: [wat zag je concreet, bijv. “65% scrollt niet tot de reviews”]
- Veronderstelde oorzaak: [waarom gebeurt dit waarschijnlijk]
- Hypothese: “Als ik [wijziging], dan verbetert [metric], omdat [reden]”
- Vervolg: [A/B-testen / direct doorvoeren en monitoren]
Lees verder
Section titled “Lees verder”- 5.1 Conversiefunnel & lekken opsporen — bepaal welk lek je onderzoekt
- 5.2 A/B-testen — toets je hypothese betrouwbaar
- 3.7 Snelheid & Core Web Vitals — als rage clicks op traagheid wijzen
- 3.6 Checkout & betaalmethodes — checkout-frictie wegnemen
- 1.6 Juridisch & administratief — AVG en privacyverklaring