Heatmaps para eCommerce: cómo usar mapas de calor para subir tu conversión
Heatmaps para eCommerce: guía práctica con 4 herramientas (Hotjar, Microsoft Clarity, FullStory, Crazy Egg). Cómo interpretar rage clicks, dead clicks y scroll depth para tomar decisiones CRO basadas en datos.
Heatmaps para eCommerce: cómo usar mapas de calor para subir tu conversión
Los heatmaps (mapas de calor) son la herramienta CRO que muestra lo que el usuario realmente hace, no lo que dice hacer en encuestas ni lo que tú crees que hace. Bien interpretados, son tu mejor amigo para detectar fricciones invisibles en Google Analytics.
(Este artículo es parte de nuestra guía completa de CRO para eCommerce. Si quieres ver el método completo, empieza por ahí.)
Qué son exactamente los heatmaps para eCommerce
Un heatmap es una representación visual de dónde hacen click, hasta dónde scrollean y cómo se mueven los usuarios en una página. Hay 4 tipos principales:
1. Click map (mapa de clicks)
Muestra dónde hace click la gente en la página. Las zonas más rojas son las más clickadas.
Para qué sirve en eCommerce:
2. Scroll map (mapa de scroll)
Muestra hasta dónde scrollea la gente en la página. Las zonas rojas son las que ven casi todos, las azules solo algunos.
Para qué sirve en eCommerce:
3. Move map (mapa de movimiento del ratón)
Muestra cómo se mueve el ratón del usuario. Útil para entender el patrón de lectura.
Para qué sirve en eCommerce:
4. Session recording (grabación de sesión)
No es exactamente un heatmap pero va de la mano: grabación en vídeo de lo que un usuario real hizo en la página (clicks, scroll, movimientos, formularios, etc.).
Para qué sirve en eCommerce:
Las 4 mejores herramientas de heatmaps para eCommerce en 2026
1. Microsoft Clarity (gratis, recomendado para empezar)
Ideal para: tiendas que empiezan con CRO o que tienen presupuesto cero. Es la mejor opción free.
2. Hotjar (freemium)
Ideal para: tiendas que quieren combinar heatmaps con encuestas on-site.
3. FullStory (corporativo)
Ideal para: empresas con >100k visitas/mes que necesitan análisis avanzado.
4. Crazy Egg (freemium)
Ideal para: tiendas que quieren A/B testing + heatmaps en una sola herramienta.
Mi recomendación: empieza con Clarity + Hotjar
Con esas 2 herramientas tienes el 80% de lo que necesitas. Coste: 0 €.
Cómo interpretar los heatmaps (con ejemplos)
Ejemplo 1: rage click en CTA
Lo que ves en Clarity:
Diagnóstico: el usuario ESPERA un botón que no existe. Falta un CTA en esa zona.
Solución: añadir un botón sticky "Ver carrito" en esa posición.
Ejemplo 2: scroll bajo en ficha de producto
Lo que ves en scroll map:
Diagnóstico: la info importante (envío, devoluciones) está fuera del scroll natural. La gente no la ve y abandona.
Solución: añadir sticky bar con "Envío gratis + Devolución 30 días" visible en todo momento. O mover esa info más arriba.
Ejemplo 3: dead clicks en imagen de producto
Lo que ves en Clarity:
Diagnóstico: el usuario QUIERE ver la foto en grande antes de comprar. No hay lightbox.
Solución: implementar lightbox/zoom en las fotos. Coste: 1-2 días, impacto: +5% en conversión.
Ejemplo 4: abandono en formulario
Lo que ves en grabación:
Diagnóstico: el campo teléfono genera fricción. Quizás:
Solución: hacer el campo opcional (en España, el teléfono no es obligatorio para ecommerce B2C). O cambiar placeholder a "Opcional".
El workflow CRO con heatmaps: 5 pasos
Paso 1: instala Clarity en tu sitio (10 minutos)
`html `
Necesitas crear el proyecto en clarity.microsoft.com, copiar el ID, y pegarlo. En 24h ya tienes datos.
Paso 2: define qué quieres medir (1 día)
No mires "todo". Enfócate en 1-2 páginas que sean cuellos de botella.
Paso 3: recoge 30-50 sesiones (1-2 semanas)
Configura Clarity para filtrar:
Filtro clave: en Clarity, filtra por "session duration >30s" para ver gente que realmente interactuó, no rebotes.
Paso 4: identifica fricciones (2-3 horas)
Con las 50-100 sesiones, haz una lista de fricciones:
Paso 5: prioriza y testea (1 día + tests en semanas)
Para cada fricción, formula una hipótesis y un test A/B. No arregles todo a la vez. Una variable por test, 2-3 semanas por test.
Errores comunes con heatmaps
❌ "Mirar los heatmaps sin actuar"
Recoger datos sin tomar decisiones es ejercicio de ego. Cada heatmap debe terminar en 1-3 hipótesis testeables.
❌ "Optimizar para el heatmap, no para el usuario"
A veces un heatmap "malo" es correcto: la gente no hace click en algo porque NO debería hacerlo. No añadas un botón solo porque tiene dead clicks.
❌ "Confiar solo en heatmaps"
Los heatmaps son cualitativos. No dicen "por qué". Combínalos con:
❌ "Comparar tu heatmap con el de la competencia"
Cada sitio tiene su público. Lo que funciona en Amazon no funciona en una tienda de barrio.
Conclusión: heatmaps son el microscopio del CRO
Sin heatmaps, estás optimizando a ciegas. Con heatmaps bien interpretados, ves fricciones que ni Google Analytics ni las encuestas detectan.
Empieza con Microsoft Clarity (gratis). En 24h tienes datos. En 1 semana tienes fricciones identificadas. En 1 mes tienes un playbook CRO basado en comportamiento real.
¿Necesitas ayuda para interpretar tus heatmaps? Escríbeme a hola@mjora.studio — primera consulta gratuita de 30 min.
---
Lee los 12 puntos críticos de auditoría CRO o los 7 mejoras de checkout optimization.
