Cómo crear un mapa de calor web

Mapa de calor web
5
(1)

¿No te encantaría conocer cada paso que dan los usuarios en tu página web? Dónde hacen clic, por dónde pasan el ratón, en qué punto del post deciden abandonar la página… Un mapa de calor web te permite conocer toda la información que necesitas para saber cómo se comportan tus visitas en tu web y utilizar todos estos datos para trabajar y mejorar la experiencia de usuario, la usabilidad y las conversiones en tu sitio web.

Es muy probable que, si nunca has trabajado con una aplicación así, no tengas muy claro qué es un mapa de calor web, cómo funciona y mucho menos cómo crear uno, así que vamos a empezar por el principio.

A continuación voy a mostrarte todo lo que necesitas saber para «espiar» a tus visitas en tu web 😉

¿Qué es un mapa de calor web?

Un mapa de calor web o heat map es una herramienta que permite hacer un seguimiento de la actividad de tus visitas en tu web mediante una representación gráfica basada en un código de colores de fácil lectura y representación.

En otras palabras, podemos definir un mapa de calor como una herramienta que nos permite conocer mediante colores qué elementos o áreas de nuestra web son más interesantes para el usuario.

Gracias a esta herramienta podemos conocer datos tan importantes como:

  • Dónde hacen clic los usuarios
  • Por dónde pasan el ratón
  • Hasta dónde hacen scroll en nuestra web

Escala de colores en un mapa de calor web

Todos los mapas de calor web suelen utilizar una escala de colores bastante estandarizada. Los tonos azules y verdes se denominan como «zonas frías», es decir, son aquellas partes de la web en las que no hay demasiada interacción por parte de los usuarios. En cambio, los tonos naranjas y rojos representan las «zonas calientes», es decir, los elementos o partes de nuestra web que tienen mucha interacción.

De menos a más interacción, los mapas de calor web siguen una escala de colores como esta:

Escala de colores de un mapa de calor web

Y como una imagen vale más que mil palabras, aquí te dejo un ejemplo de cómo es un mapa de calor web:

Ejemplo de mapa de calor de Crazzy Egg

Ejemplo de mapa de calor de Crazzy Egg

Tipos de mapas de calor

En función de la información que queramos recopilar del comportamiento de nuestras visitas, es necesario diferenciar tres tipos diferentes de heat maps:

  • Mapas de calor de clics: Este tipo de mapas de calor recogen las áreas de la web que registran el mayor número de clics y son útiles para detectar posibles fugas de conversión.
  • Mapas de calor de scroll: Fundamentalmente nos sirven para conocer cuánto de interesante es nuestro contenido para nuestras visitas. ¿En qué parte de la web paran de leer? ¿Llegan hasta abajo? ¿Qué información se están perdiendo?
  • Mapas de calor de movimiento: Suponiendo que el usuario mueve la vista en consonancia con el ratón, este tipo de mapas de calor pueden ser útiles para conocer qué zonas de la web reciben mayor atención. De todas formas, podríamos decir que con todos los cambios a nivel tecnológico que han ocurrido en los últimos años este tipo de mapas de calor son los menos precisos o menos analíticos. ¿Por qué? Pues por ejemplo, el uso de tablets o portátiles ha crecido una barbaridad y en ellos el movimiento del ratón no se asemeja casi nada a cómo movemos el ratón cuando estamos sentados frente a nuestro ordenador de sobremesa.

¿Qué utilidades tiene un mapa de calor web?

Como ya dijimos un mapa de calor web se utiliza para conocer qué elementos o partes de tu web reciben más interacción. Sabiendo esto, podemos implementar mejoras para ofrecer una mayor experiencia de usuario o aprovechar las zonas calientes para introducir cambios o botones que mejoren las conversiones de una web.

Imagina que en la parte superior de tu web tienes un botón de suscripción a un newsletter, pero mediante el mapa de calor compruebas que es una zona fría en la que no suele haber interacción por parte de tus usuarios. Puedes tomar dos decisiones:

  • Cambiar el botón y hacerlo más atractivo tanto a nivel de copy como de diseño.
  • Cambiar la caja de suscripción para una zona de tu web con más interacción.

Otro ejemplo rápido. Creas un mapa de calor en tu página web y descubres que muchos clientes hacen clic en un icono que no lleva a ningún enlace. Esto puede perjudicar la experiencia de usuario al ver que no van a donde quieren ir, por lo que deberías replantearte dos cosas:

  • Modificar el diseño del icono para evitar que parezca «clicable».
  • Introducir un enlace interno a tu web.

O, ¿de qué te sirve añadir el botón de contratar o comprar un producto en una zona a la que los usuarios ya no llegan haciendo scroll?

Son pequeños cambios que pueden mejorar significativamente tus conversiones 🙂

¿Cómo crear un mapa de calor?

Existen un montón de herramientas para crear un mapa de calor en tu página web. La gran mayoría son herramientas de pago, pero con pruebas gratuitas para que puedas hacerte una idea de cómo funcionan antes de tener que contratar el servicio.

El funcionamiento de todas ellas es bastante similar. Una vez que te suscribes, la herramienta te proporciona un script que tienes que añadir en el código de tu web para que pueda empezar a recopilar los datos.

Si no sabes muy bien qué herramienta elegir, no te preocupes. A continuación te dejo una lista con las mejores herramientas para añadir un heat map en tu página web.

Las 4 mejores herramientas para crear un mapa de calor

Dicen que para gustos se hicieron los colores, así que aquí te muestro varias herramientas para que tú puedas elegir la que mejor se adapte a lo que estás buscando.

1. Crazy Egg

Quizá una de las herramientas para crear mapas de calor más conocidas y, aunque no ofrezca una versión gratuita, tienes un período de 30 días para probarla sin ningún coste. Es una de mis recomendaciones por lo intuitiva y fácil que es de utilizar, además de todas las opciones que proporciona.

Puedes obtener desde mapas de calor en función a los clics que realizan en tu web, mapas de scroll e informes conffeti, es decir, un mapa de clics avanzado que te permite conocer el comportamiento de tus visitas en función de la procedencia de tu tráfico. Además, cuenta con una opción para hacer tests A/B que puede ser interesante para mejorar las conversiones de tu web.

Ejemplo de mapa de calor de clics de Crazy Egg

Ejemplo de mapa de calor de clics de Crazy Egg.

2. Hotjar

Hotjar es otra de mis favoritas. Al igual que la anterior, también es pago, pero dispones de 15 días para probarla de forma gratuita en tu web y sin introducir los datos de tu tarjeta de crédito.

Esta herramienta se encarga de recopilar todos los datos de tu web para ofrecerte mapas de calor de clics, de movimiento del ratón o scroll. Además, ofrece una opción de recording, es decir, grabaciones de las interacciones de los usuarios en tu web. Para que me entiendas, puedes ver en formato vídeo cómo se comportó un usuario en tu web, dónde hizo clic, a qué secciones del menú accedió…

Esta función es muy útil porque te ayuda a entender cómo se comporta un usuario cualquiera en tu sitio web o qué aspectos son los que generan más problemas o confusión en la navegación.

Ejemplo de mapa de calor de scroll de Hotjar

Ejemplo de mapa de calor de scroll de Hotjar.

3. Heatmap

Si estás buscando una opción gratuita, esta es muy buena. Aunque posee planes más avanzados, la versión más básica (y gratuita) te permite utilizarla todo el tiempo que tú quieras.

Aunque no es tan completa como las anteriores, tienes un tiempo de retención de los datos de hasta 6 meses, 1 millón de visitas por mes y tendrás acceso a los datos de 5 páginas de tu web. No es tan completa como las anteriores, pero no está nada mal 🙂

Ejemplo de mapa de calor de Heatme

Ejemplo de mapa de calor de Heatmap.

4. Yandex.Metrica

Otra alternativa gratuita es Yandex Metrika. Realmente se trata de una alternativa a Google Analytics, con todo tipo de métricas e informes relacionados con el tráfico web (audiencia, procedencia, canales, conversiones…), pero con una gran diferencia: los mapas de calor web.

En el panel de administración tienes disponibles varias opciones para conocer el comportamiento de tus usuarios, desde grabaciones de sesiones hasta cuatro tipos de mapas de calor diferentes.

Si buscas una opción totalmente gratuita, esta es una de las mejores.

Ejemplo de mapa de calor de clics de Yandex Métrica

Ejemplo de mapa de calor de clics de Yandex.Metrica.

Cómo añadir un mapa de calor en WordPress

Cualquiera de las herramientas que acabo de mostrarte sirven para WordPress, basta con añadir la línea de código que ellos te proporcionan en tu web y ya estaría funcionando. Aunque, como ya sabes, este gestor de contenidos siempre nos lo pone un poquito más fácil.

Formularios de contacto, seguridad, redes sociales… ¡hay plugins para todo! Y, sí, también hay plugins para crear mapas de calor web.

Algunas de las opciones más utilizadas son Smartlook o Aurora Heatmap, ambos disponibles en el repositorio oficial de WordPress.

Puede interesarte: Cómo instalar un plugin en WordPress.

Conclusión…

Un mapa de calor web o heat map te ayudará a conocer un poquito mejor cómo se comportan tus visitas una vez que aterrizan en tu web. Dónde hacen clic, por dónde mueven el ratón, a qué áreas de la web prestan más atención, hasta dónde llegan… ¿Te imaginas lo que supone tener en tu poder toda esta información?

Como hemos visto, existen un montón de herramientas que te permiten analizar toda esta información. Basta con añadir un código que permita recolectar la información en tu web y ¡listo! Además, si trabajas con WordPress existen plugins que te lo ponen todavía más fácil 🙂

Ahora es tu turno. Cuéntanos, ¿preparado para añadir un mapa de calor en tu página web? ¿Has probado ya alguna de estas herramientas?

¡Puntúa este artículo!

Total votos: 1. Promedio: 5

María Acibeiro

Dicen que si trabajas en lo que te gusta, no tendrás que trabajar nunca más. Así que, por aquí nos veremos mucho más de lo que te imaginas 😜

No hay comentarios

Deja un comentario