Come funziona: tecnologia, risoluzioni & limiti

1. Perché non usiamo la registrazione video

Si pensa spesso, a torto, che gli strumenti di analisi visiva registrino normali file video (come MP4 o WebM) dello schermo del visitatore. Questo consumerebbe un’enorme quantità di banda, rallenterebbe drasticamente il suo sito web e produrrebbe un testo sfocato e illeggibile.

MousePlayer usa invece una tecnologia leggera chiamata DOM Snapshot Telemetry. Ecco come funziona alla base:

L’istantanea della struttura

Quando un visitatore apre la sua pagina, il nostro script acquisisce una «pianta» testuale della struttura HTML e degli stili. Registra dove si trovano gli elementi senza copiare i file di immagine o video della pagina; durante la riproduzione il lettore carica le immagini dal loro indirizzo originale. Fanno eccezione gli elementi canvas, il cui contenuto viene trasmesso come immagine (vedi sotto).

Telemetria delle coordinate

Mentre l’utente interagisce, registriamo un flusso di eventi: posizioni del mouse, profondità di scorrimento, elementi cliccati e ridimensionamenti del browser, oltre alle modifiche della pagina stessa e, a seconda delle impostazioni, messaggi della console, richieste non riuscite o lente e misure dei tempi di caricamento (Web Vitals). Movimenti e clic sono piccoli; le istantanee e le modifiche della pagina possono essere molto più grandi a seconda della pagina e vengono trasmesse compresse.

La riproduzione in modalità cinema

Quando guarda una sessione nella sua dashboard, il nostro lettore ricostruisce la pagina a partire dalla pianta registrata e vi muove sopra un cursore virtuale in tempo reale, mantenendo il testo perfettamente nitido.

Pensato per restare leggero: lo script si carica in modo asincrono e trasmette piccoli dati numerici anziché video, il che ne mantiene ridotto l’impatto. Che cosa significhi per i suoi Core Web Vitals dipende dalle sue pagine, dal suo hosting e dalla rete del visitatore: lo misuri quindi sul suo sito invece di affidarsi a una nostra cifra. Non è garantita alcuna velocità di caricamento particolare – si veda la sezione 20 dei Termini di servizio.

2. Risoluzioni dello schermo & dispositivi mobili

Oggi gli utenti navigano su qualsiasi cosa, dagli smartphone compatti ai monitor desktop 4K ultra-wide. I siti web spostano, ripiegano e riorganizzano automaticamente il proprio layout per adattarsi alle diverse larghezze dello schermo: un principio noto come Responsive Web Design.

Come riproduciamo esattamente l’area visibile del visitatore

Perché una riproduzione non appaia distorta, MousePlayer registra le dimensioni esatte dell’area visibile del visitatore (ad es. 390x844 per uno smartphone o 1920x1080 per un monitor desktop). Quando apre il lettore in modalità cinema, il nostro motore crea una sandbox in scala che rispecchia perfettamente le proporzioni originali dello schermo del visitatore.

Schermi desktop & laptop

Sui normali computer registriamo il movimento continuo del mouse e la navigazione su più schede all’interno della stessa sessione del browser. I menu che si aprono al passaggio del mouse compaiono nella riproduzione quando la pagina modifica il proprio documento per aprirli; un effetto hover puramente CSS non è visibile nel documento e non viene riprodotto.

Smartphone & tablet

Gli schermi touch non hanno un cursore del mouse. MousePlayer si adatta automaticamente registrando i tocchi, lo scorrimento con lo swipe e i cambi di orientamento (verticale od orizzontale).

Il ridimensionamento durante la sessione

Se un visitatore ruota il tablet o ridimensiona la finestra del browser durante la sessione, il layout del sito cambia dinamicamente. MousePlayer registra questi ridimensionamenti e adatta al volo, senza interruzioni, l’area di riproduzione, così che il contesto dell’interazione resti intatto.

3. Limiti del sistema & vincoli tecnici

Per rispettare la privacy degli utenti, preservare la sicurezza del browser e mantenere rapida l’elaborazione dei dati, MousePlayer opera entro limiti tecnici definiti:

Limite del sistema	Come lo gestisce MousePlayer
iFrames	Gli iframe con la stessa origine della sua pagina vengono registrati insieme al loro contenuto e all’interazione al loro interno. I contenuti incorporati da un’altra origine (ad es. lettori YouTube, moduli di pagamento Stripe) non possono essere registrati al loro interno a causa delle regole di sicurezza del browser (Same-Origin Policy); nella riproduzione compaiono come segnaposto e non vengono caricati.
Campi di inserimento sensibili (PII)	I campi password e di pagamento vengono mascherati sul dispositivo del visitatore a ogni livello di mascheramento, e il mascheramento completo di tutti gli inserimenti nei moduli è l’impostazione predefinita per ogni proprietà. Vede che è stato digitato qualcosa, non che cosa. Valgono due limiti: i due livelli di mascheramento più deboli vengono abilitati solo previa nostra approvazione scritta, e il mascheramento non raggiunge mai ciò che la sua pagina stessa scrive nel documento – una pagina di conferma che mostra un indirizzo fa parte dell’istantanea. Entrambi sono descritti nell’accordo sul trattamento dei dati (DPA).
Elementi canvas & WebGL	Il contenuto di un canvas viene registrato come immagine: una volta con l’istantanea della pagina e di nuovo a ogni modifica, al massimo circa una volta al secondo e con un limite di dimensione. Le animazioni fluide appaiono quindi come una sequenza di fotogrammi. Nessuna immagine viene trasmessa nelle aree mascherate o per elementi canvas che contengono immagini di un’altra origine; il contenuto WebGL può restare vuoto.
Web Components (Shadow DOM)	Gli shadow root aperti vengono registrati insieme al loro contenuto. Gli shadow root chiusi non sono accessibili agli script; il loro contenuto manca nella riproduzione.
Trasmissione & memoria del browser	I dati vengono inviati tramite una connessione WebSocket cifrata (HTTPS/WSS). Se non è possibile stabilirla, ad esempio a causa di un proxy, lo script ripiega su un canale HTTP cifrato; le istantanee di pagina molto grandi vengono caricate separatamente tramite HTTPS. MousePlayer non imposta cookie; sul suo sito utilizza il local storage e il session storage del browser.
Periodi di inattività (AFK)	Se un visitatore lascia la scheda aperta e si allontana per 20 minuti, il nostro motore rileva automaticamente l’inattività e comprime la pausa durante la riproduzione, così non perde tempo a guardare schermate statiche.

Come possiamo aiutarla?