Weergave
Scrolldiepte
Beschikbaar opelk abonnement
Scrolldiepte laat zien hoe ver je bezoekers op een pagina naar beneden komen. Het komt uit hetzelfde script dat paginaweergaven registreert, doet geen extra verzoeken en is anoniem, net als al het andere in Cabin.
Wat er wordt gemeten
Elk bezoek registreert het diepste punt dat het bereikte, als percentage van de inhoud van de pagina. Dat wordt één keer verstuurd, als de bezoeker de pagina verlaat.
Het percentage wordt gemeten ten opzichte van de inhoud van de pagina, niet het hele document. Een lange footer laat een volledig gelezen pagina dus niet op 75% uitkomen. Zie wat telt als de pagina.
Waar je het vindt
Op het dashboard toont de rij Attention de gemiddelde scrolldiepte van je site. De smalle strook ernaast is een afbeelding van een pagina: bovenaan vol en naar beneden toe vervagend, naarmate bezoekers afhaken. Beweeg over een band om precies te zien welk deel zo ver kwam.
In de page peek open je een pagina vanuit Top Pages en ga je naar het tabblad Attention. Daar zie je dezelfde cijfers voor die pagina, plus een grotere versie van de strook als lijst.
De heatmap lezen
Elke rij is het deel van de bezoekers dat minstens zo ver op de pagina kwam. De rij 0% is iedereen, en vanaf daar dalen de rijen alleen maar.
De daling tussen twee rijen is waar mensen stopten. Een grote daling bovenaan betekent dat de meeste bezoekers nooit scrolden. Ligt de rij 100% niet ver onder de rest, dan zijn de meeste mensen die begonnen ook tot het einde doorgegaan.
100% halen betekent dat de onderkant van de inhoud in beeld was, niet dat die gelezen is. Iemand die meteen naar het einde schiet, telt ook mee.
Wat telt als de pagina
Cabin meet de diepte ten opzichte van het inhoudsblok, dat in deze volgorde wordt gezocht:
- Een element met
data-cabin-content, als je dat hebt toegevoegd. - Anders het eerste
<article>of<main>. - Anders het hele document, afgekapt bij de eerste
<footer>.
Heeft je layout geen <article> of <main>, of omvatten die naast het bericht ook de zijbalk en reacties? Vertel Cabin dan waar de inhoud staat:
html
<div data-cabin-content>
<!-- de tekst van het artikel -->
</div>Dat is een van de twee tags die scrolldiepte kent. De andere staat in de volgende sectie.
Apps, dashboards en panelen
De meeste sites scrollen het hele venster. Apps vaak niet: die houden de header en zijbalk vast en scrollen een paneel in het midden. Cabin volgt het element dat echt beweegt. Een layout in dashboardstijl wordt dus net zo gemeten als een gewone pagina, en je hoeft niets te doen.
Is je layout zo ongewoon dat Cabin het verkeerde element kiest? Wijs dan het juiste aan:
html
<div data-cabin-scroll-root>
<!-- het deel van de pagina dat scrollt -->
</div>De twee attributen
Dit zijn de enige twee tags die scrolldiepte heeft, en ze beantwoorden verschillende vragen.
| Welke vraag het beantwoordt | Voeg het toe als | |
|---|---|---|
data-cabin-content | Welk deel van de pagina telt als de inhoud? | Je pagina geen <article> of <main> heeft, of er een heeft die ook de zijbalk en reacties omvat |
data-cabin-scroll-root | Welk element doet het scrollen? | Cabin in een app-layout het verkeerde paneel kiest |
Anders gezegd: de scroll root is waar de scrollbalk zit, en de inhoud is het deel daarbinnen dat je wilt meten. Op een gewone site hoef je nooit over de eerste na te denken, want het antwoord is het venster, en dat gebruikt Cabin tenzij iets anders wordt aangegeven.
html
<body>
<header>vast, scrollt nooit</header>
<div data-cabin-scroll-root>
<!-- het stuk dat beweegt -->
<article data-cabin-content>
<!-- het stuk dat telt -->
</article>
<footer>hoog, hoort niet mee te tellen voor het lezen</footer>
</div>
</body>Ze staan los van elkaar, dus misschien heb je de ene nodig en de andere niet, en de meeste sites hebben geen van beide nodig. Van elk wordt alleen het eerste getagde element gebruikt.
Pagina's die groeien terwijl je scrolt
Scrolldiepte is een percentage, en een percentage heeft een totaal nodig. Bij een artikel ligt dat totaal vast, dus het cijfer betekent wat je zou verwachten.
Bij een feed, of een pagina met een knop Load more, wordt de pagina langer terwijl de bezoeker leest. Het totaal blijft veranderen, en het percentage verandert mee:
- Iemand leest tot de onderkant van wat geladen is. Dat is 100%.
- Diegene klikt op Load more. De pagina is nu drie keer zo lang en van het nieuwe deel is nog niets gelezen.
- Nu staat diegene op 33%.
Er is niets mis met het cijfer. Het geeft eerlijk weer hoe ver iemand kwam in wat er geladen was. Maar het betekent wel dat het percentage kan dalen naarmate iemand meer betrokken raakt. En op een feed die steeds vooruit laadt, komt niemand ooit onderaan, dus 100% komt eigenlijk nooit voor.
Wat je in plaats daarvan doet
Tel op zulke pagina's het aantal keren laden in plaats van het percentage te lezen. Zet een event op de knop:
html
<button data-cabin-event="Load more">Load more</button>Nu zie je hoe vaak mensen om meer vroegen, en dat is de vraag die je eigenlijk stelde. Dat cijfer stijgt met de interesse in plaats van te dalen.
Het cijfer voor scrolldiepte is op die pagina's nog steeds het bekijken waard, lees het alleen niet als "hoe ver ze naar beneden kwamen".
Wat niet wordt geteld
- Pagina's die korter zijn dan het scherm. Er valt niets te scrollen, dus het bezoek wordt als niet gemeten geregistreerd en weggelaten. Hetzelfde geldt voor een pagina waarvan het inhoudsblok kort genoeg is om volledig in beeld te passen: er is geen scrollen om te meten, dus Cabin meet dan ten opzichte van de pagina in plaats van een leesbeurt te rapporteren die niemand deed.
- Bezoeken die abrupt eindigen. De meting wordt verstuurd als de bezoeker vertrekt, en sommige browsers geven het script daar de kans niet voor. Scrolldiepte komt daarom (net als tijd op pagina) uit een steekproef van bezoeken. Het aantal gemeten bezoeken staat onder het gemiddelde.
- Bots en scrapers. Die voeren het script niet uit. AI-crawlers worden apart geteld in AI Agent Traffic.
Abonnementen
Scrolldiepte zit in elk abonnement, ook in Free. Het wordt sinds de lancering voor elke site geregistreerd, dus als je dashboard nieuw voor je is, is er misschien al geschiedenis om te bekijken.