¿Qué es un mapa de calor? Mapas de clics y scroll explicados | We.Inc
Qué es un mapa de calor web, cómo se recogen los mapas de clics, de scroll y de atención, qué hacer con la privacidad y el consentimiento, y una demo en vivo que dibuja un mapa de calor con tus propios clics.
Un mapa de calor web es una imagen de tu página con color superpuesto que muestra dónde hicieron clic los visitantes, hasta dónde se desplazaron o dónde pasaron tiempo. Los colores cálidos indican muchos visitantes y los fríos, pocos. Un pequeño script en la página registra las interacciones, y la herramienta las suma a lo largo de muchas visitas.
Tipos habituales de mapas de calor
Tipo
Qué muestra
Qué pregunta responde
Mapa de clics
Dónde hizo clic o tocó la gente
¿Alguien pulsa mi botón principal?
Mapa de scroll
El porcentaje de visitantes que llegó a cada altura de la página
¿La gente llega a ver mis precios?
Mapa de áreas
El total de clics dentro de una zona que seleccionas
¿Cuánto se usa el menú en conjunto?
Mapa de atención
El tiempo dedicado a cada parte de la página
¿Qué sección retiene a la gente?
Mapa de movimiento
Por dónde pasó el puntero del ratón, disponible en algunas herramientas
¿Qué atrae a los visitantes de escritorio?
La analítica te dice cuántas personas visitaron una página. Un mapa de calor muestra qué hicieron una vez allí. En el sitio de un pequeño negocio, eso a menudo resuelve el misterio de un vistazo: el botón que nadie pulsa, la foto que todos tocan esperando un enlace, la oferta situada por debajo del punto donde la mayoría deja de desplazarse. Prueba la demo para ver cómo se construye uno.
Elige una herramienta de mapas de calor y crea un proyecto para tu sitio.
Añade el script de seguimiento de la herramienta a todas las páginas, o instala su plugin para tu creador de sitios.
Configura el consentimiento si tienes visitantes de regiones que lo exigen, y elige cuánto texto de la página puede registrar la herramienta.
Espera a tener unos cientos de visitas en la página que te interesa antes de sacar conclusiones.
Abre el mapa de calor de esa página, revisa móvil y escritorio por separado y apunta un cambio para probar.
Mira los móviles y los ordenadores por separado. La misma página se maqueta de forma distinta, así que los mapas mezclados se emborronan.
Los clics en elementos que no son enlaces, como fotos o texto en negrita, significan que la gente espera que hagan algo.
Si la mayoría de los visitantes deja de desplazarse antes de tu llamada a la acción, súbela en lugar de hacerla más grande.
Los clics de rabia, cuando alguien toca el mismo punto una y otra vez, suelen señalar un elemento roto o lento.
Trata un mapa de calor como una fuente de ideas y luego confirma el cambio con un test A/B o con datos de conversión.
Preguntas frecuentes
¿Hay herramientas de mapas de calor gratuitas?
Sí. La documentación de Microsoft describe Clarity como un servicio gratuito para siempre, con mapas de clics, scroll, áreas, conversión y atención, además de grabaciones de sesiones. Otras herramientas como Hotjar también ofrecen mapas de calor; consulta sus planes actuales en sus propios sitios.
¿Cuántos visitantes necesito para un mapa de calor útil?
No hay una cifra oficial. Algunas herramientas dibujan un mapa con muy poco tráfico, pero un puñado de visitas muestra sobre todo hábitos individuales. Espera a que el patrón deje de cambiar al llegar más visitas antes de rediseñar nada.
¿Los mapas de calor necesitan consentimiento de cookies?
Depende de la herramienta y de la ley del lugar donde estén tus visitantes. Clarity, por ejemplo, empezó a exigir señales de consentimiento para las visitas del EEE, Reino Unido y Suiza el 31 de octubre de 2025. Esto no es asesoramiento legal; consulta las normas que se te aplican.
¿Las herramientas de mapas de calor registran lo que escribe la gente?
Las buenas lo ocultan. La documentación de Clarity dice que el contenido de los campos de texto y los desplegables se enmascara en todos los modos, y su modo predeterminado Balanced también enmascara números y direcciones de correo.
¿Qué diferencia hay entre un mapa de calor y una grabación de sesión?
Un mapa de calor suma muchas visitas en una sola imagen de una página. Una grabación de sesión reproduce el recorrido de un visitante por varias páginas. Los mapas de calor muestran patrones; las grabaciones ayudan a explicar un caso raro concreto.
Cómo se recogen los datos
Un script en tu página escucha los clics, los toques y el desplazamiento y envía pequeños registros a la herramienta: qué elemento se pulsó, el ancho de la página, hasta dónde bajó el visitante. Después la herramienta agrupa los registros por página y dispositivo y colorea la página.
Las mejores herramientas asocian los clics a elementos de la página en lugar de a posiciones de pantalla en bruto. La documentación de Clarity dice que sus mapas de clics usan elementos y no la posición absoluta del ratón, de modo que los mapas siguen siendo precisos en distintos tamaños de pantalla y diseños responsive.
Ajustes de privacidad que conviene elegir desde el primer día
Decide cuánto texto de la página puede guardar la herramienta. Clarity ofrece Strict, que enmascara todo el contenido, Balanced, que enmascara el contenido sensible como números y direcciones de correo, y Relaxed, que solo enmascara los campos de formulario y los desplegables.
También puedes marcar partes concretas de una página como privadas. En Clarity se hace con el atributo data-clarity-mask, que se muestra en el código de abajo. Clarity también indica que no debe usarse en sitios dirigidos a menores de 18 años.
Código que puedes necesitar
Dos fragmentos cortos para sitios que usan Clarity. Ambos siguen la API publicada por Microsoft; los valores son de ejemplo.
Ocultar una parte de la página en las grabaciones
Añadir data-clarity-mask con el valor True enmascara ese elemento y todo lo que contiene, sea cual sea el ajuste general del sitio.
Indicar a Clarity que el visitante aceptó
Invoca esto desde tu banner de cookies después de que el visitante acepte. Si lo rechaza, Clarity funciona sin cookies, así que no hace falta ninguna llamada.
Cómo dibuja el calor la demo
Cada clic se convierte en un círculo difuminado creado con createRadialGradient. Los círculos superpuestos se acumulan, así que las zonas con más actividad se oscurecen.
Crea un mapa de calor con tus propios clics
Haz clic o toca en cualquier parte de la página de ejemplo de abajo. Cada clic añade calor. No se envía nada: los clics se quedan en esta pestaña del navegador.
Página de ejemplo. Haz clic para añadir calor en ese punto.
Clics registrados: {n}
Borrar clics
Mostrar la página bajo el calor
Carta
Pedir
Visítanos
Pan de masa madre recién hecho, horneado a las 5am
Pide antes de las 10pm y recógelo a la mañana siguiente.