Aprende / Guías / Guía de heatmaps
Cómo crear un heatmap (gratis)
Un heatmap o mapa de calor es una representación de datos mediante una escala de colores, que normalmente va del azul (colores fríos para indicar las partes menos populares) al rojo (colores cálidos para señalar los elementos más populares). Puedes crear un mapa de calor de datos con un editor de hojas de cálculo como Excel. También puedes generar un mapa de calor de un sitio web utilizando una herramienta gratuita, como Hotjar.
En este tutorial, te explicamos cómo utilizar Hotjar para crear heatmaps que te ayuden a comprender cómo utiliza la gente tu sitio web. Por ejemplo, podrás averiguar en dónde hacen clic o qué les frustra. Con estos datos, podrás optimizar tu sitio web para mejorar las conversiones, la experiencia de usuario (UX) y las métricas importantes para tu empresa.
Regístrate para obtener una cuenta gratuita de Hotjar, añade el código de seguimiento a tu sitio web y empieza a utilizar heatmaps hoy mismo.
En esta guía para hacer un mapa de calor te hablamos sobre:
Cómo crear un heatmap gratis con Hotjar
Para generar un heatmap de cualquier sitio web o página de producto, necesitas una sofisticada herramienta de mapas de calor, como Hotjar. Después de recopilar y representar los datos del mapa de calor, tendrás pistas sobre cómo utilizan tu sitio web los usuarios. Por ejemplo, podrás averiguar en dónde hacen clic, qué les frustra y en qué parte de la página disminuye su atención.
🔥 ¿Estás dando tus primeros pasos con Hotjar?
Si necesitas ayuda para configurar tu primer heatmap de Hotjar, visita nuestro Centro de ayuda y consulta el artículo sobre cómo configurar un mapa de calor con Hotjar.
¿Todavía no has probado Hotjar? Aprovecha nuestro plan gratuito para siempre o la prueba gratuita de los planes Plus y Business para crear tu primer heatmap con nuestra herramienta:
Visita la página sobre nuestra herramienta para generar mapas de calor de sitios web y crea una cuenta gratis (si prefieres probar el plan Plus o Business, echa un vistazo a la página de precios).
Sigue las instrucciones para instalar el código de seguimiento de Hotjar en tu sitio web.
Una vez hayas instalado y verificado el código de seguimiento en tu sitio web, solo tienes que seguir los siguientes cinco sencillos pasos para generar tu primer heatmap.
1. Comprueba que la opción de captura de la sesión está habilitada
Para generar un mapa de calor de Hotjar, la captura de la sesión debe estar habilitada.
Si es necesario que la habilites manualmente, te aparecerá un mensaje en el menú desplegable de la parte superior derecha de la página avisándote de que la captura de la sesión está deshabilitada.
Haz clic en el enlace de la configuración del sitio y habilítala.
Ahora, en el mismo menú desplegable se te informará sobre la cobertura del tráfico. Haz clic en él para comprobar cuántas sesiones puedes capturar al día con el plan que tienes.
💡Consejo avanzado: Las conclusiones que saques de tus heatmaps serán más sólidas si recopilas datos no muestreados. Al hacer un seguimiento de todas las interacciones, tendrás la seguridad de que cada decisión que tomas se basa en todo el tráfico, y no en fragmentos de datos.
2. Crea un nuevo heatmap
Haz clic en el icono de Heatmaps, situado en el menú de la izquierda. A continuación, haz clic en el botón para crear un nuevo mapa de calor.
3. Indica la URL de la que quieres generar el heatmap
Utiliza el filtro de URL para indicar de qué página quieres mostrar el mapa de calor. Tienes varias opciones:
Generar un mapa de calor de una sola página. Por ejemplo: mitienda.com/calzado/zapatillas-de-deporte
Generar un mapa de calor combinado de varias páginas. Por ejemplo, mitienda.com/calzado
Si no tienes claro por dónde empezar, haz clic en la casilla y se te mostrará una lista de sugerencias de URL basadas en las páginas más populares de tu sitio.
4. Haz clic en la opción para ver el heatmap
Y ya está. Tu mapa de calor debería aparecer en 90 segundos o menos.
Basta con que una persona visite la página para que los mapas de calor de Hotjar empiecen a funcionar. Para empezar a identificar patrones en tu heatmap, quizás tengas que esperar a recibir algunos visitantes más.
La vista predeterminada te mostrará un mapa de clics de la versión para ordenador de tu sitio web. Haz clic en los diferentes iconos para alternar entre las sesiones de las distintas versiones (ordenador, móvil y tableta) y entre los diferentes tipos de mapas de calor (de clics o toques, de movimientos y de desplazamiento vertical).
Aquí tienes un ejemplo de cada tipo de mapa de calor:
5. Filtra los datos del heatmap
Puedes sacarle mucho más partido a tu mapa de calor filtrando los datos de la sesión para que se muestren solo los correspondientes a un periodo de tiempo determinado o una cohorte específica de usuarios.
Para filtrar el heatmap por fecha, haz clic en el menú desplegable del icono del calendario y selecciona un periodo de tiempo preestablecido (de 24 horas a 12 meses) o indica un intervalo de fechas personalizado.
Puedes añadir uno o varios filtros más haciendo clic en el botón correspondiente. Aquí tienes algunas ideas para empezar:
Filtrar por clics con rabia para averiguar con qué elementos de tu sitio web se frustran los usuarios.
Filtrar por nuevos usuarios para descubrir cómo se comportan las personas que visitan tu sitio web por primera vez.
Filtrar por navegador o sistema operativo para solucionar problemas técnicos específicos.
Puedes hacer el análisis lo simple o detallado que quieras. También puedes configurar atributos de usuario para filtrar los mapas de calor por métricas personalizadas, como "usuarios que crearon una cuenta en los últimos 30 días" o "clientes que gastaron más de 200 euros".
Si tienes alguna pregunta técnica o duda sobre este tema, consulta nuestra completa documentación de ayuda sobre los mapas de calor.
💡Consejo avanzado: Haz clic en la opción de zonas de interacción del panel de la derecha para superponer una cuadrícula sobre la página.
Se trata de una representación en una sola vista de todos los datos agregados de los mapas de clics, movimientos y desplazamiento vertical. Los diferentes tonos (u opacidad) indican los elementos de la página con los que más interactúan los usuarios (color más oscuro) o con los que menos (sin celda o color más claro).
Las zonas de interacción te ayudan a detectar las áreas de tu página que no reciben el cariño que merecen para que puedas mejorarlas.
Configura el mapa de calor en tu sitio web hoy mismo
Crea una cuenta gratuita de Hotjar, añade el código de seguimiento a tu sitio web y empieza a utilizar Heatmaps hoy mismo.
Las mejores páginas para recopilar datos en heatmaps
Con los mapas de calor puedes analizar detalladamente cualquiera de las páginas de tu sitio web. Nuestra recomendación es que empieces por las que sean más importantes para ti por el tráfico que capturan, por su usabilidad o por tus objetivos empresariales.
1. Página de inicio y páginas de destino
La página de inicio y las páginas de destino más importantes son las principales vías de acceso a tu sitio web. Suelen ser las que causan la primera impresión a tus visitantes y la razón por la que deciden si continúan navegando o abandonan el sitio web.
Con un heatmap de estas páginas, podrás averiguar cuál es la información que ven o con la que interactúan tus usuarios y cuáles son los elementos en los que hacen clic o ignoran.
2. Páginas populares
Las páginas más populares de tu sitio web (la página de producto más visitada, la entrada de blog con más comentarios, etc.) demuestran que algo estás haciendo bien. Con un heatmap, puedes averiguar cuál es la clave de su éxito y replicarlo en otras páginas.
3. Páginas de bajo rendimiento
Tus páginas con peor rendimiento son tan importantes como las anteriores, pero por la razón contraria. Puede que haya algún elemento que los usuarios están pasando por alto o con el que no están interactuando. Genera un mapa de calor de esas páginas, descubre qué es y soluciónalo.
Ponemos Hotjar en todas nuestras páginas. Si nuestra tasa de conversión baja después de un cambio, los heatmaps nos ayudan a identificar el problema y resolverlo. Hotjar nos ha ayudado a definir la estrategia de nuestro sitio web y a mejorar aún más la experiencia de nuestros clientes.
4. Páginas nuevas
Es normal que no tengas mucha información sobre las páginas web más recientes. Puedes empezar por crear un mapa de calor para obtener los primeros datos sobre ellas. Después, ve midiendo el rendimiento y optimizándolas a medida que vayas consiguiendo más insights sobre los usuarios.
💡Consejo avanzado: Si estás haciendo pruebas A/B para mejorar la tasa de conversión u otras métricas importantes para tu negocio, con la herramienta Heatmaps de Hotjar puedes generar mapas de calor de cada versión. Con esta opción podrás comparar las distintas versiones y averiguar por qué una funciona mejor que las otras, además de sacar ideas para futuras pruebas.
Aquí tienes algunos recursos que te ayudarán a aprovechar mejor los heatmaps:
Cómo utilizar los heatmaps para mejorar la experiencia de usuario de tu sitio web
Cómo utilizar heatmaps de comercio electrónico para aumentar las conversiones
Diferencias entre crear un heatmap en Excel o en Hotjar
Puedes generar un mapa de calor a partir de cualquier conjunto de datos numéricos utilizando un editor de hojas de cálculo, como Microsoft Excel, Google Sheets o LibreOffice. La forma más rápida de hacerlo es seleccionando los valores de celda oportunos y aplicándoles un formato condicional.
En Google Sheets, ve al menú de formato, selecciona la opción de formato condicional y, a continuación, la de escala de colores. Después, elige la paleta de colores que prefieras; por ejemplo, en el ejemplo siguiente se utiliza la de verde a amarillo a rojo. También puedes personalizar el punto mínimo (para el valor más bajo), el punto medio y el punto máximo (para el valor más alto).
Los heatmaps de Excel pueden ser útiles para detectar patrones y tendencias en datos numéricos, mientras que una herramienta de mapas de calor de sitios web como Hotjar va un paso más allá indicando la actividad de los usuarios sobre una captura de pantalla de la página. Así es mucho más fácil ver dónde hacen clic y por dónde se desplazan los visitantes, ¡sin tablas dinámicas ni cuadros de diálogo!
Próximos pasos
Los heatmaps son una forma rápida y visual de averiguar qué ocurre en un sitio web.
Lo bueno es que ahora ya sabes exactamente cómo crear un mapa de calor gratuito de un sitio web con Hotjar.
Y, lo que es todavía mejor, también podrás utilizar la herramienta Recordings de Hotjar cuando configures la captura de la sesión de tu sitio web. Con las grabaciones podrás ver cómo navega cada usuario por las diferentes páginas. Además, cuando quieras dar un paso más con la optimización de tu sitio web, tendrás todo listo para pedir feedback a los usuarios, hacer encuestas y hasta entrevistas a usuarios con tu cuenta de Hotjar.
