Información general de una funcionalidad de mapa de calor.

Un mapa de calor es una visualización de las interacciones de tus usuarios superpuesta a los datos de Session Replay. Real User Monitoring (RUM) tiene 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: Consulta 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:

  1. 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).
  1. Activar Session Replay.
  2. Configura trackUserInteractions: true en la inicialización del SDK para habilitar el seguimiento de acciones (necesario para los mapas de clics).

Para empezar

Ve a Digital Experience > Real User Monitoring > Session Replay > Heatmaps (Experiencia digital > 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ízalas. En Tipo de mapa, puedes seleccionar el tipo de mapa de calor que quieres ver: Elementos principales, Mapa de clics o Mapa de desplazamiento. Si haces clic en una de estas opciones, accederás a la página del mapa de calor correspondiente a una vista concreta.

Selecciona una aplicación para ver los mapas de calor en ella

Puedes cambiar la vista que se muestra utilizando los selectores Nombre de la vista y Aplicación de la parte superior. Para añadir filtros más granulares, como por ejemplo una geografía específica, puedes añadir un filtro desde el panel de la izquierda.

Muestra el selector para elegir una aplicación y una vista de las opciones en las que hayas activado Session Replay.

Mapas de clics (Click maps)

Un mapa de clics muestra las acciones con las que más se interactuó en una vista determinada, agregando las acciones de clic de las sesiones y visualizándolas como blobs en el mapa.

Datos de mapas de clics superpuestos en un sitio web.

Cada mapa de clics también ofrece análisis como:

  • Posición que ocupa esa página entre todas las demás páginas visitadas
  • Recuentos de usuarios únicos en esa página
  • Cualquier señal de frustración en esa página

Debajo del panel están 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.
Muestra un ejemplo de acción y la información que puedes obtener sobre esa acción.

Elementos principales

Los elementos principales agregan acciones de clic en una vista determinada, mostrando los elementos con los que más se interactuó y su clasificación. La clasificación en el propio mapa corresponde al nombre de la acción en la parte lateral.

Clasificación de los elementos principales en los que se hicieron más clics en una página

Haz clic en cualquier nombre de acción del panel para resaltar la acción correspondiente en el mapa.

Mapas de desplazamiento (Scroll maps)

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.

Mapa de desplazamiento de una página de artículos para camas en una aplicación de comercio electrónico de ejemplo

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 granulares, útiles para identificar dónde se produce los mayores abandonos de la página.

Captura de pantalla de las consultas de información de datos de desplazamiento

Fondos

Un fondo es un snapshot de una repetición de sesión. Cada mapa de calor recupera los 20 fondos que desencadenaron más acciones durante una sesión determinada. Al cambiar el fondo se obtienen resultados diferentes en función del fondo seleccionado. Puedes utilizar el botón Choose Background (Elegir fondo) para seleccionar un fondo concreto para tu mapa de calor.

La lista de fondos de un mapa de calor no puede modificarse.

Siguientes pasos

Tras analizar los mapas de calor, el siguiente paso es comprender la acción del usuario explorando los datos relacionados. Cambia al Explorador de análisis o mira las repeticiones de sesión asociadas para consultar visualmente las acciones del usuario en el contexto de su sesión global.

Solucionar problemas

Estoy observando un mapa de calor de una vista determinada, pero me muestra una página inesperada.

Los mapas de calor se basan en nombres de vistas RUM. Dependiendo de cómo esté configurada tu aplicación RUM, muchas páginas pueden empezar a agruparse bajo el mismo nombre de vista o podrías empezar a tener nombres de vista específicos.

La vista que seleccioné no muestra el contenido inicial.

Los mapas de calor se generan a partir de los datos de Session Replay. El algoritmo inteligente de Datadog selecciona la repetición más reciente y que mejor coincide con el estado inicial de la página. En algunos casos, es posible que no puedas encontrar la repetición correcta. Para cambiar el fondo de tu mapa de calor, puedes utilizar el botón Choose Background (Elegir fondo) para navegar por los diferentes estados de la página y encontrar aquel que buscas.

En la lista de acciones de la parte lateral de mi mapa de calor veo un icono que muestra un elemento que no es visible en el mapa de calor.

Elementos ocultos en la lista de acciones de un mapa de calor.

El tooltip del icono dice elemento no visible. Esto significa que el elemento es una acción común en tu página, pero no se muestra en el fondo del mapa de calor. Para ver ese elemento, puedes hacer clic en Choose Background (Elegir fondo) en la esquina inferior derecha para cambiar el fondo de tu mapa de calor a uno en el que ese elemento esté presente.

Después de intentar crear un mapa de calor, veo que aparece el estado “No Replay Data” (No hay datos de repeticiones).

Esto significa que Datadog no logró encontrar ninguna repetición de sesión para utilizarla como un fondo del mapa de calor que coincida con los filtros actuales de búsqueda. Si acabas de empezar a grabar sesiones con el SDK del navegador, puede que la repetición de la sesión 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 logró hacer coincidir 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.

Toda la información del usuario en la página está vacía.

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

PREVIEWING: brett.blue/add-otel-integrations