Foto de una gran fogata ardiendo por Zoltan Tasi en Unsplash

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.

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.

Mapa de calor indicando la ubicación probable del vuelo 370 de Malaysia Airlines.
Un mapa de calor indicando la ubicación probable del vuelo 370 de Malaysia Airlines en un análisis de método bayesiano de rutas de vuelo posibles de la aeronave (fuente: Wikipedia.org).

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.

Imagen mostrando la escala de colores utilizada en heatmaps
Escala de colores utilizada en heatmaps desde el marrón oscuro para «zonas calientes» al azul marino para «zonas frías».

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.

Captura de pantalla de un mapa de calor en la página de precios de Nelio A/B Testing
Captura de pantalla de un mapa de calor en la página de precios de Nelio A/B Testing.

¿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.

Heatmap de la variante con banners en inglés.
Heatmap de una entrada con un banner. Un caso claro de banner blindness.

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.

Resultados de un confeti con Nelio A/B Testing.
Resultados de un confetti con Nelio A/B Testing.

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).

Captura de pantalla de un mapa de scroll 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.

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 en el Directorio de plugins de WordPress
Plugin de WordPress 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.

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:

Captura de pantalla de la selección del tipo de test a crear con Nelio A/B Testing
Con Nelio A/B Testing, crear un nuevo heatmap es tan fácil como hacer clic en el icono de creación de heatmap.

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.

Creación de un nuevo test the heatmaps
Creación de un nuevo test the heatmaps con Nelio A/B Testing

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.

Selección del modo de visualización de un test con Nelio A/B Testing.

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.

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.

Tabla de los planes y precios de Nelio A/B Testing Premium
Tabla de los planes y precios de Nelio A/B Testing Premium

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

Plugin Aurora Heatmap en el directorio de WordPress
El plugin Aurora Heatmap es un plugin de WordPress que te permite crear heatmaps.

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.

Captura de pantalla de un heatmap realizado con el plugin Aurora Heatmap
El plugin Aurora Heatmap permite crear y visualizar heatmaps en tu WordPress.

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.

Captura de pantalla del plan premium de Aurora Heatmap
El plugin Aurora Heatmap dispone de un plan premium al que te puedes subscribir para añadir funcionalidades al plan gratuito.

Crazy Egg

Plugin de Crazy Egg en el directorio de WordPress
El plugin Crazy Egg es un plugin de WordPress que te permite crear heatmaps.

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.

Insertar el script de Crazy Egg en un sitio de WordPress.

Tipos de heatmaps disponibles

Crazy Egg es un servicio externo que incluye los tres tipos de heatmaps mencionados.

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:

Captura de pantalla de los planes y precios de Crazy Egg
Crazy Egg ofrece 4 planes distintos a los que puedes subscribirte.

Hotjar

Plugin Hotjar en el directorio de WordPress
El plugin Hotjar es un plugin de WordPress que te permite crear heatmaps.

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.

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:

Captura de pantalla de los planes y precios disponibles del servicio de heatmaps Hotjar
El servicio de Hotjar dispone varios planes para webs personales, business y agencias.

Mouseflow for WordPress

Plugin Mouseflow for WordPress en el directorio de WordPress
El plugin Mouseflow for WordPress es un plugin de WordPress que te permite crear heatmaps.

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.

Captura de pantalla de un clicmap de Mouseflow.
Los resultados mostrados en Mouseflow se complementan con métricas adicionales que pueden aportar información muy interesante (fuente: web de Mouseflow.

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:

Captura de pantalla de los planes y precios disponibles del servicio de heatmaps Mouseflow
Mouseflow dispone de varios planes y precios para que se ajusten a los distintos tipos de clientes.

Lucky Orange

Plugin Lucky Orange en el directorio de WordPress
El plugin Lucky Orange es un plugin de WordPress que te permite crear heatmaps.

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.

Captura de pantalla de los tipos de heatmaps de Lucky Orange
Lucky Orange es un servicio que te ofrece tres tipos de heatmaps, scroll, 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:

Captura de pantalla de los planes y precios disponibles del servicio de heatmaps Lucky Orange
Lucky Orange dispone de varios planes y precios para que se ajusten a los distintos tipos de clientes.

¿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

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.