Slik virker MousePlayer
En enkel veiledning til sporingsarkitekturen, håndtering av skjermoppløsninger på tvers av enheter og systemets grenser.
1. Hvorfor vi ikke bruker videoopptak
En vanlig misforståelse er at visuelle analyseverktøy tar opp vanlige videofiler (som MP4 eller WebM) av den besøkendes skjerm. Det ville krevd enorm båndbredde, gjort nettstedet markant tregere og gitt utydelig, uleselig tekst.
I stedet bruker MousePlayer en lett teknologi kalt telemetri med DOM-øyeblikkskopier. Slik virker den i praksis:
Øyeblikkskopien som plantegning
Når en besøkende åpner siden, tar skriptet vårt en tekstbasert «plantegning» av HTML- og stilstrukturen. Det registrerer plasseringen til elementene uten å kopiere sidens bilde- eller videofiler; avspilleren laster bilder fra den opprinnelige adressen under avspillingen. Unntaket er canvas-elementer, som overføres som bilder (se nedenfor).
Koordinattelemetri
Mens brukeren samhandler, tar vi opp en strøm av hendelser: museposisjoner, rulledybde, klikkmål og endret nettleserstørrelse, i tillegg til endringer i selve siden og, avhengig av innstillingene, konsollmeldinger, mislykkede eller langsomme forespørsler og innlastingsmålinger (Web Vitals). Bevegelser og klikk er små; øyeblikkskopier og sideendringer kan være betydelig større avhengig av siden og overføres komprimert.
Avspilling i teatermodus
Når du ser en økt i dashbordet, gjenskaper avspilleren siden fra den opptatte plantegningen og flytter en virtuell peker over den i sanntid, mens teksten forblir knivskarp.
Laget for å være lett: skriptet lastes asynkront og overfører små numeriske datapunkter i stedet for video, slik at eget ressursforbruk forblir lavt. Betydningen for Core Web Vitals avhenger av sidene, webhotellet og nettverket til besøkende, så mål på eget nettsted fremfor å bruke et tall fra oss. Ingen bestemt innlastingshastighet garanteres – se punkt 20 i tjenestevilkårene.
2. Håndtering av skjermoppløsninger & mobilenheter
Dagens brukere bruker alt fra små smarttelefoner til ultrabrede 4K-skjermer. Nettsteder flytter, folder og omorganiserer oppsettet automatisk etter skjermbredden – et prinsipp kalt responsivt nettdesign.
Slik matcher vi den besøkendes nøyaktige visningsområde
For å unngå forvrengt avspilling registrerer MousePlayer nøyaktige mål for visningsområdet (f.eks. 390x844 på en smarttelefon eller 1920x1080 på en dataskjerm). Når du åpner teateravspilleren, oppretter motoren en skalert sandkasse som nøyaktig gjengir det opprinnelige skjermforholdet.
Stasjonære & bærbare datamaskiner
På vanlige datamaskiner tar vi opp kontinuerlig musebevegelse og navigasjon mellom faner i samme nettleserøkt. Menyer som åpnes når pekeren holdes over dem, vises i avspillingen hvis siden samtidig endrer dokumentet; en ren CSS-effekt ved pekerføring er ikke synlig i dokumentet og gjengis ikke i avspillingen.
Smarttelefoner & nettbrett
Berøringsskjermer har ingen svevende musepeker. MousePlayer tilpasser seg automatisk ved å ta opp trykk, sveiperulling og retningsendringer (stående og liggende).
Utfordringen med størrelsesendringer under en økt
Hvis en besøkende roterer nettbrettet eller endrer nettleservinduet midt i økten, endres nettstedets oppsett dynamisk. MousePlayer tar opp disse størrelsesendringene og tilpasser avspillingsflaten fortløpende, slik at interaksjonens sammenheng bevares.
3. Systemgrenser & tekniske begrensninger
For å respektere personvern, opprettholde nettlesersikkerhet og behandle data raskt opererer MousePlayer innenfor bestemte tekniske grenser:
| Systemgrense | Slik håndterer MousePlayer det |
|---|---|
| iFrames | iframes med samme opprinnelse som siden tas opp sammen med innholdet og interaksjonen i dem. Innebygd innhold fra en annen opprinnelse (f.eks. YouTube-avspillere og Stripe-betalingsskjemaer) kan ikke tas opp internt på grunn av nettleserens sikkerhetsregler (Same-Origin Policy); det vises som plassholder i avspillingen og lastes ikke der. |
| Sensitive inndatafelt (personopplysninger) | Passord- og betalingsfelt maskeres på den besøkendes enhet på alle maskeringsnivåer, og full maskering av alle skjemainndata er standard for hvert nettsted. Du ser at noen skrev, ikke hva de skrev. To begrensninger gjelder: de to svakere nivåene aktiveres bare etter skriftlig godkjenning fra oss, og maskering omfatter aldri det din egen side skriver i dokumentet – en bekreftelsesside med en adresse er del av øyeblikkskopien. Begge deler er beskrevet i databehandleravtalen. |
| Canvas- & WebGL-elementer | Innholdet i et canvas tas opp som et bilde: én gang med øyeblikkskopien av siden og igjen ved endringer, høyst omtrent én gang per sekund og med størrelsesgrense. Jevne animasjoner vises derfor som en bildesekvens. Ingen bilder overføres i maskerte områder eller fra canvas-elementer med bilder fra en annen opprinnelse; WebGL-innhold kan forbli tomt. |
| Web Components (Shadow DOM) | Åpne shadow roots tas opp med innholdet. Lukkede shadow roots er utilgjengelige for skript; innholdet mangler i avspillingen. |
| Transport & nettleserlagring | Data sendes over en kryptert WebSocket-forbindelse (HTTPS/WSS). Hvis den ikke kan opprettes, for eksempel på grunn av en proxy, bruker skriptet en kryptert HTTP-rute i stedet; svært store øyeblikkskopier lastes opp separat via HTTPS. MousePlayer setter ingen informasjonskapsler; det bruker nettleserens lokale lagring og øktlagring på nettstedet. |
| Inaktive AFK-perioder | Hvis en besøkende lar fanen stå åpen og går bort i 20 minutter, registrerer motoren inaktivitet automatisk og forkorter pausen under avspillingen, så du ikke kaster bort tid på stillestående skjermbilder. |