Cómo crear gratis mapas de calor de Google Analytics

En este artículo se explica qué son los mapas de calor de Google Analytics, por qué son útiles y cómo configurar uno en cinco sencillos pasos.

What is a Google Analytics heat map?

A Google Analytics heat map is a visual representation of where visitors click on your website. It’s powered by data GA collects through its tracking snippet. Prior to 2019, GA users could generate a free heatmap using Google's heat map extension, Page Analytics (by Google).

Unfortunately, Page Analytics (by Google) was deprecated in 2017 and hasn’t been updated since 2019. There’s no support for GA4, and many users (including us!) struggle to get it to work, leading to several one-star reviews on the Chrome web store.

Even if you do get it to work (good luck! 😮‍💨), GA heatmaps have limited functionality—you’d only get a basic click map with percentages, not the colorful data visualization you might be expecting.

Why do GA users want to view heatmaps, anyway?

Aside from being fun to look at, heatmaps give you a shareable and easy-to-understand visual overview of any website page’s performance. However you create them, heatmaps help you

1. 👩‍💻 Quickly visualize user behavior

2. 🖱 See what users click on (and ignore)

3. 📈 Identify page areas with high engagement

4. ⬇️ View how far users scroll down the page

5. 🐞 Find and fix bugs and broken page elements

6. 🤝 Get stakeholder buy-in for website optimizations

7. 📊 Showcase results to managers and clients

8. 💡 Generate ideas for conversion rate optimization (CRO)

9. 🔎 Analyze A/B testing results and iterate improvements

Luckily, the end of Google Analytics heat maps doesn’t mean you have to miss out on these brilliant heatmap benefits. Hotjar Heatmaps is one of the world’s best-loved heatmap tools—and we let you generate as many heatmaps as you want. Read on to find out how. 👇

How to set up a free website heatmap in Hotjar

Hotjar (that’s us, 👋 hello!) is a best-in-class product experience insights platform used on over 1 million websites. Aside from our advanced plans for growing businesses, Hotjar also offers a free-forever plan with unlimited heatmaps. You read that right: unlimited heatmaps.

By using Hotjar Heatmaps instead of Google’s old heat map tool, you’ll be able to do the following:

• Automatically generate multiple types of heatmap at once. These include

  • Click maps: visualize the number of clicks on any element

  • Scroll maps: see how far down the page visitors scroll

  • Move maps: see how users move and hover their mouse as they browse

  • Rage click maps: quickly find broken or confusing elements

  • Engagement Zones maps: combined click, scroll, and move maps to show elements that attract the most attention and interaction

• Visualizar mapas de calor segmentados por datos de los visitantes, como país, dispositivo y fuente de tráfico.

• Compartir un enlace a cualquier mapa de calor con tus colegas, stakeholders y clientes.

• Descargar y exportar los datos de los mapas de calor, como imagen o archivo .jpg para hacer un análisis de datos más profundo.

• Hacer clic para ver grabaciones de sesiones con las que analizar el recorrido de navegación que siguieron usuarios concretos.

Y, como Hotjar se integra con Google Analytics (plan Business y superior), también puedes segmentar los mapas de calor por eventos de GA.

¿Quieres empezar a utilizar los mapas de calor de Hotjar ahora mismo? Pues a continuación tienes los 5 sencillos pasos que debes seguir para configurar un mapa de calor con Hotjar.

Paso 1: crea una cuenta en Hotjar

Crea una cuenta iniciando sesión en Google o utilizando otra dirección de correo electrónico. Hotjar ofrece un plan gratis para siempre y pruebas gratuitas de los planes premium. Recibirás en tu correo electrónico un código de confirmación para que verifiques tu dirección. A continuación, establece una contraseña segura y responde a las preguntas de configuración. Introduce la URL de tu sitio (por ejemplo, misitioweb.com) y haz clic en la opción de empezar a usar Hotjar.

Paso 2: añade el código de seguimiento de Hotjar a tu sitio web e integra Hotjar con GA

Hotjar hace el seguimiento de los visitantes de tu sitio web de forma similar a Google Analytics. Puedes instalar el código de seguimiento de Hotjar de varias maneras; por ejemplo, a través de Google Tag Manager, instalando el plugin de WordPress o copiando y pegando manualmente el fragmento de JavaScript en el <head> de cada página del sitio web del que quieras hacer el seguimiento.

En este punto, también puedes configurar la integración con Google Analytics (plan Business y superior) para segmentar los mapas de calor por eventos de Google Analytics (más información sobre esto en el paso 5 👇).

Paso 3: abre la herramienta Heatmaps

Una vez que le hayas dado tiempo al código de seguimiento para que haga el seguimiento de algunos visitantes, haz clic en la opción de Heatmaps del menú de navegación de la izquierda.

Paso 4: introduce la URL de tu mapa de calor o selecciónala de la lista de páginas populares

Utiliza la barra de búsqueda situada en la parte superior de la página de Heatmaps para ver un mapa de calor de cualquier página de tu sitio introduciendo la URL o seleccionando una de las páginas populares sugeridas.

Paso 5: alterna entre distintos tipos de mapas de calor y filtra por eventos de Google Analytics

Haz clic en los iconos de los distintos tipos de mapas para visualizar uno u otro.

Como muchos de los datos de los que Hotjar hace un seguimiento son los mismos que en Google Analytics, puedes filtrar tus mapas de calor por múltiples métricas, como un rango de fechas, el tipo de dispositivo y la página de salida en cualquier plan.

Y, si has integrado GA4 con Hotjar, también puedes filtrar los mapas de calor por cualquier evento de Google Analytics.

¿Para qué páginas debo generar un mapa de calor?

Precisamente para responder a esta pregunta es cuando resulta útil combinar Hotjar con GA. Inicia sesión en tu cuenta de Google Analytics y busca las áreas de bajo rendimiento; por ejemplo, las páginas con un porcentaje de rebote o porcentaje de salidas altos y tasas de conversión bajas. En Hotjar, genera mapas de calor de estas páginas para averiguar qué confunde a los usuarios y les hace abandonar: ¿hacen clic con rabia en elementos que no funcionan? ¿No se desplazan hacia abajo lo suficiente para ver las llamadas a la acción (CTA)?

Por otro lado, si generas un mapa de calor de las páginas web con las tasas de conversión más altas, podrás identificar qué elementos captan la atención de tus usuarios y replicarlos en otros lados.

También puedes utilizar la integración oficial de Google Analytics y Hotjar para pasar eventos de GA directamente a Hotjar y filtrar por métricas como "add_to_cart" o "begin_checkout" para ver rápidamente mapas de calor de usuarias y usuarios que generan conversiones y de lo que no.

Añadir insights cualitativos a los mapas de calor y a los datos de GA sobre el sitio web

Usar mapas de calor junto con los datos de Google Analytics no mejorará la experiencia de usuario (UX) en tu sitio web de la noche a la mañana, pero sí que te servirá para identificar los cambios clave que puedes hacer para conseguirlo.

Sin embargo, los datos cuantitativos de analíticas web por sí solos no te ayudarán a comprender qué es lo que realmente motiva a tus clientes a elegirte, a mantenerse fieles y a recomendar tus productos.

Obtén una visión integral combinando GA y mapas de calor con otras herramientas de Hotjar, como grabaciones de sesiones, encuestas y entrevistas a personas usuarias, todas ellas disponibles en la plataforma Hotjar. Este es el primer paso que debes dar para tomar decisiones de negocio basadas en datos, con las que puedas optimizar tu sitio y aumentar los ingresos ofreciendo a tus clientes una mejor experiencia que tus competidores.