
En esta ocasión vamos a ver cómo empezar a utilizar Heatmaps y Grabaciones de Sesión para el análisis de la usabilidad de una página web.
Ya hemos hablado en otros artículos de la importancia que tiene el análisis digital a la hora de conocer la marcha de un proyecto online y si la estrategia digital está funcionando según lo planeado. Una de las áreas de la analítica digital más desarrollada es la referida al estudio de los visitantes de una página web. Herramientas como Google Analytics proporcionan cantidades ingentes de informes y gráficos preparados para su análisis, como vimos en nuestro artículo Google Analytics: Cómo darte de alta y conectar tu web.
Para analizar fácilmente la usabilidad y la experiencia de los visitantes al visitar la página web podemos recurrir a otro tipo de técnicas analíticas. Como veremos a continuación, los heatmaps y las grabaciones de sesión nos pueden dar muchas pistas de la experiencia de los usuarios de nuestra web.
1. Qué son los Heatmaps y las Grabaciones Web
Los mapas de calor son una representación de eventos acumulados a lo largo de las diferentes visitas de los usuarios. Por ejemplo, podemos representar cuántas veces se hace clic en cada parte de una página web o por dónde se desplaza el ratón a lo largo de las visitas.

Por su parte, las grabaciones recogen sesiones anónimas de visitantes. Cuando un usuario visita nuestra web se guarda una grabación con las acciones que ha realizado. De esta manera podemos visualizar después estas sesiones y comprobar qué partes han atraído más su interés o si ha tenido problemas con el uso de alguna sección, por ejemplo.

En BaseCero Marketing utilizamos este tipo de análisis en todos nuestros productos con desarrollo de página web. Nos permite evaluar si el diseño de la web y la información mostrada es sencilla y fácil de usar, y está alineada con los objetivos marcados en la estrategia digital.
A lo largo de este artículo vamos a ver cómo activar heatmaps y grabaciones de sesión en nuestra web. Para ello vamos a utilizar la plataforma Hotjar, recientemente adquirida por Content Square.
Aunque esta plataforma tiene muchas funciones útiles en sus versiones de pago, la versión gratuita es más que suficiente para empezar a analizar tu web, así que en este artículo solo veremos las opciones básicas.
2. Alta en Hotjar y Configuración Web
Para darnos de alta en la plataforma de Hotjar solo necesitamos un correo electrónico o una cuenta de Google. Desde la página principal podemos obtener la suscripción gratuita, en la opción “Try it Free”:

Una vez dados de alta, y rellenada la información básica de la cuenta, tenemos que agregar la página web que queremos monitorizar, así como la categoría o sector de la web y si nos pertenece a nosotros mismos o a un tercero.

A continuación debemos conectar la cuenta de Hotjar a nuestra página web a través del código de seguimiento. Esta cookie funciona igual que la de otras plataformas como Google Analytics o Facebook Analytics. Consta de un script que debemos añadir a nuestra web para que recopile los datos que necesita Hotjar.
Para consultar el código de seguimiento podemos acceder directamente, desde el listado de páginas web en la plataforma, en la opción “install tracking code”.

Tenemos dos opciones de instalación: con el propio script a añadir en la etiquetade la página web o a través de plugins o instaladores (solo disponibles para algunas plataformas como WordPress o Shopify).
Para comprobar que la instalación ha funcionado es recomendable usar la opción de “Verify Installation”, situada debajo del código de seguimiento.

3. Análisis Web con Heatmaps y Grabaciones
Con la página web conectada a Hotjar, solo nos queda activar las funciones de mapas de calor y grabaciones para recolectar la información sobre el comportamiento de los visitantes. Cada vez que un usuario accede a la web, Hotjar guarda registro de su sesión y alimenta con las nuevas observaciones los análisis de mapas de calor.
3.1. Activar los Heatmaps de Hotjar en nuestra web
Para activar los mapas de calor de nuestra web, tenemos que acceder a la sección “Heatmaps”, desde el menú de navegación de la izquierda del dashboard y seleccionamos New Heatmap.
A continuación solo tenemos que rellenar la información básica y activar el nuevo Heatmap:
- Nombre (name): es recomendable poner un nombre sencillo y relacionado con la web a analizar.
- Formato (format): con la versión gratuita sólo es posible seleccionar “Manual”.
- Página objetivo (page targeting): url a analizar, con la opción de seleccionar una URL concreta o grupos de páginas similares (como las páginas de los diferentes productos, por ejemplo).
- Revisión y activación del mapa de calor.

3.2. Tipos de de mapas de calor en Hotjar
La plataforma de Hotjar proporciona 3 tipos diferentes de mapas de calor, una vez que se ha activado el código de seguimiento y se ha creado el heatmap. Cada una de estas visualizaciones corresponde a un elemento diferente a observar.
Mapa de Calor de clics:
Marcan los elementos de la web donde se producen clicks, para el caso de las visitas desde ordenador. En caso de visitas desde teléfono móvil, está el heatmap de “taps”.

Mapa de Calor de movimiento:
Muestra las partes de la web donde mayor tiempo se detiene el puntero de la visita, también para visitas desde ordenador.

Mapa de Scroll:
Este análisis informa del porcentaje de visitas que se quedan en la página a medida que bajamos en el scroll vertical.
Este tipo de heatmap es especialmente relevante para el diseño web. Cuando analizamos el porcentaje de visitantes que llega a cada parte de nuestra web, nos damos cuenta de lo importante que es atraer la atención y tener un mensaje claro, sencillo y bien visible. La mayoría de las visitas no pasarán de la primera sección.

Los controles para cambiar el tipo de heatmap visualizado en Hotjar se encuentran en la parte superior de la ventana principal. Desde allí podemos seleccionar visualizar la información para la versión móvil, tablet u ordenador, además de cambiar el tipo de mapa de calor.

3.3. Activar Grabaciones de Sesión en Hotjar
Otra de las herramientas que proporciona Hotjar es la posibilidad de grabar las visitas a nuestra página y poder visualizarlas después. Con la revisión de las grabaciones podemos analizar aspectos clave de la web:
- Puedes estudiar el rendimiento de los artículos del blog o qué partes interesan más y cuáles menos. Sí, si estás leyendo este artículo y no tienes algún navegador privado, tu sesión seguramente esté siendo grabada 😉
- Si tienes una Landing Page para captar suscriptores, revisando las grabaciones puedes identificar problemas en algún punto del formulario o información que genera dudas en las visitas. Es un muy buen complemento para tus campañas de publicidad digital.
- En el caso de una Tienda Online, conocer el proceso de compra de una visita es mucho más fácil si podemos observar qué hacen en nuestra web, desde que comienzan la visita hasta el momento de la compra.
Para empezar a recoger las sesiones de los visitantes de la web, tenemos que acceder al menú de “Recordings”. Se encuentra en el panel de control izquierdo de Hotjar y pulsar en “Start Recordings”.
A continuación nos pide una configuración básica, que en el caso de la versión gratuita se reduce a una sola opción: “Manual Snapshot”:

La versión gratuita tiene algunas limitaciones siendo la más importante el máximo de 100 grabaciones seguidas y 300 grabaciones almacenadas. De todas formas, por defecto solo se recogen aquellas visitas que han estado al menos 30 segundos en la página web, por lo que nos aseguramos cierta calidad en cada visita guardada.
3. 4. Revisión de Grabaciones de Sesión
A la hora de analizar la Usabilidad Web es muy útil poder revisar cada visita que hayamos recibido. Esto lo podemos conseguir con la revisión de las grabaciones de sesiones. Aunque sean completamente anónimas, observar cómo los visitantes se mueven por la web, que secciones llaman más la atención o si alguna parte no se entiende o no funciona como se esperaba.

La interfaz principal de las grabaciones cuenta con un listado en la parte principal, donde se muestran algunos datos clave de la visita (país, tiempo de visita, páginas visitadas y fecha). Para revisar las sesiones que nos interesan, basta con pulsar en el botón de PLAY y se nos despliega el visor de sesiones:

A través de los filtros situados en la parte superior es posible seleccionar solo ciertos tipos de grabaciones. Algunos ejemplos son visitas de determinado país o sesiones en las que se ha visitado más de una página de nuestra web.

Desde BaseCero Marketing os animamos a probar esta plataforma y empezar a analizar el tráfico de vuestra web desde otra perspectiva diferente a la de Google Analytics. Aunque en este artículo solo hemos abordado las opciones y ejemplos más básicos de los heatmaps y las grabaciones web, Hotjar tiene muchas funciones muy útiles para ayudaros a mejorar vuestra página web.
4. Alternativas a Hotjar
Para finalizar, os proponemos 3 alternativas a Hotjar para elaborar heatmaps y grabaciones de sesión en vuestra página web. Como hemos dicho al principio del artículo, Hotjar es una herramienta muy completa, pero hay muchas otras que merece la pena probar. Si estáis interesados en la analítica web y el análisis de la usabilidad web, os pueden ayudar a desarrollar vuestro proyecto digital.
MouseFlow:
La principal ventaja de MouseFlow frente al resto de programas similares es la posibilidad de analizar los mapas de calor de tu página web en vivo, sobre los usuarios que en cada momento están en la web.
Su versión gratuita almacena datos por 30 días, tras los cuales se reinician los heatmaps y las grabaciones web. El plan de precios más económico es de 24 € al mes.
CrazyEgg
Esta alternativa a Hotjar no tiene versión gratuita pero sí un periodo de prueba de 30 días en todos sus planes de precios.
El elemento diferenciador de CrazyEgg es su editor web conectado a la plataforma, que permite maquetar la web directamente sobre el análisis de los mapas de calor.
Visitor Analytics
Esta empresa alemana se diferencia por ofrecer unos precios muy competitivos frente al resto de alternativas (desde menos de 6$ al mes).
Además su tecnología de recogida de datos no utiliza cookies para monitorizar la web y aportar una visión completa de la analítica web, además de proporcionar heatmaps y grabación de sesiones
Hasta aquí llega este artículo. Si tienes cualquier duda o sugerencia, te esperamos en los comentarios!