Un heatmap (o mapa de calor) es una visualización de las interacciones de tus usuarios superpuesta a los datos de Session Replay. Existen tres tipos diferentes de mapas de calor:
- Mapas de clics: Consulta las interacciones de los usuarios (clics) para comprender cómo interactúan con tu página.
- Elementos principales: permite ver una clasificación de los 10 elementos con los que más se interactuó en una página determinada.
- Mapas de desplazamiento: Observa hasta dónde se desplazan los usuarios por una página, incluyendo dónde se encuentra el pliegue medio de una página. El pliegue medio es el punto más bajo de una página que un usuario puede ver en su dispositivo sin desplazarse.
Utiliza mapas de calor para revisar datos complejos de un vistazo y obtener información para optimizar la experiencia del usuario.
Requisitos previos
Para empezar con los mapas de calor:
- Verifica la versión de tu SDK:
- Para los mapas de clics, debes tener la última versión del SDK (v4.40.0 o posterior).
- Para los mapas de desplazamiento, debes tener (v4.50.0 o posterior).
- Activa Session Replay.
- Configura
trackUserInteractions: true en la inicialización del SDK para habilitar el seguimiento de acciones (necesario para los mapas de clics).
Empezando
Ve a [Digital Experience > Real User Monitoring > Session Replay > Heatmaps[1 (Experiencia digital > Real User Monitoring > Session Replay > Mapas de calor). Selecciona tu aplicación y visualízalos.
En la página de inicio de Real User Monitoring, selecciona tu aplicación en el selector de aplicaciones y visualízala. A la izquierda del selector de marco temporal, puedes seleccionar el tipo de mapa de calor que deseas ver: Elementos principales, Mapa de clics o Mapa de desplazamiento.
Ve a Digital Experience > Product Analytics > Heatmaps (Experiencia digital > Product Analytics > Mapas de calor). Selecciona tu aplicación y visualízala.
Desde esta página, puedes seleccionar el tipo de mapa de calor (Elementos principales, Mapa de clics, Mapa de desplazamiento) que deseas ver para una vista concreta.
Haz clic en el nombre de una vista para ver con más detalle el mapa de calor correspondiente.
Dispones de las siguientes opciones de visualización adicionales:
- Para cambiar la vista que se muestra, utiliza los selectores Nombre de la vista y Aplicación de la parte superior.
- Para cambiar la vista del dispositivo, utiliza el selector Tipo de dispositivo.
- Para filtrar por el nombre de acción, utiliza el desplegable Filtrar acciones por.
- Para añadir filtros más granulares, como una geografía específica, por ejemplo, haz clic en el botón Add Filter (Añadir filtro).
Elementos principales
Los mapas de calor de Elementos principales agregan las acciones de clic en una vista determinada, mostrando los elementos con los que más se interactúa, además de su clasificación de interacción. La clasificación en el propio mapa corresponde al nombre de acción al lado.
Pasa el ratón por encima de cualquier nombre de acción del panel para resaltar la acción correspondiente en el mapa.
Mapas de clics
Un mapa de clics te muestra las acciones con las que más se interactuó en una vista determinada, agregando acciones de clic de las sesiones y visualizándolas como manchas en el mapa.
A la izquierda hay una lista de todas las acciones que ocurrieron en la página, enumeradas por frecuencia. Al hacer clic en una acción, puedes obtener más información sobre esa interacción, por ejemplo:
- El número de veces que el usuario realizó la acción y su posición en el análisis general de las principales acciones de una página determinada.
- Si en esa acción se produjo una señal de frustración (por ejemplo, si un usuario hizo un clic de ira en ese botón), también puedes ver las señales de frustración asociadas.
En esta vista, también puedes hacer clic en el botón Start a Funnel (Iniciar embudo) para identificar el abandono de los usuarios.
Mapas de desplazamiento
Los mapas de desplazamiento muestran la actividad de desplazamiento agregada en una página determinada. Utiliza los mapas de desplazamiento para ver dónde se encuentra el pliegue medio de la página y cuántos usuarios se desplazan hasta una profundidad determinada. Puedes arrastrar la barra azul flotante de un mapa de desplazamiento hasta la profundidad que quieras evaluar.
El panel situado a la izquierda del mapa de desplazamiento proporciona información muy clara con enlaces directos a los resultados de la consulta, como un enlace a una lista de las visualizaciones en las que el usuario se desplazó más allá de un percentil determinado. Debajo del panel de información hay un minimapa de la página y un gráfico de distribución que muestra datos de desplazamiento detallados, útiles para identificar dónde se producen los mayores abandonos de la página.
Capturas de pantalla
Una captura de pantalla es el estado de una vista en un momento determinado. Al cambiar la captura de pantalla se muestran resultados diferentes, según la captura de pantalla seleccionada. También puedes guardar capturas de pantalla para que todos los miembros de tu organización puedan analizar el mismo estado de la vista.
Cambiar las capturas de pantalla
En la vista de mapa de calor, haz clic en el botón Change Screenshot (Cambiar captura de pantalla). Elige una de las capturas de pantalla guardadas previamente por tus compañeros de equipo o haz una captura de pantalla desde Session Replay.
Para seleccionar una captura de pantalla desde Session Replay:
Haz clic en Grab from replay (Capturar desde una repetición) si la captura de pantalla del mapa de calor deseado no se ha guardado previamente.
Haz clic en un evento de acción a la derecha para seleccionar un snapshot diferente para tu mapa de calor.
Si la sesión no contiene la acción que lleva a la captura de pantalla deseada, puedes volver a la lista de repeticiones haciendo clic en Choose Another Replay (Elegir otra repetición).
Haz clic en el botón Take Screenshot (Hacer captura de pantalla) para hacer la captura de pantalla en el punto pausado del mapa de calor.
Guardar capturas de pantalla
Puedes guardar el estado actual del mapa de calor como una captura de pantalla para que se convierta en la vista predeterminada para cualquier persona de tu organización que abra el mapa de calor. Para guardar la captura de pantalla actual seleccionada automáticamente de una repetición reciente, haz clic en Save (Guardar) en la captura de pantalla actual.
Puedes guardar varias capturas de pantalla para la misma vista (por ejemplo: vista por defecto, menú de navegación abierto, modal abierto) y alternar entre las capturas guardadas por los compañeros de equipo.
Para eliminar la captura de pantalla guardada actualmente y volver a una autoseleccionada de una repetición reciente, haz clic en Unpin (Desfijar) en la captura de pantalla actual.
Conservación de datos
Los periodos que puedes ver en un mapa de calor dependen de dónde accedas a él:
- RUM: los mapas de calor de Session Replay utilizan datos de clics de RUM (eventos de acción de RUM), que tienen un periodo de retención de 30 días.
- Product Analytics: los mapas de calor utilizan datos de clics de Product Analytics, que tienen un periodo de retención de 15 meses.
Siguientes pasos
Tras analizar los mapas de calor, el siguiente paso es comprender la acción del usuario explorando los datos relacionados. Mire las Session Replays asociadas para ver las acciones del usuario en el contexto de su sesión global, o navega a un Explorer de análisis en RUM o Product Analytics para analizar tus datos de usuario.
Solucionar problemas
Estoy viendo un mapa de calor para una vista determinada, pero me muestra una página inesperada.
Los mapas de calor se basan en nombres de vistas. Según cómo esté configurada tu aplicación, muchas páginas pueden empezar a agruparse bajo el mismo nombre de vista, o puedes empezar a tener nombres de vista específicos.
La vista que seleccioné no muestra el contenido inicial.
Los mapas de calor se generan con datos de Session Replay. El algoritmo inteligente de Datadog elige la repetición más reciente y que mejor se ajusta al estado inicial de la página. En algunos casos, es posible que esta repetición no sea la que quieres utilizar. Para cambiar el snapshot de tu mapa de calor, utiliza el botón Change Snapshot (Cambiar instantánea) para navegar por los diferentes estados de una repetición y encontrar la que deseas. Si la repetición que estás viendo no tiene el snapshot que buscas, puedes utilizar el botón Choose Another Replay (Elegir otra repetición) para seleccionar otra repetición de la misma vista.
En la lista de acciones en el lado de mi mapa de calor, veo un icono que muestra un elemento que no es visible en el mapa de calor.
El globo del icono dice que el elemento no es visible. Esto significa que el elemento es una acción común en tu página, pero no se muestra en el snapshot en el mapa de calor. Para ver ese elemento, puedes hacer clic en Change Snapshot (Cambiar snapshot) en la esquina superior derecha para cambiar el snapshot de tu mapa de calor a uno en el que esté presente ese elemento.
Después de intentar crear un mapa de calor, veo que aparece el estado “No Replay Data” (No hay datos de repeticiones).
El estado “No Replay Data” significa que Datadog no pudo encontrar ninguna Session Replay para usar como fondo del mapa de calor que coincida con los filtros de búsqueda actuales. Si acabas de empezar a grabar sesiones con el kit de desarrollo de software (SDK) del navegador, también es posible que Session Replay tarde unos minutos en estar disponible para su visualización.
Después de intentar crear un mapa de calor, veo que aparece el estado “Not enough data to generate a heatmap” (No hay suficientes datos para generar un mapa de calor).
Esto significa que Datadog no ha podido emparejar ninguna acción del usuario con la repetición seleccionada en ese momento. Esto ocurre por varias razones, como por ejemplo:
- Tu aplicación no está utilizando la última versión del SDK (v4.20.0 o posterior).
- Tu página cambió drásticamente en los últimos tiempos.
La información del usuario no se recopila por defecto. Los mapas de calor utilizan la información de usuario disponible en tus datos de sesión para mostrar información relevante sobre el comportamiento.
Referencias adicionales
Más enlaces, artículos y documentación útiles:
