Cómo funciona MousePlayer
Una guía sencilla sobre nuestra arquitectura de seguimiento, el tratamiento de las resoluciones de pantalla en los distintos dispositivos y los límites del sistema.
1. Por qué no grabamos vídeo
Un error frecuente es pensar que las herramientas de analítica visual graban archivos de vídeo convencionales (como MP4 o WebM) de la pantalla del visitante. Eso consumiría un ancho de banda enorme, ralentizaría drásticamente su sitio web y produciría un texto borroso e ilegible.
En su lugar, MousePlayer utiliza una tecnología ligera conocida como telemetría de capturas del DOM. Así funciona en lo básico:
La captura del plano
Cuando un visitante abre su página, nuestro script toma un «plano» en formato de texto de la estructura de su HTML y de sus estilos. Registra dónde están los elementos sin copiar los archivos de imagen o de vídeo de su página; durante la reproducción, el reproductor carga las imágenes desde su dirección original. La excepción son los elementos canvas, cuyo contenido se transmite como imagen (véase más abajo).
Telemetría de coordenadas
Mientras el usuario interactúa, registramos un flujo de eventos: posiciones del ratón, profundidad de scroll, elementos en los que se hace clic y cambios de tamaño del navegador, además de los cambios en la propia página y, según la configuración, mensajes de la consola, solicitudes fallidas o lentas y mediciones del tiempo de carga (Web Vitals). Los movimientos y los clics ocupan poco; las capturas y los cambios de la página pueden ser bastante más grandes según la página y se transmiten comprimidos.
La reproducción en modo cine
Cuando ve una sesión en su panel, nuestro reproductor vuelve a construir la página a partir del plano grabado y mueve sobre ella un cursor virtual en tiempo real, de modo que el texto se mantiene perfectamente nítido.
Pensado para ser ligero: el script se carga de forma asíncrona y transmite pequeños datos numéricos en lugar de vídeo, lo que mantiene reducido su propio impacto. Lo que eso supone para sus Core Web Vitals depende de sus páginas, de su alojamiento y de la red de sus visitantes, así que mídalo en su propio sitio en lugar de fiarse de una cifra nuestra. No se garantiza ninguna velocidad de carga concreta – véase la cláusula 20 de los Términos del servicio.
2. Resoluciones de pantalla & dispositivos móviles
Hoy los usuarios navegan con todo tipo de dispositivos, desde smartphones compactos hasta monitores de escritorio 4K ultrapanorámicos. Los sitios web desplazan, pliegan y reorganizan automáticamente su diseño para adaptarse a cada anchura de pantalla, un concepto conocido como diseño web adaptable (Responsive Web Design).
Cómo reproducimos el área visible exacta del visitante
Para que una reproducción no se vea distorsionada, MousePlayer registra las dimensiones exactas del área visible del visitante (p. ej., 390x844 en un smartphone o 1920x1080 en un monitor de escritorio). Cuando abre el reproductor en modo cine, nuestro motor crea un entorno aislado a escala que refleja con precisión la proporción de pantalla original del visitante.
Pantallas de escritorio & portátiles
En los ordenadores convencionales capturamos el movimiento continuo del ratón y la navegación entre varias pestañas dentro de la misma sesión del navegador. Los menús que se abren al pasar el ratón aparecen en la reproducción cuando la página modifica su documento al hacerlo; un efecto hover puramente CSS no es visible en el documento y no se reproduce.
Smartphones & tabletas
Las pantallas táctiles no tienen un cursor que se desplace sobre la página. MousePlayer se adapta automáticamente y registra los toques, el desplazamiento con deslizamientos y los cambios de orientación (vertical u horizontal).
El reto de los cambios de tamaño durante la sesión
Si un visitante gira su tableta o cambia el tamaño de la ventana del navegador en mitad de la sesión, el diseño del sitio web cambia de forma dinámica. MousePlayer captura estos cambios de tamaño de la ventana y ajusta sobre la marcha y sin saltos el lienzo de reproducción, de modo que se conserva el contexto de la interacción.
3. Límites del sistema & restricciones técnicas
Para respetar la privacidad de los usuarios, mantener la seguridad del navegador y procesar los datos con rapidez, MousePlayer funciona dentro de unos límites técnicos definidos:
| Límite del sistema | Cómo lo gestiona MousePlayer |
|---|---|
| iFrames | Los iframes del mismo origen que su página se graban junto con su contenido y la interacción dentro de ellos. El contenido incrustado de otro origen (p. ej., reproductores de YouTube o formularios de pago de Stripe) no puede grabarse por dentro debido a las políticas de seguridad del navegador (Same-Origin Policy); en la reproducción aparece como un marcador de posición y no se carga. |
| Campos de entrada sensibles (datos personales) | Los campos de contraseña y de pago se enmascaran en el dispositivo del visitante en todos los niveles de enmascaramiento, y el enmascaramiento completo de todo lo que se introduce en los formularios es la opción predeterminada en cada propiedad. Usted ve que se escribió algo, no qué se escribió. Hay dos límites: los dos niveles de enmascaramiento más débiles solo se activan con nuestra aprobación por escrito, y el enmascaramiento nunca alcanza lo que su propia página escribe en el documento – una página de confirmación que muestra una dirección forma parte de la captura. Ambos se recogen en el acuerdo de tratamiento de datos. |
| Elementos canvas & WebGL | El contenido de un canvas se graba como imagen: una vez con la captura de la página y de nuevo cada vez que cambia, como máximo aproximadamente una vez por segundo y con un límite de tamaño. Por eso, las animaciones fluidas aparecen como una secuencia de fotogramas. No se transmite ninguna imagen en las zonas enmascaradas ni de los canvas que contienen imágenes de otro origen; el contenido WebGL puede quedar vacío. |
| Componentes web (Shadow DOM) | Las shadow roots abiertas se graban junto con su contenido. Las shadow roots cerradas no son accesibles para los scripts; su contenido falta en la reproducción. |
| Transporte & almacenamiento del navegador | Los datos se envían a través de una conexión WebSocket cifrada (HTTPS/WSS). Si no se puede establecer, por ejemplo por un proxy, el script recurre a una vía HTTP cifrada; las capturas de página muy grandes se suben aparte por HTTPS. MousePlayer no instala cookies; utiliza el almacenamiento local y el almacenamiento de sesión del navegador en su sitio. |
| Periodos de inactividad (AFK) | Si un visitante deja la pestaña abierta y se ausenta durante 20 minutos, nuestro motor detecta automáticamente la inactividad y comprime ese intervalo durante la reproducción para que usted no pierda tiempo mirando pantallas estáticas. |