¡Hola! Ahora puedes usar Hotjar en español 🇪🇸 Empezar gratis.

Aprende / Blog / Artículo

Volver al blog

Cómo crear gratis mapas de calor de Google Analytics

Si has llegado hasta aquí buscando información sobre los mapas de calor de Google Analytics, tenemos una noticia buena y una mala.

La mala noticia 😥: el complemento gratuito de Google para generar heatmaps de Google Analytics está en desuso desde 2017. Según reseñas recientes de usuarios, ya no funciona ni es compatible con GA4.

La buena noticia 🤗: hay otra forma de generar mapas de calor gratuitos combinando los datos de Google Analytics con Hotjar, y te garantizamos que funciona.

Última actualización

23 ene 2024

Tiempo de lectura

7 min

Compartir

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.

Configura un mapa de calor hoy mismo🔥

Crea una cuenta gratuita de Hotjar y empieza a generar mapas de calor para averiguar cómo se mueven, en dónde hacen clic y hasta dónde se desplazan verticalmente tus usuarios.

What is a Google Analytics heat map?

#A Google Analytics heatmap in action—the orange tags show click percentages
A Google Analytics heatmap in action—the orange tags show click percentages

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.

#Terrible reviews of the Google Analytics heatmap Chrome extension
Terrible reviews of the Google Analytics heatmap Chrome extension

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.

#The difference between a dry Google Analytics heat map (L) and a colorful Hotjar move map (R)
The difference between a dry Google Analytics heat map (L) and a colorful Hotjar move map (R)

Why do GA users want to view heatmaps, anyway?

#Un usuario de Hotjar comparte un mapa de calor con un miembro de su equipo para elaborar un caso de negocio que les ayude a conseguir una mayor aceptación.
Un usuario de Hotjar comparte un mapa de calor con un miembro de su equipo para elaborar un caso de negocio que les ayude a conseguir una mayor aceptación.

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

#A Hotjar scroll map (L) and click map (R)
A Hotjar scroll map (L) and click map (R)

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

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

Utilizamos Hotjar con todas nuestras páginas. Si nuestra tasa de conversión baja después de hacer un cambio, con los mapas de calor podemos identificar y resolver el problema. Hotjar nos ha ayudado a definir la estrategia de nuestro sitio web y a mejorar aún más la experiencia que ofrecemos a nuestros clientes.

Anna Grunanger
Head of Acquisition, Vimcar

¿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.

Get started with heatmaps

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.

Continuous heatmaps

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.

For more on interpreting heat map data, see our guide on how to analyze a heatmap

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

#An ecommerce purchase report in Google Analytics showing a product with high unique page views but no purchases
An ecommerce purchase report in Google Analytics showing a product with high unique page views but no purchases

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.

Configura un mapa de calor hoy mismo🔥

Crea una cuenta gratuita de Hotjar y empieza a generar mapas de calor para averiguar cómo se mueven, en dónde hacen clic y hasta dónde se desplazan verticalmente tus usuarios.

Preguntas frecuentes sobre los mapas de calor de Google Analytics

Related articles

Analítica del comportamiento

La mejor manera de hacer un seguimiento del desplazamiento vertical (y no es con Google Analytics 4)

Saber qué partes de una página web aburren, atraen o convencen a los visitantes de un sitio web puede suponer un antes y un después para los profesionales del marketing digital, los diseñadores de UX, los equipos de producto y los responsables de comercios electrónicos.

Y esto es justo lo que pueden conseguir haciendo un seguimiento del desplazamiento vertical, ya que les aporta insights sobre cómo se desplazan hacia abajo los visitantes de un sitio web que pueden analizar para mejorar la experiencia de usuario (UX).

Ayush Sood

Analítica del comportamiento

10 ways to improve your data analytics processes using Hotjar

As your team's data partner, you empower colleagues to make predictions and decisions by seeking out valuable insights into your users, products, or services. But who—or what—empowers you? What data analytics tools do you rely on to accomplish your day-to-day work? 

If you still need to find your go-to solution, try Hotjar.

Shadz Loresco

Analítica del comportamiento

7 best Mixpanel alternatives to understand your users

Mixpanel is an analytics platform that excels in collecting quantitative user data. But sometimes, product managers, marketers, and website owners need more—the 'why' behind the 'what’. The good news is there are plenty of Mixpanel alternatives that combine quantitative analytics with powerful qualitative insights.

Hotjar team