Actualmente, en marketing digital lo que funciona mejor para conseguir más ventas es entender cómo se comportan tus visitantes en tu web y, a partir de ahí, generar hipótesis de mejora. Ya hemos visto que los tests A/B son la mejor herramienta para mejorar la conversión: permiten crear varias versiones de una web y comprobar con datos cuál de ellas funciona mejor. Con Google Analytics también podemos determinar qué páginas de nuestra web son las más visitadas o en las que se permanece más tiempo. Sin embargo, los tests A/B o Google Analytics, aunque nos proporcionan información muy valiosa, no acaban de darnos toda la información necesaria para entender el comportamiento de nuestros visitantes en nuestra web para poder establecer unos patrones de comportamiento.
Los heatmaps o mapas de calor son una herramienta que nos puede proporcionar esta valiosa información que nos aclarará un poco más el comportamiento de nuestros visitantes. En base a ello, podremos determinar mejor las hipótesis que pueden mejorar la experiencia de nuestros usuarios y la conversión. Es decir, los heatmaps ayudan a descubrir los potenciales tests A/B que podemos crear en nuestra web.
Tabla de contenidos
Qué es un heatmap o mapa de calor
Según la Wikipedia, un mapa de calor es una técnica de visualización de datos que mide la magnitud de un fenómeno en colores en dos dimensiones. La variación del color puede ser por tono o intensidad, haciendo obvia la lectura del fenómeno sobre el espacio que se trata.
La imagen anterior vale más que mil palabras: en la imagen, en color rojo o marrón oscuro vemos la «zona caliente», es decir donde seguramente debería haber caído el vuelo 370 en cuestión y, en color azul se muestra la «zona fría» que representa una probabilidad inferior de encontrar los restos del avión. A partir del mapa de calor se estableció la estrategia de búsqueda.
Este tipo de mapas muestran las zonas calientes y frías siguiendo una escala de color de «caliente» a «frío». Y la gran ventaja de este tipo de mapas es que al ser tan visuales, no necesitas ningún tipo de conocimiento técnico para interpretarlo ya que es tremendamente evidente.
En webs, los heatmaps también son una herramienta muy útil para estudiar el comportamiento de los usuarios cuando las visitan. Con ellos, podemos ver las zonas que reciben más atención y llegar a deducir oportunidades de mejora de cara al cumplimiento de los objetivos de nuestra web.
Tipos de heatmaps y sus beneficios
En los sitios web podemos definir básicamente distintos tipos de heatmaps para entender qué llama más la atención al usuario. Todos ellos se inspiran en la técnica del seguimiento ocular o «eyetracking» de los usuarios pero para el que necesitaríamos un equipo especial que seguramente está fuera del alcance de la inmensa mayoría.
La idea básica es que un usuario realiza acciones (movimientos, clics o scroll) con el ratón que están directamente relacionados con el movimiento de sus ojos. De hecho hay un estudio de la Carnegie Mellon University que corrobora la correlación entre ambos con el valor concreto de un 88% (en tiempos de vacunación Covid, este valor parece más que razonable).
Heatmap de interacción
El heatmap de interacción o, el que de forma genérica también se conoce como heatmap, se basa en el seguimiento del puntero del ratón. Un heatmap mostrará como zonas calientes de una página web aquellas donde, en promedio, más usuarios han interactuado. Para interpretar los resultados has de tener en cuenta que colores mas cálidos indican un mayor grado de interacción, y por tanto de relevancia, en los distintos elementos de la página.
¿Cuál es la utilidad principal de los heatmaps? Nos muestran información útil de qué elementos de nuestra página se están llevando toda la atención de los visitantes: dónde se fijan más, dónde no se fijan suficiente, qué enlaces o botones llaman más la atención o si están haciendo clic o les llama la atención algo que no nos interesa. Por ejemplo, si en tu página tienes un botón de acción o enlace que quieres que tus visitantes vean y hagan clic en él, y al ver los resultados del heatmap en esa página no ves una zona roja encima del botón, algo no está funcionando como debería en tu página.
Por ejemplo, ¿te gustaría saber si te funcionan los banners en medio de las entradas de tu blog? Por supuesto, las analíticas de clics al banner te darán mucha información pero con un heatmap te quedará mucho más claro si los banner son ignorados o tienen un impacto.
Confetti
Los confetti, o mapas de clics, son representaciones gráficas que muestran los clics (o pulsaciones en móviles) de los visitantes en nuestra web. Los clics se muestran de forma individual y se usan distintos colores para indicar otro tipo de información, como puede ser el momento del clic (cuánto tiempo llevaba en la página el usuario hasta que ha hecho ese clic en concreto), tipo de navegador, sistema operativo, duración de la visita, país, ancho de la ventana, etc.
El confetti ofrece una información que no encontrarás en otras analíticas y que es particularmente útil para entender mejor el comportamiento de tus visitantes en las páginas. Por ejemplo, entender cuándo el usuario hace clic en ciertas llamadas a la acción, si les llaman particularmente la atención algunas imágenes y hacen clic en ellas aunque no son clicables, si hacen clic en los widgets que puedas tener, etc.
Nelio A/B Testing
Pruebas A/B nativas en WordPress
Usa tu editor de páginas favorito en WordPress para crear variaciones y lanza pruebas A/B con solo un par de clics. No se necesita saber nada de programación para que funcione.
Scrollmaps
Un scrollmap o mapa de desplazamiento es un tipo de representación gráfica que muestra visualmente hasta dónde se desplazan los usuarios por una página haciendo scroll vertical. Los scrollmaps se pueden recopilar en ordenadores de sobremesa, móviles y tabletas, y se forman a partir de agregar las difererentes coordenadas verticales de desplazamiento de los usuarios. El color se utiliza para representar las partes más y menos vistas de una página, desde las calientes (populares) hasta las frías (impopulares).
El scrollmap te ayuda a ver hasta dónde los usuarios ven tu página. Si la mayoría no pasa del primer corte, primero intenta entender el por qué, asegúrate de que aquella información más crítica se encuentra en ese corte, y piensa cómo puedes hacer más atractiva o interesante la página para seguir leyendo más abajo. ¡Ojo! que puede ocurrir que la mayoría de tus usuarios efectivamente vean una página completa. Pero si no están realizando ninguna acción de las que tu esperarías, seguramente es indicación de que los usuarios no están encontrando aquello que buscaban. Finalmente, es interesante en los scrollmaps entender si el comportamiento es parecido para cualquier tipo de dispositivo.
Tipos de plugins de Heatmaps para WordPress
Antes de seleccionar un plugin de Heatmaps para WordPress, es interesante entender el tipo de solución que te proporciona ese plugin.
Cualquier herramienta que calcule los heatmaps de una página debe implementar los distintos componentes que permitan la creación, seguimiento, cálculo y muestra de los resultados de los heatmaps. Dependiendo de cómo se implementen estos componentes, encontramos los siguientes tipos de plugin:
- Plugin que incluye todos los componentes en tu WordPress: es un tipo de plugin que está íntegramente desarrollado para que la creación, el seguimiento, el cálculo y la muestra de los resultados se realicen en tu WordPress. La gran ventaja de un plugin de este tipo es que su curva de aprendizaje acostumbra a ser prácticamente nula ya que se aprovecha de los editores que te proporciona tu WordPress. El problema más importante es que la recogida y cálculo de los heatmaps puede afectar a la carga de tu servidor.
- Herramienta totalmente externa y plugin para insertar un script de seguimiento en tu WordPress: una gran mayoría de los plugins que mencionamos más adelante consisten en una herramienta externa a tu WordPress que permite crear un nuevo heatmap y, mediante el plugin que habrás instalado en tu WordPress, permite insertar un script en la página que quieras testear que se encargará de ejecutar el test y de enviar toda la información recogida de tus visitantes a la herramienta externa para que allí puedas visualizar los resultados gráficos. Es decir, la creación, cálculo y muestra de resultados se realizan en una herramienta externa y el plugin de WordPress sirve para que se añada en tu web el código necesario para que cada vez que un usuario visite una página bajo test, se pueda ejecutar la recogida y envío de información a la herramienta externa. La gran ventaja de esta solución es que la sobrecarga de tu web es mínima pero, por contra, necesitas aprender una herramienta más en la que deberás loguearte para tener acceso a toda la información.
- Plugin con todos los componentes en tu WordPress excepto el de seguimiento y cálculo de los heatmaps que se realiza en un herramienta externa: una solución que busca las ventajas de las dos alternativas anteriores es la de un plugin nativo de WordPress en el que puedes crear y visualizar los heatmaps en el propio escritorio de WordPress. Lo que se externaliza es el componente de cálculo de los heatmaps. De esta forma, no tienes la necesidad de aprender ninguna herramienta externa ya que la creación y visualización se hace en tu propio escritorio de WordPress. Pero, por otro lado, te quitas la carga de hacer el seguimiento de eventos (clicks, scrolls, etc.) y reduces la carga en tu servidor.
Plugins de Heatmaps para WordPress
Veamos a continuación los distintos tipos de plugins de heatmaps que puedes descargarte del directorio de plugins de WordPress.org.
Nelio A/B Testing
Nelio A/B Testing es un plugin nativo de WordPress que te ofrece una solución en la que no sólo puedes crear tests A/B, si no que también puedes obtener increíbles heatmaps para analizar el comportamiento de tus visitantes. Está totalmente integrado con el editor de bloques de Gutenberg y también es compatible con maquetadores visuales. Además, tiene más de 1.000 instalaciones activas y una muy buena valoración en el directorio de plugins de WordPress. Y, por supuesto, hay que destacar su servicio de soporte tanto para la versión gratuita como para los planes premium. Además, es el plugin que hemos desarrollado nosotros en Nelio.
Tipos de heatmaps disponibles
Nelio A/B testing incluye los tres tipos de heatmaps mencionados anteriormente.
Captura de pantalla de un mapa de calor en la página de precios de Nelio A/B Testing. Captura de pantalla con los clics de los usuarios en la página de precios de Nelio A/B Testing. Captura de pantalla de un mapa de scroll en la página de precios de Nelio A/B Testing.
Tipo de plugin
Nelio A/B Testing es un plugin nativo de WordPress en el que todos los componentes se encuentran en el plugin, excepto el almacenamiento de los datos de clics y movimiento del ratón. Te puedes descargar e instalar el plugin gratuito como cualquier otro plugin desde el directorio de plugins de WordPress.
Para crear un nuevo test de heatmap desde el propio escritorio de WordPress, primero debes seleccionar que quieres crear un test de heatmaps:
A continuación sólo debes añadirle un nombre al test y seleccionar el contenido (página, entrada o tipo de contenido personalizado) en el que quieras realizar el seguimiento de tus visitantes.
Adicionalmente, con la versión premium también te permite que no solo finalices el test de forma manual, si no que especifiques si quieres finalizarlo al cabo de cierto tiempo o tras un cierto volumen de visitas.
Y ya está, no debes preocuparte de nada más. Desde el escritorio de tu WordPress, y sin haberte logueado en ninguna herramienta externa, ya tienes tu test en marcha. Aún así, el plugin de Nelio A/B Testing almacenda todos los resultados en sus propios servidores, con la gran ventaja de que la carga del servidor de tu web prácticamente no se ve afectada por la ejecución del heatmap.
La visualización de los resultados de los tres tipos de mapas también la tienes desde tu escritorio de WordPress. Además, cualquier otro tipo de test A/B que hayas creado con la herramienta siempre incluye la visualización de los heatmaps. Y para cada uno de ellos tienes distintos tipos de filtros con los que puedes jugar para obtener información más detallada.
Filtros de los heatmaps de Nelio A/B Testing. Filtros de los scrollmaps de Nelio A/B Testing. Filtros de los confetti de Nelio A/B Testing.
Si quieres conocer un poco más sobre algunos de los tests, incluyendo heatmaps, que hemos realizado con Nelio A/B Testing, los encontrarás en este enlace.
Planes y precios
Versión gratuita accesible desde el directorio de plugins de WordPress.orgque permite crear heatmaps hasta un total de 500 visitas a la página que está bajo test.
Planes premium: los planes y precios van en función del número de sitios en los que se quiere instalar el plugin, el volumen de visitas a páginas con tests ejecutándose y varias funcionalidades.
Es importante entender que esta herramienta no sólo te permite crear heatmaps, si no que es el plugin de WordPress más completo para crear tests A/B y multivariantes.
Aurora Heatmap
El plugin Aurora Heatmap es un plugin nativo de WordPress totalmente gratuito que te permite crear los heatmaps que quieras en tu WordPress. Tiene más de 20.000 instalaciones activas, con pocas valoraciones y con un servicio de soporte en WordPress muy limitado (es un servicio totalmente gratuito).
Tipo de heatmaps disponibles
La versión gratuita de Aurora Heatmap sólo permite crear los clásicos heatmaps, pero también puedes disponer de una versión premium con la que puedes obtener un tipo de scrollmap en el que puedes saber qué porcentaje de usuarios han alcanzado cierto nivel de scroll en una página.
Tipo de plugin
Aurora Heatmap es un plugin nativo de WordPress en el que todos los componentes para crear y obtener heatmaps se encuentran en WordPress. Tras descargarse el plugin, su uso es muy fácil y no necesitas ningún registro en una herramienta externa.
Una de las limitaciones de este plugin es que los resultados mostrados no permiten ningún tipo de filtro. Adicionalmente, ten en cuenta que al recopilar toda la información en tu propio WordPress, esto puede tener una sobrecarga en tu servicio de hosting.
Planes y precios
El plugin de Aurora Heatmap es totalmente gratuito y te permite crear tantos heatmaps como quieras sin límite de páginas vistas. También dispone de un plan premium en el que añade la opción de disponer de scrollmaps.
Crazy Egg
El plugin Crazy Egg es un plugin gratuito que te permite añadir el script de seguimiento de Crazy Egg en tu sitio web de WordPress. El script de seguimiento permite a Crazy Egg rastrear a tus visitantes.
Tipos de heatmaps disponibles
Crazy Egg es un servicio externo que incluye los tres tipos de heatmaps mencionados.
Heatmaps con Crazy Egg Scrollmaps con Crazy Egg Confetti con Crazy Egg
Tipo de plugin
Crazy Egg es un plugin que sirve para insertar un script para el rastreo de las visitas (de hecho, una vez insertado el script, no necesitas para nada el plugin). El servicio de creación, cálculo y muestra de los resultados de heatmaps se realiza de forma externa. Por ese motivo, para usar el servicio, lo primero que debes hacer es crear una cuenta en su servicio.
Planes y precios
El plugin de Crazy Egg es gratuito pero tiene distintos planes y precios para el servicio premium de heatmaps:
Hotjar
El plugin Hotjar es un plugin gratuito que te permite añadir el script de seguimiento de Hotjar en tu sitio web de WordPress. Al igual que el plugin anterior, el script de seguimiento permite a Hotjar rastrear a tus visitantes.
Tipo de heatmaps disponibles
El servicio de Hotjar incluye heatmaps y scrollmaps y también incluye un mapa de seguimiento de usuarios que pueden ayudarte a entender mejor qué hacen en tu web.
Hotjar es un servicio que te permite crear heatmaps en tu web. Hotjar es un servicio que te permite crear scrollmaps en tu web.
Tipo de plugin
El plugin Hotjar sigue la misma filosofía que el de Crazy Egg: sirve para insertar un script para el rastreo de las visitas (de hecho, una vez insertado el script, no necesitas para nada el plugin). El servicio de creación, cálculo y muestra de los resultados de heatmaps se realiza en el servicio externo. Y al igual que el anterior, para usar el servicio lo primero que debes hacer es crear una cuenta en su servicio.
Hotjar, cuenta además con gran cantidad de filtros con los que puedes visualizar los resultados de los distintos heatmaps.
Planes y precios
El plugin de Hotjar es gratuito pero tiene distintos planes y precios para el servicio de heatmaps:
Mouseflow for WordPress
El plugin Mouseflow for WordPress es también un plugin gratuito cuya una única funcionalidad es la de insertar el código de conexión con el servicio externo Mouseflow.
Tipo de heatmaps disponibles
El servicio Mouseflow dispone de 5 tipos de heatmaps: de clic, de scroll, de atención, de movimiento y geográfico. Para muchos de ellos te proporciona métricas adicionales que puedes complementar con los mapas visualizados.
Tipo de plugin
El plugin Mouseflow de WordPress sigue la misma filosofía que el de Crazy Egg y Hotjar: sirve para insertar un script para el rastreo de las visitas (de hecho, una vez insertado el script, no necesitas para nada el plugin). El servicio de creación, cálculo y muestra de los resultados de heatmaps se realiza todo de forma externa. Y al igual que los anteriores, para usar el servicio lo primero que debes hacer es crear una cuenta en su servicio.
Planes y precios
El plugin de Mouseflow for WordPress es gratuito pero tiene distintos planes y precios para el servicio de heatmaps:
Lucky Orange
El plugin Lucky Orange es también un plugin gratuito que te permite añadir el script de seguimiento de Lucky Orange en tu sitio web de WordPress.
Tipo de heatmaps disponibles
El servicio de Lucky Orange dispone de la creación de heatmaps de scrollmap, movimiento y clic.
Tipo de plugin
El plugin Lucky Orange sigue la misma filosofía que el de Crazy Egg, Hotjar y Mouseflow: sirve para insertar un script para el rastreo de las visitas (de hecho, una vez insertado el script, no necesitas para nada el plugin). El servicio de creación, cálculo y muestra de los resultados de heatmaps se realiza de forma externa a WordPress. Y al igual que los anteriores, para usar el servicio lo primero que debes hacer es crear una cuenta en su servicio.
Planes y precios
El plugin de Lucky Orange es gratuito pero tiene distintos planes y precios para el servicio de heatmaps:
¿Cuál es el mejor plugin de heatmaps?
Si todavía no estás seguro de cuál es el plugin de tests A/B adecuado para ti, aquí tienes un resumen rápido de algunos aspectos a tener en cuenta:
- Nelio A/B Testing es el plugin nativo para WordPress más completo y versátil para poder crear heatmaps (y por supuesto, increïbles tests A/B) sin tener que salir de tu WordPress y, además, es un desarrollo nuestro, de Nelio,
- Aurora Heatmap es el único plugin nativo de WordPress en el que todos sus componentes se instalan en tu web. Esto permite un control absoluto de la herramienta pero sus funcionalidades son más limitadas y puede perjudicar a la carga de tu servidor.
- Crazy Egg, Hotjar, Lucky Orange y Mouseflow son cuatro servicios externos a WordPress para la creación de heatmaps con suites muy completas que puedes considerar si lo que buscas es hacer seguimientos muy exhaustivos de tus visitantes.
En cualquier caso, los heatmaps son un gran complemento a la creación de tests A/B, ya que te proporcionan datos de qué está fallando y qué podrías mejorar en tu web. Es por eso que nuestra recomendación es que, si buscas cómo optimizar la conversión en tu web, utilices una herramienta que te proporciona los dos servicios conjuntamente.
Imagen destacada de Zoltan Tasi en Unsplash
Deja una respuesta