Session Replay para móviles

Documentos > RUM y Session Replay > Session Replay > Session Replay para móviles

Información general

Session Replay para móviles amplía la visibilidad de sus aplicaciones móviles reproduciendo visualmente cada interacción del usuario, como toques, deslizamientos y desplazamientos. Está disponible para aplicaciones nativas, tanto en Android como en iOS. La reproducción visual de las interacciones del usuario en tus aplicaciones facilita la reproducción de fallos y errores, así como la comprensión del recorrido del usuario para introducir mejoras en la interfaz de usuario.

Cómo funciona el grabador de Session Replay

La grabadora de Session Replay está integrada en el SDK de aplicación móvil de RUM. A diferencia de los navegadores web, las aplicaciones móviles no utilizan HTML ni CSS. En su lugar, el grabador toma una “instantánea” de la pantalla de tu aplicación dividiéndola en simples rectángulos llamados “wireframes”. A continuación, realiza un seguimiento de los cambios actualizando únicamente los wireframes que han cambiado, lo que hace que el proceso sea eficiente y rápido.

Concepto de wireframe

Un wireframe es como una nota adhesiva digital que marca un área específica de la pantalla de tu aplicación, como un botón, una imagen o un fondo. Cada wireframe es un rectángulo que ayuda al grabador a seguir lo que hay en la pantalla.

Ejemplos de wireframes:

Una etiqueta de texto se convierte en un wireframe de “texto”, definido por su posición y tamaño.
El fondo de la aplicación es un wireframe de “forma”: un rectángulo que cubre toda la pantalla.
Cualquier contenedor con un fondo sólido es también un wireframe de “forma”.
Las imágenes o iconos son wireframes de “imagen”, que pueden incluir detalles de estilo como la transparencia.
Incluso los elementos complejos, como un mapa con muchas partes, pueden combinarse en un único wireframe de “imagen”.

Algoritmo de grabación

El grabador escanea la pantalla de tu aplicación desde el fondo hasta el frente, buscando todas las partes visibles. Crea un wireframe para cada una de ellas. Por ejemplo, una pantalla con 78 elementos diferentes puede simplificarse en solo 25 wireframes:

Un ejemplo de cómo la pantalla de aplicación de Shopist contiene 78 vistas nativas, pero está compuesta de 25 wireframes.

Los wireframes se graban en el orden en que aparecen en la pantalla (de atrás hacia delante) y se colocan utilizando las posiciones exactas de la pantalla. No hay una complicada estructura de árbol, sino una simple lista plana de rectángulos.

Algoritmo de renderizado

Cuando ves una repetición, el reproductor de Datadog reconstruye la pantalla dibujando cada wireframe en orden. Utiliza la posición y el tamaño de cada rectángulo para colocar todo en el lugar correcto. El primer wireframe establece el tamaño y la orientación de la pantalla (vertical u horizontal).

Cada nuevo wireframe se dibuja encima de los anteriores, como si se apilaran hojas transparentes. Esto permite al reproductor mostrar correctamente elementos superpuestos o semitransparentes.

Por ejemplo, la captura de pantalla mostrada arriba se reconstruye en 25 pasadas:

Iteración	1	2	3
Ventana

El primer wireframe dicta el tamaño de la ventana gráfica, lo que permite al reproductor de Session Replay representar correctamente el tamaño y la orientación de la pantalla del dispositivo (horizontal/vertical).

Iteración	4	5-11	12-13
Ventana

Dado que los wireframes se ordenan de atrás hacia delante, el reproductor redibuja las partes existentes del marco, lo cual es deseable porque admite varios patrones de interfaz de usuario (como elementos semitransparentes).

Iteración	14-25	Resultado final
Ventana

Instantáneas completas e incrementales

Una “instantánea completa” es como hacer una foto de toda la pantalla, con todos sus wireframes. Pero para ahorrar tiempo y datos, el grabador suele enviar “instantáneas incrementales”, que son actualizaciones que incluyen solo los wireframes que han cambiado.

Cada wireframe tiene un ID único (como una etiqueta con el nombre), de modo que el grabador sabe exactamente cuáles debe actualizar. Por ejemplo:

Si una imagen se mueve, sólo se envían su nueva posición e ID.
Si desaparece un wireframe, la actualización indica qué ID se ha eliminado.
Si sólo cambia el contenido (como un nuevo texto), la actualización incluye el nuevo contenido y el ID del wireframe.

A continuación, se muestran ejemplos de cómo las instantáneas incrementales sólo envían actualizaciones para los wireframes afectados.

Ejemplo	Descripción
	Si la posición de un wireframe cambia, pero su contenido y apariencia no se alteran, la instantánea incremental sólo necesita incluir las nuevas posiciones de los wireframes afectados y su `UUIDs`. Esto podría corresponder a un escenario de “desplazamiento lento” o a cualquier otro escenario en el que sólo se mueva una parte de la pantalla.
	Si un wireframe desaparece de la pantalla, una instantánea incremental podría incluir sólo información sobre el `UUIDs` eliminado. Alternativamente, la instantánea podría incluir siempre información sobre lo que queda `UUIDs`.
	Si sólo cambia el contenido de un wireframe, una actualización incremental incluye únicamente el nuevo contenido y la dirección `UUID` del wireframe modificado.

En resumen, el grabador de Session Replay divide la pantalla de tu aplicación en simples rectángulos llamados wireframes. Solo rastrea y envía actualizaciones para las partes que cambian, lo que hace que las repeticiones sean eficientes y precisas.