Com funciona MousePlayer
Una guia senzilla de l’arquitectura de seguiment, el tractament de les resolucions de pantalla entre dispositius i els límits del sistema.
1. Per què no utilitzem gravació de vídeo
Un malentès habitual és pensar que les eines d’anàlisi visual graven fitxers de vídeo estàndard (com MP4 o WebM) de la pantalla del visitant. Això consumiria molt ample de banda, alentiria dràsticament el lloc web i generaria text borrós i il·legible.
En lloc d’això, MousePlayer utilitza una tecnologia lleugera coneguda com a telemetria de captures del DOM. Així funciona a nivell bàsic:
La captura del plànol
Quan un visitant obre la pàgina, el nostre script pren un «plànol» en text de l’estructura HTML i dels estils. Registra on són els elements sense copiar els fitxers d’imatge o vídeo de la pàgina; durant la reproducció, el reproductor carrega les imatges des de l’adreça original. L’excepció són els elements canvas, el contingut dels quals es transmet com a imatge (vegi més avall).
Telemetria de coordenades
Mentre l’usuari interactua, registrem un flux d’esdeveniments: posicions del ratolí, profunditat de desplaçament, destinacions dels clics i canvis de mida del navegador, a més dels canvis de la mateixa pàgina i, segons la configuració, missatges de consola, sol·licituds fallides o lentes i mesures de temps de càrrega (Web Vitals). Els moviments i clics ocupen poc; les captures i els canvis de pàgina poden ser força més grans segons la pàgina i es transmeten comprimits.
La reproducció en mode cinema
Quan veu una sessió al tauler, el reproductor reconstrueix la pàgina a partir del plànol gravat i hi mou un punter virtual en temps real, mantenint el text perfectament nítid.
Pensat per ser lleuger: l’script es carrega de manera asíncrona i transmet petites dades numèriques en lloc de vídeo, cosa que en redueix l’impacte. El que això suposa per a les seves Core Web Vitals depèn de les pàgines, l’allotjament i la xarxa dels visitants; mesuri-ho al seu lloc en lloc de refiar-se d’una xifra nostra. No es garanteix cap velocitat de càrrega concreta – vegi la clàusula 20 de les Condicions del servei.
2. Resolucions de pantalla & dispositius mòbils
Avui els usuaris naveguen amb tota mena de dispositius, des de telèfons intel·ligents compactes fins a monitors d’escriptori 4K ultrapanoràmics. Els llocs web desplacen, pleguen i reorganitzen automàticament el disseny per adaptar-lo a diferents amplades de pantalla, un concepte conegut com a disseny web adaptatiu.
Com reproduïm l’àrea visible exacta del visitant
Perquè una reproducció no es vegi distorsionada, MousePlayer registra les dimensions exactes de l’àrea visible del visitant (p. ex., 390x844 en un telèfon intel·ligent o 1920x1080 en un monitor d’escriptori). Quan obre el reproductor en mode cinema, el motor crea un entorn aïllat a escala que reprodueix amb precisió la proporció de pantalla original del visitant.
Pantalles d’escriptori & portàtils
Als ordinadors convencionals capturem el moviment continu del ratolí i la navegació entre diverses pestanyes dins de la mateixa sessió del navegador. Els menús que s’obren en passar-hi el ratolí apareixen a la reproducció quan la pàgina modifica el document en fer-ho; un efecte hover purament CSS no és visible al document i no es reprodueix.
Telèfons intel·ligents & tauletes
Les pantalles tàctils no tenen un punter de ratolí que es desplaci per sobre de la pàgina. MousePlayer s’adapta automàticament i registra tocs, desplaçaments amb lliscament i canvis d’orientació (vertical o horitzontal).
El repte dels canvis de mida durant la sessió
Si un visitant gira la tauleta o canvia la mida de la finestra del navegador d’escriptori a mitja sessió, el disseny del lloc web canvia dinàmicament. MousePlayer captura aquests canvis de mida i ajusta el llenç de reproducció sobre la marxa, sense salts, per preservar el context de la interacció.
3. Límits del sistema & restriccions tècniques
Per respectar la privacitat dels usuaris, mantenir la seguretat del navegador i processar les dades ràpidament, MousePlayer funciona dins d’uns límits tècnics definits:
| Límit del sistema | Com ho gestiona MousePlayer |
|---|---|
| iFrames | Els iframes del mateix origen que la pàgina es graven amb el contingut i la interacció de dins. El contingut incrustat d’un altre origen (p. ex., reproductors de YouTube o formularis de pagament de Stripe) no es pot gravar internament per les polítiques de seguretat del navegador (Same-Origin Policy); apareix com un marcador a la reproducció i no s’hi carrega. |
| Camps d’entrada sensibles (dades personals) | Els camps de contrasenya i de pagament s’emmascaren al dispositiu del visitant en tots els nivells d’emmascarament, i l’emmascarament complet de totes les entrades de formulari és el predeterminat a cada propietat. Vostè veu que s’ha escrit, no què s’ha escrit. Hi ha dos límits: els dos nivells d’emmascarament més febles només s’activen amb la nostra aprovació per escrit, i l’emmascarament mai no abasta el que la seva pròpia pàgina escriu al document – una pàgina de confirmació que mostra una adreça forma part de la captura. Tots dos s’expliquen al DPA. |
| Elements canvas & WebGL | El contingut d’un canvas es grava com a imatge: una vegada amb la captura de pàgina i de nou quan canvia, aproximadament un cop per segon com a màxim i amb un límit de mida. Per això les animacions fluides apareixen com una seqüència de fotogrames. No es transmet cap imatge a les zones emmascarades ni dels canvas amb imatges d’un altre origen; el contingut WebGL pot quedar buit. |
| Components web (Shadow DOM) | Les shadow roots obertes es graven amb el contingut. Les shadow roots tancades no són accessibles als scripts; el seu contingut falta a la reproducció. |
| Transport & emmagatzematge del navegador | Les dades s’envien per una connexió WebSocket xifrada (HTTPS/WSS). Si no es pot establir, per exemple per un servidor intermediari, l’script recorre a una via HTTP xifrada; les captures de pàgina molt grans es pugen per separat per HTTPS. MousePlayer no instal·la galetes; utilitza l’emmagatzematge local i de sessió del navegador al seu lloc web. |
| Períodes d’inactivitat (AFK) | Si un visitant deixa la pestanya oberta i marxa durant 20 minuts, el motor detecta automàticament la inactivitat i comprimeix aquell interval durant la reproducció perquè no perdi temps mirant pantalles estàtiques. |