Zo werkt MousePlayer
Een eenvoudige uitleg van onze trackingarchitectuur, de omgang met schermresoluties op verschillende apparaten en de grenzen van het systeem.
1. Waarom we geen video-opnames gebruiken
Een veelvoorkomend misverstand is dat tools voor visuele analyse gewone videobestanden (zoals MP4 of WebM) van het scherm van een bezoeker opnemen. Dat zou enorm veel bandbreedte kosten, uw website drastisch vertragen en wazige, onleesbare tekst opleveren.
MousePlayer gebruikt in plaats daarvan een lichtgewicht technologie die bekendstaat als DOM Snapshot Telemetry. Zo werkt dat in de basis:
De blauwdruk-momentopname
Wanneer een bezoeker uw pagina opent, maakt ons script een tekstuele “blauwdruk” van uw HTML- en opmaakstructuur. Het legt vast waar elementen staan, zonder de afbeeldingen of video’s van uw pagina te kopiëren; de speler laadt afbeeldingen bij het afspelen vanaf hun oorspronkelijke adres. De uitzondering zijn canvas-elementen, waarvan de inhoud als afbeelding wordt verzonden (zie hieronder).
Coördinatentelemetrie
Terwijl de gebruiker interacteert, leggen we een stroom van gebeurtenissen vast: muisposities, scrolldiepte, klikdoelen en het wijzigen van het browserformaat, plus de wijzigingen aan de pagina zelf en, afhankelijk van de instellingen, consoleberichten, mislukte of trage verzoeken en metingen van de laadtijd (Web Vitals). Bewegingen en klikken zijn klein; momentopnamen en wijzigingen van de pagina kunnen afhankelijk van de pagina aanzienlijk groter zijn en worden gecomprimeerd verzonden.
Afspelen in de theatermodus
Wanneer u een sessie in uw dashboard bekijkt, bouwt onze speler de pagina opnieuw op aan de hand van de vastgelegde blauwdruk en beweegt er in realtime een virtuele cursor overheen, zodat tekst haarscherp blijft.
Gebouwd om licht te blijven: het script laadt asynchroon en verstuurt kleine numerieke datapunten in plaats van video, waardoor de eigen belasting klein blijft. Wat dat voor uw Core Web Vitals betekent, hangt af van uw pagina’s, uw hosting en het netwerk van uw bezoeker; meet het daarom op uw eigen site in plaats van een getal van ons over te nemen. Er wordt geen bepaalde laadsnelheid gegarandeerd – zie artikel 20 van de Servicevoorwaarden.
2. Omgaan met schermresoluties & mobiele apparaten
Gebruikers surfen tegenwoordig op van alles, van compacte smartphones tot ultrabrede 4K-monitoren. Websites verschuiven, vouwen en herschikken hun lay-out automatisch voor verschillende schermbreedtes – een concept dat bekendstaat als responsive webdesign.
Zo nemen we de exacte viewport van de bezoeker over
Om te zorgen dat een weergave niet vervormd oogt, legt MousePlayer de exacte afmetingen van de viewport van de bezoeker vast (bijv. 390x844 voor een smartphone of 1920x1080 voor een desktopmonitor). Wanneer u de speler in de theatermodus opent, maakt onze engine een geschaalde sandbox die de oorspronkelijke schermverhouding van de bezoeker precies weerspiegelt.
Desktop- & laptopschermen
Op gewone computers leggen we doorlopende muisbewegingen en navigatie over meerdere tabbladen binnen dezelfde browsersessie vast. Menu’s die bij hover openen, verschijnen in de weergave wanneer de pagina daarbij haar document wijzigt; een puur CSS-hovereffect is niet zichtbaar in het document en wordt in de weergave niet nagebootst.
Smartphones & tablets
Touchscreens hebben geen zwevende muiscursor. MousePlayer past zich automatisch aan en legt tikgebaren, scrollen door te vegen en wijzigingen van de oriëntatie (staand of liggend) vast.
De uitdaging van formaatwijzigingen tijdens de sessie
Draait een bezoeker tijdens de sessie zijn tablet of past hij het formaat van zijn browservenster aan, dan verandert de lay-out van de website dynamisch. MousePlayer legt deze formaatwijzigingen van het venster vast en past het afspeelvlak naadloos en direct aan, zodat de context van de interactie behouden blijft.
3. Systeemgrenzen & technische beperkingen
Om de privacy van gebruikers te respecteren, de veiligheid van de browser te waarborgen en de gegevensverwerking snel te houden, werkt MousePlayer binnen duidelijk omschreven technische grenzen:
| Systeemgrens | Hoe MousePlayer ermee omgaat |
|---|---|
| iFrames | Iframes met dezelfde oorsprong als uw pagina worden samen met hun inhoud en de interactie daarin vastgelegd. Ingesloten inhoud van een andere oorsprong (bijv. YouTube-spelers, betaalformulieren van Stripe) kan vanwege het beveiligingsbeleid van browsers (Same-Origin Policy) niet van binnenuit worden opgenomen; deze verschijnt in de weergave als tijdelijke aanduiding en wordt daar niet geladen. |
| Gevoelige invoervelden (persoonsgegevens) | Wachtwoord- en betaalvelden worden op elk maskeringsniveau op het apparaat van de bezoeker gemaskeerd, en volledige maskering van alle formulierinvoer is voor elke property de standaardinstelling. U ziet dat er getypt werd, niet wat er getypt werd. Er gelden twee grenzen: de twee zwakkere maskeringsniveaus worden alleen na onze schriftelijke goedkeuring ingeschakeld, en de maskering reikt nooit tot wat uw eigen pagina in het document weergeeft – een bevestigingspagina met een adres maakt deel uit van de momentopname. Beide zijn vastgelegd in de verwerkersovereenkomst. |
| Canvas- & WebGL-elementen | De inhoud van een canvas wordt als afbeelding vastgelegd: eenmaal met de momentopname van de pagina en opnieuw telkens wanneer deze verandert, hoogstens ongeveer eens per seconde en met een groottegrens. Vloeiende animaties verschijnen daardoor als een reeks beelden. In gemaskeerde gebieden en voor canvas-elementen met afbeeldingen van een andere oorsprong wordt geen afbeelding verzonden; WebGL-inhoud kan leeg blijven. |
| Webcomponenten (Shadow DOM) | Open shadow roots worden samen met hun inhoud vastgelegd. Gesloten shadow roots zijn voor scripts ontoegankelijk; hun inhoud ontbreekt in de weergave. |
| Transport & browseropslag | Gegevens worden verzonden via een versleutelde WebSocket-verbinding (HTTPS/WSS). Kan die niet tot stand worden gebracht, bijvoorbeeld door een proxy, dan valt het script terug op een versleutelde HTTP-route; zeer grote momentopnamen van pagina’s worden apart via HTTPS geüpload. MousePlayer plaatst geen cookies; het gebruikt op uw site de local storage en session storage van de browser. |
| Inactieve AFK-perioden | Laat een bezoeker zijn tabblad openstaan en loopt hij 20 minuten weg, dan detecteert onze engine automatisch de inactiviteit en comprimeert die lege periode bij het afspelen, zodat u geen tijd verspilt aan het bekijken van stilstaande schermen. |