CRO · Guía 2026Mapa de calor web: qué muestra, cómo leerlo y Hotjar vs Clarity
Un mapa de calor te dice dónde ocurre algo en tu página, no por qué. Esta guía te enseña a leerlo para sacar hipótesis que valga la pena testear, y compara las herramientas con datos verificados.
Felipe Meza CorredoiraRespuesta corta
Un mapa de calor web muestra con colores dónde hacen clic, se mueven y hasta dónde bajan los visitantes de una página. Sirve para detectar fricciones y formular hipótesis, no para probarlas. Hoy Hotjar ya es Contentsquare; Microsoft Clarity es la opción gratuita por defecto.
- Léelo por dispositivo y por fuente, nunca agregado.
- Cruza cada patrón con GA4 y el embudo antes de cambiar algo.
- Prioriza por margen en juego y valida con un test.
En esta guía
- Qué es un mapa de calor web
- Tipos de mapas de calor
- Qué muestra y qué no
- Cómo leerlo paso a paso
- Cuántas sesiones necesitas
- Con GA4, embudo y tests
- Hotjar vs Microsoft Clarity
- Otras herramientas
- Privacidad y consentimiento
- Instalación: GTM, WordPress, Shopify
- Errores frecuentes
Qué es un mapa de calor web y qué mide
Un mapa de calor web (heatmap) es una capa visual sobre una página que agrega la interacción de muchas sesiones: clics o toques, movimiento del cursor y profundidad de scroll. Los colores cálidos marcan más actividad; los fríos, menos. Mide comportamiento agregado en una URL y un periodo, no intención ni causa.
No es el mapa de calor de Excel ni el de temperatura: aquí hablamos del mapa de una página web, una herramienta de análisis de comportamiento que se usa en CRO (optimización de la tasa de conversión) y UX. Un script registra la interacción de cada visita y la superpone sobre una captura de la página. Responde preguntas de ubicación: dónde hacen clic, hasta dónde llegan, qué ignoran.
La escala es relativa a cada página: el rojo de una landing page con 300 visitas no equivale al de una home con 30.000. Mira también los valores absolutos.
Tipos de mapas de calor y grabaciones de sesión
Los tipos principales son el mapa de clics, el de movimiento, el de scroll y el de atención o zonas. Se complementan con señales de frustración (rage clicks y dead clicks) y con grabaciones de sesión, que reproducen visitas individuales. Cada uno responde una pregunta distinta; usarlos juntos evita conclusiones apresuradas.
| Vista | Pregunta que responde | Trampa típica |
|---|---|---|
| Mapa de clics (taps en móvil) | ¿Qué se clica y qué no? | Clics en elementos no clicables pasan inadvertidos si no los buscas |
| Mapa de movimiento | ¿Qué zonas se recorren con el mouse? | El cursor no es la mirada; no existe en móvil |
| Mapa de scroll | ¿Cuántos ven cada bloque? | Promediar móvil y desktop esconde el problema |
| Atención o zonas | ¿Qué bloque retiene y cuál se salta? | Tiempo alto puede ser interés o confusión |
| Rage y dead clicks | ¿Dónde hay frustración o elementos rotos? | Algunos son normales (copiar texto, zoom) |
| Grabaciones de sesión | ¿Qué secuencia lleva al abandono? | Ver 5 grabaciones y generalizar |
Mapa de clics, de movimiento y de scroll
El de clics es el más usado. Clarity los construye por elemento y no por posición absoluta del mouse, lo que los hace más precisos en diseños responsivos (Microsoft Learn, 2026). Busca clics en imágenes o textos que parecen enlaces. El de movimiento es secundario: el cursor no es la mirada. El de scroll es el más accionable en landings largas: si tu CTA está donde llega una minoría, el problema no es el texto del botón.
Mapa de atención o de zonas
Agrupa la interacción por bloques en vez de píxeles. Clarity ofrece mapas de áreas y de atención; Contentsquare, mapas por zonas y «Attention Maps». Sirven para comparar bloques: cuál retiene, cuál se salta.
Rage clicks, dead clicks y grabaciones
Microsoft define el rage click como varios clics rápidos en un área acotada, señal de frustración, y el dead click como un clic sin respuesta visual ni navegación, que puede indicar elementos rotos, latencia o diseño engañoso (Microsoft Learn, 2026). Revísalos primero: suelen apuntar a errores, no a gustos. Las grabaciones de sesión reproducen visitas individuales y muestran la secuencia que el mapa aplasta. Filtra antes de mirar y anota patrones repetidos, no anécdotas.
Qué muestra un mapa de calor y qué no
Un mapa de calor muestra dónde se concentra la interacción en una página y periodo. No muestra por qué ocurre, si quienes hacen clic compran, ni si un cambio mejorará el resultado. Además, depende de la muestra: tráfico, dispositivo y fuente cambian el dibujo. Trátalo como observación, no como conclusión.
Sí muestra
Dónde se concentran clics y toques, qué porcentaje ve cada bloque y dónde hay frustración.
No muestra
El motivo, si quien hace clic compra, cuánto margen está en juego ni si un cambio funcionaría.
Sesgos de muestra y dispositivo
El mapa refleja a quienes llegaron en ese periodo: una campaña con tráfico frío cambia el patrón. Y en móvil la misma URL es otra página, con otro orden, pliegue más corto y sin cursor. Promediar dispositivos o fuentes produce un mapa que no describe a nadie.
Páginas dinámicas
Carruseles, pestañas y pop-ups alteran la captura. Clarity no puede capturar contenido dentro de Canvas ni de iFrames de terceros (Microsoft Learn, 2026): si tu formulario de pago vive en un iFrame, el mapa no lo verá.
Cómo leer un mapa de calor paso a paso
Parte de una pregunta de negocio y una página con fuga medida en GA4. Segmenta por dispositivo y fuente, revisa primero el scroll, luego los clics y las señales de frustración, confirma con grabaciones y escribe cada hallazgo separando hecho, observación, hipótesis y recomendación. El resultado no es un cambio: es un test priorizado.
Define la pregunta y la página
«¿Por qué el 70 % no llega al formulario?» es una pregunta; «veamos el heatmap» no lo es.
Segmenta antes de mirar
Un mapa por dispositivo y, si aplica, por fuente. Anota los cambios del sitio en el periodo.
Lee el scroll primero
¿Qué porcentaje llega a tu CTA? Las caídas bruscas entre bloques suelen marcar falsos finales.
Luego clics y frustración
Compara clics en el CTA con elementos secundarios. Un dead click repetido en una foto de producto pide zoom o enlace.
Confirma con grabaciones
Diez grabaciones bien filtradas valen más que cien al azar.
Escribe la hipótesis y prioriza
«Si cambiamos X para el segmento Y, esperamos Z en la métrica M, porque observamos W». Prioriza por margen en juego.
Ejemplo de lectura de un scroll map
Datos ilustrativos, no de un cliente. La barra marcada señala la mayor caída entre bloques consecutivos (−35,6 puntos).
- Hecho
- El 22,7 % de las sesiones móviles llega al bloque del formulario.
- Observación
- La mayor caída ocurre justo después de la tabla de precios; las anteriores son graduales.
- Hipótesis
- Debajo de los precios hay un espacio en blanco que parece el final de la página, o el precio sin contexto desanima. Las grabaciones permiten distinguir una de otra.
- Recomendación
- Testear un CTA bajo los precios y eliminar el falso final. Métrica primaria: inicio de formulario en GA4; secundaria: leads calificados. El resultado solo lo entrega el test.
Cuántas sesiones necesitas antes de concluir
No existe un número universal. Depende del tráfico, de cuán marcado sea el patrón y de cuántos segmentos analices. Un criterio práctico: el patrón debe repetirse en dos mitades del periodo, por dispositivo, y cubrir un ciclo completo de tu negocio. Si cambia entre mitades, todavía es ruido.
Clarity no exige un tráfico mínimo para generar un mapa (Microsoft Learn, 2026), pero que el mapa exista no significa que diga algo estable. Las cifras redondas que circulan («mínimo 1.000 visitas») no tienen respaldo general.
- Prueba de estabilidad. Compara las dos mitades del periodo: elementos más clicados y bloque con la mayor caída de scroll.
- Ciclo completo. Días hábiles y fin de semana; no mezcles periodos con y sin una campaña grande.
- Cuenta eventos en el elemento, no sesiones totales de la página. Cada segmento extra divide la muestra.
El mapa no necesita significancia estadística porque no prueba causalidad. Esa exigencia aparece cuando testeas el cambio: dimensiónalo con la calculadora de la guía de A/B testing.
Cómo combinarlos con GA4, el embudo y los tests
GA4 y el embudo te dicen en qué paso se pierde gente y cuánto vale esa pérdida; el mapa de calor te muestra qué pasa dentro de esa página; el test confirma si tu cambio funciona. El orden importa: primero la fuga medida, después el mapa, al final el experimento con métrica de negocio.
Empieza por el embudo de conversión y la tasa de conversión por dispositivo y fuente en GA4. Recién ahí abre el mapa de esa URL, con el mismo segmento. Para priorizar, estima el margen en juego:
Clarity se integra con GA4, pero no admite segmentos de GA4 ni le envía la URL de las grabaciones (Microsoft Learn, 2026). Usa los mismos filtros en ambas: URL, dispositivo, fuente y fechas. Luego, el experimento: lo explicamos en la guía de A/B testing con calculadora.
¿Quieres saber dónde se pierde margen en tu sitio?La auditoría CRO combina mapas de calor con datos de embudo y finanzas para entregarte un backlog priorizado.
Ver la auditoría CROHotjar vs Microsoft Clarity: comparación verificada
Hotjar se fusionó con Contentsquare en julio de 2025 y ya no permite crear cuentas nuevas: hoy la comparación real es Contentsquare frente a Microsoft Clarity. Clarity es gratis, sin límite de tráfico y con heatmaps hasta 9 meses. Contentsquare suma encuestas, retención más larga en pago y más análisis, desde US$ 39 al mes.
Contentsquare informa que, desde el 1 de julio de 2025, Hotjar se fusionó con su grupo (Contentsquare Support, 2025) y que ya no es posible crear cuentas nuevas en Hotjar (Contentsquare, 2026); las existentes migran por fases (Contentsquare Support, 2026).
| Criterio | Microsoft Clarity | Contentsquare (ex Hotjar) |
|---|---|---|
| Plan gratis | Sí, gratis «para siempre», sin plan de pago | Sí, plan Free de US$ 0 |
| Límite de sesiones | Sin límite de tráfico ni muestreo; hasta 100.000 sesiones grabadas por proyecto al día | Free: hasta 200.000 sesiones al mes (el Hotjar gratuito permitía 35 al día) |
| Grabaciones | Incluidas | Free: se graba el 5 % de las sesiones (máx. 10.000) |
| Retención de datos | Grabaciones 30 días (favoritas y una muestra, hasta 9 meses); heatmaps hasta 9 meses | Free: 1 mes de analítica y 1 mes de grabaciones. Growth: 13 meses y 2 meses |
| Heatmaps | Clics, scroll, áreas, conversión y atención; móvil, desktop y tablet | Incluidos en Free; mapas por zonas y resúmenes de heatmaps desde Growth |
| Encuestas y feedback | No figuran en la documentación consultada | Free: 100 respuestas al mes y 3 widgets o encuestas |
| Integración con GA4 | Nativa (IDs de cuenta, medición y propiedad); sin segmentos de GA4 | Integración con Google Analytics incluida en Free y Growth |
| IA y resúmenes | Copilot resume heatmaps (últimos y primeros clics, rage, dead clicks, scroll); se puede desactivar | Free: sin resúmenes ni chat; Growth: chat Sense, resúmenes de heatmaps y de sesiones |
| Privacidad y enmascaramiento | Modo Balanced por defecto (números y emails); campos de formulario y desplegables siempre enmascarados; API de consentimiento v2 | No captura lo que se escribe ni valores precargados; elimina textos con formato de email; el texto visible de la página se enmascara manualmente |
| Precio de entrada | US$ 0 | Growth desde US$ 39 al mes con pago anual (US$ 49 mensual), desde 7.000 sesiones |
Fuentes: FAQ de Clarity, enmascaramiento en Clarity, heatmaps de Clarity, precios de Contentsquare, enmascaramiento en Contentsquare. Consulta: octubre 2026.
Elige Microsoft Clarity si…
Necesitas heatmaps y grabaciones sin costo ni topes de tráfico, y tu analítica principal ya vive en GA4.
Elige Contentsquare si…
Quieres encuestas, análisis por zonas, resúmenes con IA y 13 meses de retención, y un equipo que los use cada semana.
Nuestro criterio: para la mayoría de las empresas de Chile y LATAM, Clarity más GA4 basta para generar buenas hipótesis. El cuello de botella rara vez es la herramienta; es quien lee los datos con una pregunta de negocio.
Otras herramientas de mapas de calor
Datos de sus páginas de precios oficiales, consultadas en octubre 2026.
| Herramienta | Entrada | Lo distintivo |
|---|---|---|
| Crazy Egg | Starter US$ 29 al mes, facturado anual; 5.000 páginas vistas y 50 grabaciones al mes | Encuestas desde Starter; A/B testing desde Plus |
| Mouseflow | Free: 500 sesiones al mes, 1 mes de retención; Essential: 5.000 sesiones a 25 al mes (sin moneda indicada) | Analítica de formularios y embudos |
| Clarity + GA4 | US$ 0 | Comportamiento más embudo en una pila gratuita |
Privacidad, enmascaramiento y consentimiento
Un mapa de calor y, sobre todo, una grabación pueden capturar datos personales visibles en pantalla. Configura el enmascaramiento, excluye páginas sensibles, carga el script según el consentimiento del visitante y documenta el uso en tu política de privacidad. En Chile, la Ley 21.719 eleva el estándar desde su entrada en vigencia.
- Enmascara por defecto. Clarity trae el modo Balanced (oculta números y emails) y ofrece Strict, que oculta todo el texto (Microsoft Learn, 2026). En Contentsquare, el texto visible con datos personales se oculta con el atributo
data-cs-mask(Contentsquare Support, 2026). - Excluye páginas sensibles como mi cuenta o historial de pedidos.
- Respeta el consentimiento. Desde el 31 de octubre de 2025, Clarity exige una señal de consentimiento válida (API v2) para visitas desde el Espacio Económico Europeo, Reino Unido y Suiza (Microsoft Learn, 2026). No debe usarse en sitios dirigidos a menores de 18 años.
Chile: Ley 21.719 de protección de datos personales
La Ley 21.719 se publicó el 13 de diciembre de 2024 y entra en vigencia el 1 de diciembre de 2026, según su artículo primero transitorio (Diario Oficial, 2025). A octubre de 2026 se tramita un proyecto del Gobierno para postergarla (Pauta, 2026). Con o sin prórroga, la configuración anterior es la base razonable. Esto no es asesoría legal.
Un banner que no bloquea scripts no es consentimiento. Revisa en la pestaña Red del navegador que la herramienta no envíe datos antes de que el visitante acepte.
Cómo instalar un mapa de calor: GTM, WordPress y Shopify
Hay tres vías: pegar el código en el head del sitio, instalarlo con Google Tag Manager o usar la integración de tu plataforma (WordPress, Shopify y otras). La recomendada para controlar el consentimiento es GTM. Después, verifica que la herramienta reciba datos y que el enmascaramiento funcione antes de analizar.
Crea el proyecto
Registra el dominio y define el enmascaramiento antes de capturar la primera sesión.
Instala con Google Tag Manager
Clarity detecta GTM y publica la etiqueta desde su asistente (Microsoft Learn, 2026). Condiciona el disparo a tu señal de consentimiento.
O usa la integración de tu plataforma
Hay integraciones para WordPress, Shopify, WooCommerce y Wix. Si ya usas GTM, no instales además el plugin: duplicarías el script.
Verifica y conecta GA4
Revisa en la pestaña Red solicitudes a
clarity.ms/collect, mira una grabación tuya para confirmar el enmascaramiento y activa la integración con GA4.
Si rediseñas la tienda, diseño web y ecommerce deja la medición lista.
Errores frecuentes al analizar mapas de calor
- Mirar sin pregunta. Sin una fuga medida en GA4, el mapa es una galería de opiniones.
- Promediar dispositivos o generalizar desde cinco grabaciones memorables.
- Confundir actividad con valor. Muchos clics no significan que el elemento ayude a vender.
- Cambiar sin testear. Así no sabes si el cambio mejoró, empeoró o coincidió con otra cosa.
- Optimizar la tasa y no el margen. Más leads de peor calidad o más pedidos con descuento pueden dejar menos contribución.
Antes de instalar nada, la auditoría gratuita de landing page revisa 34 criterios y entrega 5 acciones prioritarias, sin registro. Si prefieres que un equipo lo haga de punta a punta, conoce nuestro servicio de optimización de conversiones: investigamos con mapas de calor, GA4 y datos de margen, y medimos en clientes, no en clics. La base de medición la cubre Data & Analytics.