≡En resumen
- Un mapa de calor muestra el qué (dónde clican, hasta dónde leen); las grabaciones y encuestas ayudan a entender el porqué.
- Microsoft Clarity es gratuita y sin límite de tráfico; Hotjar forma parte de Contentsquare y tiene plan gratuito y planes de pago por sesiones.
- En España estas herramientas requieren consentimiento de cookies; Clarity exige señales de consentimiento para visitas del EEE desde el 31 de octubre de 2025.
- Segmenta siempre por dispositivo y fuente de tráfico: un mapa que mezcla móvil y escritorio engaña.
- Cada hallazgo debe convertirse en una hipótesis y, si hay tráfico suficiente, en un test A/B medido en analítica.
01 ¿Qué son los mapas de calor web y qué tipos hay?
Un mapa de calor superpone colores sobre una página: los tonos cálidos marcan donde se concentra la actividad de los usuarios y los fríos, donde apenas hay interacción. Si quieres la definición completa, la tienes en nuestro diccionario, en la entrada heatmap o mapa de calor. Aquí vamos a lo práctico: qué herramienta elegir, cómo instalarla cumpliendo la ley y cómo convertir lo que ves en mejoras medibles.
En los proyectos de optimización de la conversión que llevamos, los mapas de calor son casi siempre la primera herramienta cualitativa que instalamos, justo después de comprobar que la analítica mide bien.
Mapa de clics
Dónde hacen clic o tocan los usuarios, incluidos elementos que no son enlaces. Detecta llamadas a la acción ignoradas y clics frustrados.
Mapa de scroll
Qué porcentaje de visitantes llega a cada altura de la página. Te dice si tu mensaje clave o tu formulario se ven.
Mapa de movimiento o de áreas
Por dónde pasa el ratón o qué zonas acumulan interacción. Útil en escritorio como aproximación a la atención.
Grabaciones de sesiones
Reproducciones anónimas de visitas reales. No son un mapa de calor, pero explican el porqué de lo que el mapa muestra.
02 Hotjar vs Microsoft Clarity: comparativa
Son las dos herramientas de mapas de calor más buscadas en España y cubren lo esencial de forma parecida. La diferencia está en el precio, los límites, las funciones de investigación y cómo encajan con el resto de tu stack.
| Aspecto | Microsoft Clarity | Hotjar (Contentsquare) |
|---|---|---|
| Precio | Gratis, sin límites de tráfico según Microsoft | Plan gratuito y planes de pago por volumen de sesiones mensuales |
| Volumen | Hasta 100.000 sesiones grabadas por proyecto y día | El plan gratuito incluye 200.000 sesiones mensuales; más con planes de pago |
| Mapas de calor | Clics, scroll, áreas y conversión | Mapas de calor y zonas de interacción, según plan |
| Grabaciones | Sí, se conservan 30 días (favoritas y una muestra, hasta 9 meses) | Sí, con retención según plan |
| Encuestas y feedback | No | Sí, con límite de respuestas en el plan gratuito |
| IA | Copilot: resúmenes de sesiones y de mapas de calor, chat | Sense: chat y resúmenes con IA en planes de pago |
| Apps móviles | SDK para Android, iOS, Flutter y React Native | Producto separado de Contentsquare para apps |
| Integración con analítica | Integración con Google Analytics | Integraciones con herramientas de analítica y marketing |
03 Cuál elegir según tu caso
Elige Microsoft Clarity si…
Quieres empezar sin coste, tienes mucho tráfico, necesitas grabaciones de una app hecha con Flutter o React Native o te basta con mapas y grabaciones para priorizar cambios.
Elige Hotjar si…
Además de observar quieres preguntar: encuestas en la página, widgets de feedback y análisis de respuestas con IA, todo en la misma herramienta.
Usa las dos con cabeza
Algunas empresas combinan Clarity para mapas y grabaciones con encuestas de otra herramienta. Si lo haces, cuida el peso de los scripts y declara ambas en tu política de cookies.
04 Cómo instalarlos cumpliendo el RGPD y la ley de cookies
En España, el artículo 22.2 de la LSSI exige consentimiento informado para guardar o leer información en el dispositivo del usuario, salvo para lo estrictamente necesario. La guía de cookies de la AEPD aclara que las cookies analíticas no están exentas por sí mismas, y su guía sobre medición de audiencia solo admite la exención para estadísticas agregadas y anónimas con condiciones estrictas, algo que las grabaciones y mapas de calor por sesión no cumplen. En la práctica: trátalos como cookies que requieren consentimiento.
-
1
Configura tu plataforma de consentimiento
Tu banner de cookies (CMP) debe tener una categoría de analítica que el usuario pueda aceptar o rechazar con la misma facilidad.
-
2
Crea el proyecto en la herramienta
Da de alta tu web en Clarity o en Contentsquare y copia el código de seguimiento.
-
3
Instálalo condicionado al consentimiento
Con Google Tag Manager, dispara la etiqueta solo cuando exista consentimiento de analítica. En Clarity, envía la señal con su API de consentimiento (consentv2) o mediante una CMP compatible.
-
4
Enmascara los datos sensibles
Comprueba que los campos de formulario y cualquier dato personal visible se ocultan en las grabaciones. Clarity enmascara siempre el texto escrito en los campos.
-
5
Actualiza la política de cookies
Nombra la herramienta, su finalidad, las cookies que usa y su duración.
-
6
Verifica que funciona
Navega aceptando y rechazando cookies y comprueba en la herramienta qué sesiones se registran en cada caso.
05 Cómo leer mapas de clics, de scroll y grabaciones
El error más común es mirar un mapa de calor como si fuera una foto bonita. Léelo siempre con una pregunta concreta y segmentado: dispositivo, fuente de tráfico y, si puedes, usuarios que convierten frente a los que no.
| Informe | Qué mirar | Qué suele indicar |
|---|---|---|
| Mapa de clics | Clics en imágenes, textos o iconos que no son enlaces | El usuario espera ampliar información o navegar desde ahí |
| Mapa de clics | Llamada a la acción principal con pocos clics | Mensaje poco claro, botón poco visible o propuesta que no convence |
| Mapa de scroll | Caída brusca a una altura concreta | Un bloque que parece el final de la página o que aburre |
| Mapa de scroll | Formulario o precio por debajo del punto al que llega la mayoría | Información clave que casi nadie ve |
| Grabaciones | Clics de rabia, clics muertos, vueltas atrás rápidas | Frustración: algo no responde o no era lo esperado |
| Grabaciones | Campos de formulario que se rellenan y se borran | Dudas o errores de validación en ese campo |
57 %
del tiempo de visualización se concentra en la parte visible sin hacer scroll
Fuente: Nielsen Norman Group, Scrolling and Attention (2018)
74 %
del tiempo se dedica a las dos primeras pantallas de la página
Fuente: Nielsen Norman Group, Scrolling and Attention (2018)
06 8 hallazgos típicos que se convierten en tests A/B
Estos patrones aparecen una y otra vez cuando analizamos webs de servicios, landings de campaña y tiendas online. Ninguno es una verdad universal: cada uno es una hipótesis que merece un test A/B si tu tráfico lo permite.
| Hallazgo en el mapa o las grabaciones | Hipótesis | Test que proponemos |
|---|---|---|
| 1. Muchos clics en imágenes de producto que no amplían | Los usuarios quieren ver el detalle | Añadir zoom o galería al hacer clic |
| 2. La mayoría no llega al formulario en móvil | El formulario está demasiado abajo | Subir el formulario o añadir un botón fijo que lleve a él |
| 3. Clics de rabia en un botón de enviar | La validación falla sin explicar por qué | Mensajes de error junto al campo y validación en tiempo real |
| 4. Clics en el texto de precios o en «desde…» | Falta claridad sobre el coste real | Mostrar precio completo o un desglose visible |
| 5. Caída de scroll tras un bloque grande de imagen | Parece el final de la página | Reducir su altura o dejar asomar el siguiente bloque |
| 6. Clics en el logo o en el menú desde una landing | El usuario busca más información antes de decidir | Añadir preguntas frecuentes o prueba social en la propia landing |
| 7. Campos que se rellenan y se borran | La pregunta genera desconfianza o dudas | Eliminar el campo, hacerlo opcional o explicar por qué se pide |
| 8. Muchas vueltas atrás rápidas desde una campaña | El anuncio promete algo que la página no muestra arriba | Alinear titular y primer bloque con el mensaje del anuncio |
07 Proceso de CRO con mapas de calor, paso a paso
-
1
Parte de los datos cuantitativos
En analítica, localiza las páginas con más tráfico y peor conversión o mayor abandono. Ahí es donde un mapa de calor rinde más.
-
2
Define la pregunta
Por ejemplo: «¿Por qué el 70 % de los usuarios móviles abandona la página de presupuesto sin enviar el formulario?».
-
3
Recoge mapas y grabaciones segmentados
Separa móvil y escritorio y, si puedes, tráfico de pago y orgánico.
-
4
Formula hipótesis y priorízalas
Puntúa cada idea por impacto esperado, confianza y facilidad, y empieza por las que más puntúen.
-
5
Lanza el test o el cambio
Con tráfico suficiente, test A/B; con poco tráfico, cambio directo y comparación de periodos equivalentes.
-
6
Mide en analítica y documenta
Valida el resultado con los eventos clave de tu analítica y guarda el aprendizaje, gane o pierda la variante.
Para que el primer paso funcione necesitas eventos de conversión bien configurados; lo explicamos en la guía para configurar Google Analytics 4 paso a paso. Y si buscas ideas de cambios probados, repasa nuestras 15 tácticas para mejorar la conversión de tu web.
08 Dónde sacan más partido: landings, tiendas y productos digitales
Landings de campaña
Cada clic cuesta dinero, así que cualquier fricción se paga. Los mapas de scroll y de clics son la forma más rápida de saber si el mensaje y el formulario funcionan.
Tiendas online
Fichas de producto, carrito y checkout: las grabaciones revelan dudas sobre envíos, tallas o métodos de pago que ningún informe numérico muestra.
Apps y productos SaaS
En el onboarding y en las pantallas clave, las grabaciones enseñan dónde se atascan los usuarios nuevos.
Muchos hallazgos acaban en un rediseño parcial. Si es tu caso, te interesa saber cómo diseñar una landing page que convierta, cómo afrontar el diseño de tiendas online pensando en el checkout o apoyarte en un servicio de diseño UI/UX que combine estos datos con pruebas con usuarios. Te contamos qué métodos existen en nuestra guía de investigación UX.
Preguntas frecuentes
Es un informe visual que colorea la página según la actividad de los usuarios: dónde hacen clic, hasta dónde hacen scroll o qué zonas concentran la interacción. Sirve para detectar qué elementos funcionan y cuáles se ignoran.
Sí. Microsoft indica que es un servicio gratuito para siempre y sin límites de tráfico, aunque graba hasta 100.000 sesiones por proyecto y día y conserva las grabaciones 30 días, salvo las marcadas como favoritas y una muestra.
Hotjar está integrado en Contentsquare, que ofrece un plan gratuito y planes de pago según las sesiones mensuales, desde 49 al mes para 7.000 sesiones en su web de precios de septiembre de 2026. Las encuestas y el feedback tienen su propio límite de respuestas.
Para mapas de calor y grabaciones, Clarity cubre lo esencial gratis y sin límite de tráfico. Hotjar compensa si también quieres encuestas y feedback en la página y funciones de análisis con IA dentro de la misma plataforma.
En España, sí en la práctica: la LSSI exige consentimiento para las cookies no necesarias y la AEPD no considera exentas las analíticas salvo en supuestos muy limitados de medición agregada. Clarity, además, exige señales de consentimiento para visitas del EEE desde octubre de 2025.
Una analítica bien configurada, como Google Analytics 4, para saber dónde se pierden usuarios; una herramienta de mapas de calor y grabaciones para entender por qué; y una forma de lanzar y medir tests A/B o cambios controlados.
Microsoft Clarity tiene SDK para apps de Android, iOS, Flutter y React Native. Hotjar funciona en webs, incluida la versión móvil; para apps nativas Contentsquare ofrece un producto aparte.
Fuentes consultadas
Sobre el autor
Raúl Aránega Segura
CEO y especialista SEO en appyweb
Fundador de appyweb. Más de una década posicionando webs y tiendas online en Google y, ahora, en las respuestas de la IA.
Ver perfil en LinkedIn ↗
