Mapa de calor web: qué es, tipos y cómo usarlo para aumentar conversiones

Un mapa de calor web revela lo que Google Analytics no puede contarte: dónde miran tus usuarios, hasta dónde hacen scroll y qué botones ignoran por completo.

Tu web recibe miles de visitas. Tienes tasas de rebote, tiempo en página, embudos en GA4. Pero hay una pregunta que los números cuantitativos no responden: ¿qué hacen exactamente tus usuarios cuando llegan a una página? Para eso existe el mapa de calor web.

¿Qué es un mapa de calor web?

Un mapa de calor web (o heatmap) es una representación visual del comportamiento de los usuarios en una página. Superpone datos de interacción sobre una captura de pantalla de tu web, usando una escala de colores que va del azul frío (poca actividad) al rojo caliente (mucha actividad).

Es una herramienta de analítica cualitativa: no te dice cuántos usuarios hacen algo, sino dónde y cómo interactúan. Combinada con datos cuantitativos como GA4, forma la base de cualquier proceso serio de CRO.

Los 3 tipos de mapas de calor que debes conocer

1. Heatmap de clics (click heatmap)

Muestra dónde hacen clic tus usuarios. Es el tipo más común y más revelador. Permite identificar:

Elementos decorativos que confunden: imágenes estáticas en las que los usuarios hacen clic esperando que sean enlaces.
CTAs ignorados: botones de compra o registro que nadie pulsa porque están mal posicionados o tienen poco contraste visual.
Rage clicks: clics repetidos y frustrados en un mismo elemento, señal clara de un bug o una expectativa no cumplida.

Un caso típico: una tienda de ropa descubre que el 34% de los clics en su página de producto van a la foto secundaria del producto en lugar de al botón "Añadir al carrito". Reorganizar la jerarquía visual incrementó el CVR un 18%.

2. Heatmap de scroll (scroll heatmap)

Muestra hasta qué punto de la página llegan tus visitantes antes de abandonar. Es crítico para decidir dónde colocar los elementos más importantes.

| Zona de la página | % usuarios que llegan (media ecommerce) | |---|---| | Above the fold (100%) | 100% | | Primer scroll (30-50%) | 70-80% | | Mitad de página | 40-60% | | Footer | 10-25% |

Si tu CTA principal está al 70% del scroll, estás perdiendo más de la mitad de tus visitantes antes de que lo vean. El heatmap de scroll lo demuestra en segundos.

3. Heatmap de movimiento de ratón (move heatmap)

Rastrea cómo se mueve el cursor por la pantalla. Aunque es menos preciso que el de clics, tiene un uso muy específico: identificar patrones de lectura. Los usuarios tienden a mover el ratón hacia donde dirigen la mirada, lo que permite detectar qué titulares y propuestas de valor captan atención y cuáles son ignorados.

También ayuda a detectar zonas de confusión: áreas donde el cursor "duda", haciendo movimientos erráticos que indican que el usuario no entiende qué hacer a continuación.

Herramientas para crear mapas de calor web

Hotjar

La herramienta más popular del mercado. Ofrece heatmaps, grabaciones de sesiones y encuestas en el mismo panel. Su plan gratuito incluye 35 sesiones diarias, suficiente para webs pequeñas. Los planes de pago comienzan en 32€/mes.

Mejor para: equipos que quieren una solución completa de research cualitativo sin configuración técnica.

Microsoft Clarity

Completamente gratuito, sin límite de sesiones. Incluye heatmaps, grabaciones y un panel con métricas de frustración (rage clicks, dead clicks, scroll excesivo). Integración nativa con GA4.

Mejor para: empresas que quieren heatmaps sin coste y no necesitan funcionalidades avanzadas como encuestas.

Crazy Egg

Pionero en el sector, con más de 20 años de historia. Ofrece heatmaps de clics, scroll y move, más una funcionalidad exclusiva: el confetti report, que filtra los clics por fuente de tráfico. Permite ver si los usuarios de Google Ads se comportan distinto a los orgánicos.

Mejor para: equipos que necesitan segmentar el comportamiento por fuente o campaña.

Cómo interpretar un mapa de calor web para mejorar conversiones

Paso 1: Define una hipótesis antes de mirar

El error más común es abrir un heatmap y empezar a buscar patrones sin un objetivo claro. Antes de analizar, pregúntate: ¿qué quiero saber? "Por qué el CTA de la homepage tiene un CVR del 1,2% cuando el benchmark del sector es 3,5%" es una pregunta válida. "Ver qué pasa" no lo es.

Paso 2: Cruza los datos con métricas cuantitativas

Un heatmap de scroll que muestra que el 60% de los usuarios no llega al formulario de contacto cobra todo su sentido cuando GA4 confirma que esa página tiene una tasa de rebote del 78%. Los datos cualitativos confirman el dónde, los cuantitativos validan la magnitud del problema.

Paso 3: Identifica patrones, no anomalías

Busca comportamientos consistentes, no excepciones. Si el 5% de los usuarios hace clic en un elemento inusual, puede ser ruido. Si el 40% ignora tu propuesta de valor principal y salta directamente al precio, eso es una señal de optimización clara.

Paso 4: Formula una hipótesis de mejora y testea

Los heatmaps no dan respuestas, dan pistas. La respuesta viene del test A/B. Si el heatmap muestra que nadie llega al CTA secundario en el footer, no elimines el footer: primero prueba a añadir un CTA visible en la sección de beneficios.

Errores frecuentes al usar mapas de calor

Analizar páginas con poco tráfico: con menos de 1.000 sesiones, los datos son estadísticamente irrelevantes. Prioriza las páginas con más tráfico.

Comparar dispositivos sin segmentar: el comportamiento en móvil y en escritorio es radicalmente distinto. Analiza siempre por dispositivo por separado.

Ignorar las grabaciones de sesiones: los heatmaps son promedios. Las grabaciones individuales muestran los casos extremos que explican las anomalías del mapa.

Actuar sobre el heatmap sin testear: un heatmap no es un resultado, es una hipótesis. Todo cambio basado en datos cualitativos debe validarse con un test controlado.

Del mapa de calor al test A/B: el flujo correcto

El flujo que seguimos en Boost con cualquier cliente es siempre el mismo:

Auditoría cuantitativa (GA4, embudos, segmentación por dispositivo)
Research cualitativo (heatmaps, grabaciones, encuestas on-site)
Formulación de hipótesis con impacto estimado
Priorización por potencial de conversión × facilidad de implementación
Test A/B con significancia estadística
Análisis de resultados y aprendizaje acumulado

Los mapas de calor ocupan el paso 2. Son una pieza esencial, pero no la única.

Si quieres empezar a usar mapas de calor de forma estratégica para mejorar las conversiones de tu web, en Boost podemos ayudarte a implementar el programa completo de CRO: desde la configuración de las herramientas hasta el análisis y los tests.

Descubre nuestros servicios de CRO o haz una auditoría gratuita de tu web con Scan&Boost y recibe un diagnóstico en minutos.

Adrià Vidal es fundador de Boost, agencia AI-first de CRO y analytics digital con oficina en Ciudad de Panamá, Barcelona, Miami y Tallinn.