UX Heatmap and Scrollmap by TheSEO

Klik-heatmaps, scrolldiepte, rage clicks en dode klikken binnen je eigen WordPress. Geen cookies, geen browseropslag, geen externe dienst. Gebouwd door TheSEO en hier open source beschikbaar onder GPLv2.

De plugin beantwoordt vier vragen waar je diezelfde middag iets mee kunt:

• Waar klikken mensen, en is dat waar je wilde dat ze klikten?
• Waar klikken mensen op iets dat helemaal niet reageert?
• Waar klikken mensen keer op keer omdat ze denken dat het stuk is?
• Hoe ver naar beneden komt er eigenlijk iemand?

Alles draait binnen je eigen WordPress. De tracker praat met je eigen site en met niets anders. Er is geen account, geen dashboard elders en geen script van een derde partij.

De drie overlays

Klikken. Een warmtelaag over een live voorbeeld van de pagina. Warm is waar het meest geklikt is, gemeten tegen de volledige paginahoogte en niet tegen het stuk dat toevallig in beeld stond.

Rage en dood. Rode ringen zijn rage clicks, amberkleurige vierkanten zijn dode klikken. Een rage click is een van drie of meer klikken binnen een seconde die allemaal binnen veertig pixels van elkaar landen. Een dode klik is een klik op iets dat geen link, knop of formulierveld is en waarna er binnen zeven tiende seconde niets op de pagina veranderde. Allebei worden ze in de browser bepaald en als ja of nee opgeslagen bij de klik die toch al werd vastgelegd.

Scrolldiepte. De overlay vervaagt waar minder paginaweergaven kwamen, met een doorgetrokken lijn op de vouw en een stippellijn op de leesgrens. Naast het voorbeeld staat dezelfde meting als liniaal in twintig banden van vijf procent.

De vouw en de leesgrens

De vouw is waar het eerste scherm ophoudt, per paginaweergave gemeten en teruggebracht tot de mediaan zodat een afwijkend browservenster de lijn niet kan verschuiven. De leesgrens is de diepte waar de helft van de paginaweergaven voorbij kwam. Staat je belangrijkste knop onder de leesgrens, dan ziet de meerderheid hem nooit.

Segmenten en de conclusie

Elk getal is per apparaat te lezen, desktop tegenover tablet tegenover mobiel, en per startpunt: paginaweergaven die op deze pagina begonnen tegenover weergaven die een klik vanaf een andere pagina van je site volgden. Een tabel zet alle vijf de segmenten naast elkaar.

Nieuw tegenover terugkerend wordt bewust niet aangeboden. Een terugkerende bezoeker herkennen vraagt een cookie of browseropslag, deze plugin gebruikt geen van beide, en een getal dat niet eerlijk te meten is kun je beter weglaten dan gokken. De viewer zegt dat op het scherm in plaats van er stilletjes een gat te laten.

Onder de getallen schrijft de viewer in gewone zinnen op wat hij ziet, met het element erbij genoemd. Bijvoorbeeld: bezoekers klikken elf keer op div.pricing-card terwijl daar geen link, knop of formulierveld zit en er niets op de pagina verandert. Zinnen verschijnen pas als er genoeg gegevens zijn om ze te dragen, en als die er niet zijn dan zegt de viewer dat ook.

Downloaden en installeren

• Zip via theseo.nl: tools-en-plugins/wordpress-heatmap-scrollmap
• Of via de releases hier op GitHub
• Of klonen en de map in wp-content/plugins/ zetten:

git clone https://github.com/GianlucaNaarden/wp-ux-heatmap.git
cp -r wp-ux-heatmap /pad/naar/wp-content/plugins/

Daarna: activeren, naar UX Heatmaps, Settings gaan en Enable tracking aanzetten. Bezoek je eigen site in een uitgelogde browser om de eerste gebeurtenissen te maken, en open dan UX Heatmaps en kies een pagina.

Eisen: WordPress 6.0 of nieuwer, PHP 7.4 of nieuwer. De kopregel Tested up to staat op 7.0; dat is wat de plugin verklaart en nog niet wat er op een draaiende WordPress 7.0 is nagemeten.

Wat er wordt opgeslagen

Per gebeurtenis een rij met een willekeurige identificatie die de gebeurtenissen van een enkele paginaweergave groepeert en bij het sluiten van de pagina verdwijnt, het soort gebeurtenis (klik of scroll), het paginapad zonder querystring en zonder fragment, de klikpositie plus die positie als percentage van de volledige paginahoogte, de breedte en hoogte van het venster, de volledige paginahoogte, de scrolldiepte in procenten, een korte CSS-selector van het aangeklikte element, twee ja-of-nee-vlaggen voor een rage click en een dode klik plus de omvang van de rage-reeks bij de eerste klik daarvan, een getal dat zegt of de paginaweergave hier begon of een klik vanaf een andere pagina van dezelfde site volgde, en het tijdstip volgens de server.

Wat er niet wordt opgeslagen

• geen cookie en niets in localStorage of sessionStorage
• geen IP-adres, niet in leesbare vorm en niet als hash
• geen user agent
• geen verwijzend adres; alleen het getal dat zegt intern of niet
• geen gebruikers-id en geen koppeling met een WordPress-account
• geen querystring, dus een naam of e-mailadres in een URL komt nooit in de tabel terecht
• niets dat je server verlaat

De identificatie is nieuw bij elke paginaweergave, dus twee bezoeken van dezelfde persoon zijn twee losse rijen zonder iets gemeenschappelijks. Dat is de ruil: je kunt iemand niet over pagina's heen volgen, en in ruil daarvoor valt er niets te volgen.

Stuurt een browser Do Not Track of Global Privacy Control, dan doet de tracker helemaal niets. Dat staat standaard aan en is uit te zetten.

Een dagelijkse taak verwijdert gebeurtenissen die ouder zijn dan de bewaartermijn. Je kiest 30, 90, 180 of 365 dagen, of alles bewaren; standaard staat hij op 90 dagen. Er is een knop die alle verzamelde gebeurtenissen van de hele site wist, en een knop onder de viewer die alleen die van een enkele pagina wist. Allebei vragen ze eerst om bevestiging. Deactiveren behoudt de gegevens en stopt de taak. Verwijderen laat de tabel en de instellingen vallen.

Wat de plugin niet doet

Geen sessieopnamen, geen muisbewegingskaarten, geen formulieranalyse, geen trechters en geen A/B-testondersteuning. Tot en met versie 1.3.0 beloofde de documentatie een aantal van die dingen terwijl de code ze nooit heeft gehad; in 2.0.0 is dat gelijkgetrokken en sindsdien staat hier alleen wat er echt in zit.

Belangrijk bij het bijwerken

Naar 2.1.0. Deze versie voegt vijf kolommen toe aan de gebeurtenissentabel: de twee vlaggen voor rage clicks en dode klikken, de omvang van de rage-reeks, de paginahoogte en het startpunt van de paginaweergave. Dat gebeurt eenmalig, bij het eerste bezoek aan een beheerpagina na het bijwerken. Gebeurtenissen van voor deze versie blijven gewoon werken en dragen simpelweg geen frictievlaggen, dus de rage-en-dood-overlay blijft leeg tot er nieuwe gebeurtenissen binnenkomen.

Naar 2.0.0. Die versie verwijderde de kolommen ip_hash en user_agent uit de gebeurtenissentabel, eenmalig en niet terug te draaien. Klikgegevens van voor 2.0.0 hebben geen paginapositie en blijven buiten de overlay. Maak eerst een databaseback-up als die oude rijen ertoe doen.

De heatmap zelf was tot en met 1.3.0 kapot: de tracker mat de klikpositie over de hele pagina en stuurde die mee, maar er was geen kolom voor, de endpoint las hem niet en de query gaf hem niet terug. Elke klik werd daardoor getekend op zijn positie binnen het venster, wat de hele kaart in het bovenste deel van de pagina samendrukte. In 2.0.0 is de kolom click_y_percent toegevoegd, opgeslagen en gebruikt.

De volledige lijst per versie staat in readme.txt.

Opbouw

wp-ux-heatmap.php                    bootstrap, constanten, PHP-versiecontrole
includes/class-wpuxh-install.php     tabel, schema-versie, opruimtaak, activatie
includes/class-wpuxh-settings.php    instellingen, standaarden en het instelscherm
includes/class-wpuxh-request.php     validatie van binnenkomende gebeurtenissen
includes/class-wpuxh-repository.php  alle databasequeries
includes/class-wpuxh-collector.php   de publieke endpoint
includes/class-wpuxh-strings.php     elke zin die de viewer op het scherm zet
includes/class-wpuxh-admin.php       beheerschermen en de viewer
includes/class-wpuxh-plugin.php      hooks aan elkaar knopen
assets/js/wpuxh-tracker.js           de tracker op de voorkant
assets/js/wpuxh-admin.js             de viewer: overlays, getallen en conclusies
assets/css/wpuxh-admin.css           de vormgeving van de beheerschermen
languages/                           .pot plus de Nederlandse vertaling
uninstall.php                        tabel en opties opruimen bij verwijderen

De zinnen die de viewer schrijft staan in PHP en niet in JavaScript, zodat ze via de gewone WordPress-vertaalroute lopen. De viewer rekent alle getallen in de browser uit, uit dezelfde steekproef waaruit de overlay wordt getekend, zodat een getal en een plaatje het nooit oneens kunnen zijn.

Licentie

GPLv2 of nieuwer, zie LICENSE.

Meer

Uitleg, achtergrond en de andere gratis tools staan op theseo.nl/tools-en-plugins.