Så fungerar det: teknik, upplösningar och gränser

1. Varför vi inte spelar in video

En vanlig missuppfattning är att visuella analysverktyg spelar in vanliga videofiler (som MP4 eller WebM) av besökarens skärm. Det skulle kräva enorm bandbredd, göra webbplatsen betydligt långsammare och ge suddig, oläslig text.

I stället använder MousePlayer en resurssnål teknik som kallas telemetri med DOM-ögonblicksbilder. Så fungerar den i grunden:

Ögonblicksbild som ritning

När en besökare öppnar sidan tar vårt skript en textbaserad ”ritning” av HTML- och stilstrukturen. Det registrerar var elementen finns utan att kopiera sidans bild- eller videofiler. Spelaren hämtar bilder från deras ursprungliga adresser vid uppspelning. Undantaget är canvas-element, vars innehåll överförs som en bild (se nedan).

Koordinattelemetri

När användaren interagerar registrerar vi en ström av händelser: muspositioner, scrolldjup, klickmål och ändrad webbläsarstorlek samt ändringar av själva sidan. Beroende på inställningarna registreras även konsolmeddelanden, misslyckade eller långsamma anrop och laddningstider (Web Vitals). Rörelser och klick är små. Sidans ögonblicksbilder och ändringar kan vara betydligt större beroende på sidan och överförs komprimerade.

Uppspelning i teaterläge

När du ser en session i dashboarden återskapar spelaren sidan från den inspelade ritningen och flyttar en virtuell pekare över den i realtid, med knivskarp text.

Byggt för låg belastning: skriptet laddas asynkront och överför små numeriska datapunkter i stället för video, vilket håller dess egen belastning låg. Vad det innebär för dina Core Web Vitals beror på sidorna, driften och besökarens nätverk. Mät därför på din egen webbplats i stället för att utgå från en siffra från oss. Ingen viss laddningshastighet garanteras – se avsnitt 20 i användarvillkoren.

2. Skärmupplösningar & mobila enheter

Dagens användare surfar på allt från små mobiltelefoner till ultrabreda 4K-skärmar. Webbplatser flyttar, viker ihop och ordnar automatiskt om sina layouter för olika skärmbredder. Det kallas responsiv webbdesign.

Så matchar vi besökarens exakta visningsyta

För att uppspelningen inte ska förvrängas registrerar MousePlayer besökarens exakta visningsmått (t.ex. 390x844 för en mobiltelefon eller 1920x1080 för en datorskärm). När du öppnar teaterspelaren skapar motorn en skalad, isolerad miljö som exakt återger besökarens ursprungliga skärmproportioner.

Stationära & bärbara datorer

På vanliga datorer registrerar vi kontinuerliga musrörelser och navigering över flera flikar inom samma webbläsarsession. Menyer som öppnas när pekaren förs över dem syns i uppspelningen om detta ändrar sidans dokument. En ren CSS-hovereffekt syns inte i dokumentet och återges inte i uppspelningen.

Mobiltelefoner & surfplattor

Pekskärmar har ingen svävande muspekare. MousePlayer anpassar sig automatiskt genom att registrera tryckningar, svepscrollning och byte av orientering (stående eller liggande).

Ändrad storlek mitt i en session

Om besökaren vrider sin surfplatta eller ändrar webbläsarfönstrets storlek mitt i sessionen ändras sidans layout dynamiskt. MousePlayer fångar storleksändringarna och anpassar uppspelningsytan direkt så att interaktionens sammanhang bevaras.

3. Systemgränser & tekniska begränsningar

För att värna användarnas integritet, bevara webbläsarsäkerheten och hålla databehandlingen snabb arbetar MousePlayer inom bestämda tekniska gränser:

Systemgräns	Så hanterar MousePlayer den
iFrames	Iframes med samma ursprung som din sida spelas in tillsammans med innehållet och interaktionen inuti dem. Inbäddat innehåll från ett annat ursprung (t.ex. YouTube-spelare eller Stripe-betalningsformulär) kan inte spelas in internt på grund av webbläsarens säkerhetsregler (Same-Origin Policy). Det visas som en platshållare i uppspelningen och laddas inte där.
Känsliga inmatningsfält (personuppgifter)	Lösenords- och betalningsfält maskeras på besökarens enhet på alla maskeringsnivåer, och full maskering av all formulärinmatning är standard för varje webbplats. Du ser att någon skrev, inte vad som skrevs. Två gränser gäller: de två svagare maskeringsnivåerna aktiveras bara med vårt skriftliga godkännande, och maskeringen når aldrig det som din egen sida skriver ut i dokumentet – en bekräftelsesida som visar en adress ingår i ögonblicksbilden. Båda beskrivs i personuppgiftsbiträdesavtalet.
Canvas- & WebGL-element	Innehållet i en canvas spelas in som en bild: en gång med sidans ögonblicksbild och igen när det ändras, högst ungefär en gång per sekund och med en storleksgräns. Mjuka animationer visas därför som en följd av bildrutor. Ingen bild överförs från maskerade områden eller canvas-element som innehåller bilder från ett annat ursprung. WebGL-innehåll kan förbli tomt.
Webbkomponenter (Shadow DOM)	Öppna shadow roots spelas in med sitt innehåll. Stängda shadow roots är inte åtkomliga för skript. Deras innehåll saknas i uppspelningen.
Överföring & webbläsarlagring	Data skickas via en krypterad WebSocket-anslutning (HTTPS/WSS). Om anslutningen inte kan upprättas, till exempel på grund av en proxy, använder skriptet en krypterad HTTP-väg i stället. Mycket stora ögonblicksbilder laddas upp separat via HTTPS. MousePlayer sätter inga cookies. Det använder webbläsarens lokala lagring och sessionslagring på din webbplats.
Inaktiva AFK-perioder	Om en besökare lämnar fliken öppen och går därifrån i 20 minuter upptäcker motorn automatiskt inaktiviteten och kortar pausen vid uppspelning. Du slipper lägga tid på att se statiska skärmar.

Hur kan vi hjälpa dig?