¡Hola! Ahora puedes usar Hotjar en español 🇪🇸 Empezar gratis.

Aprende / Guías / Guía de heatmaps

Volver a las guías

Mapas de clics: cómo utilizarlos para optimizar tu sitio web (y por qué deberías hacerlo)

La gente no puede utilizar un sitio web sin hacer clic con el ratón en ordenadores o tocar con el dedo en dispositivos móviles. Esos clics y toques les ayudan a navegar por las páginas y encontrar los productos, los servicios o la información que buscan.

Pero y tú, como responsable del diseño de un sitio web, profesional del marketing o titular de una empresa, ¿sabes exactamente dónde hacen clic y tocan tus visitantes? ¿Y sabes cómo utilizar esa información para crear un sitio web y una experiencia mejores?

Pues precisamente eso es lo que puedes averiguar con los mapas de clics.

Última actualización

18 ene 2024

Tiempo de lectura

9 min

Compartir

Averigua dónde hacen clic los visitantes de tu sitio web

Empieza a utilizar mapas de clics en tu sitio web hoy mismo.

¿Qué son los mapas de clics?

Los mapas de clics, heatmaps de clics o click maps son un tipo de mapas de calor de sitios web que muestran dónde las usuarias y los usuarios hacen clic con el cursor del ratón en ordenadores o tocan la pantalla en dispositivos móviles. Los heatmaps de clics ayudan a los propietarios de sitios web a hacer un seguimiento de la interacción de los usuarios con la página; por ejemplo, en qué botones, enlaces o imágenes de un sitio web hacen clic. Con esa información, pueden optimizar sus páginas y CTA para mejorar las conversiones.

#A click map example on our “About us” page
A click map example on our “About us” page

Los diseñadores de experiencia de usuario y los profesionales del marketing utilizan la visualización de clics para hacer un seguimiento de la actividad de las personas usuarias, identificar oportunidades para aumentar las conversiones, corregir bugsy mejorar el diseño del sitio web haciendo pruebas iterativas. Estos mapas utilizan una escala de colores, que normalmente va del azul (colores fríos para indicar los elementos en los que menos se ha hecho clic) al rojo (colores cálidos para señalar los elementos que más clics han recibido). También incluyen datos cuantitativos sobre el número de clics y el porcentaje de clics de los usuarios en cada elemento de la página web.

Mapas de clics vs. mapas de calor

#Two different types of heatmap side by side
Two different types of heatmap side by side

"Heatmap" o "mapa de calor" es un término genérico que engloba diferentes tipos de analíticas visuales de sitios web. Los mapas de clics o heatmaps de clics son uno de los tipos de mapas de calor (junto con los mapas de desplazamiento vertical o scroll maps y los mapas de movimientos o move maps) en el que se usan puntos rojos o "calientes" para indicar los elementos de la página que han recibido clics o toques con más frecuencia, y puntos azules o "fríos" para señalar los que han recibido menos. Cualquier área que no esté marcada con un color significa que nunca ha recibido ningún clic o toque.

💡¿Sabías que...? Puedes visualizar los datos de clics, movimientos y desplazamientos verticales en una única vista utilizando Hotjar Heatmaps.

The Engagement Zones heatmap grid view lets you know which areas of the page your users most interact with, at one glance.

Mapas de clics vs. mapas de clics con rabia

#Example of a rage click map
Example of a rage click map

Los mapas de clics con rabia o rage click maps son un tipo específico de heatmaps de clics que muestran exactamente dónde las usuarias y los usuarios hacen clic con rabia en una página, lo que indica problemas de usabilidad (clics de error o error clicks), bugs o elementos rotos (clics muertos o dead clicks). Son una herramienta especialmente útil con la que identificar puntos de fricción innecesarios y oportunidades de mejora de la UX para aumentar las conversiones.

¿Por qué utilizar mapas de clics?

Con los heatmaps de clics puedes:

  • Ver dónde hacen clic y tocan los visitantes de tu sitio web.

  • Identificar CTA que no están funcionando bien porque los usuarios los están ignorando.

  • Encontrar posibles bugs y puntos de dolor de tu producto.

  • Mostrar visualmente los datos de interacción de tus usuarios.

  • Descubrir qué elementos de tu página obtienen más clics en las variantes de las pruebas A/B.

Los mapas de clics son una herramienta deseguimiento de clics fundamental para identificar elementos de tus páginas con los que los usuarios interactúan (o no) y, en función de esos datos, determinar patrones decomportamiento de los usuarios .

Podrás ver en qué CTA (llamadas a la acción) y elementos inesperados hicieron clics los usuarios, lo que te servirá como un buen punto de partida para plantearte hacer cambios en el producto con el objetivo de mejorar la UX y el CRO (optimización de la tasa de conversión). Con este ejemplo quedará todo mucho más claro:

#Hotjar click map examples across different devices
Hotjar click map examples across different devices

Este es un mapa de clics que configuramos en una versión antigua de nuestra página principal, en la que había un vídeo situado por encima del límite visible medio. Gracias al mapa de clics, pudimos averiguar que nadie veía el vídeo ni en ordenadores ni en móviles: la interacción global es del 0,04 %, lo que significa que solo unas 3 (¡!) personas de 7000 hicieron clic en el botón de reproducción.

Si el vídeo hubiera incluido información única y valiosa sobre el producto que no se repitiera en ninguna otra parte de la página, habríamos tenido problemas. Por lo tanto, este mapa de clics nos alertó de un problema que había que solucionar.

Además, los heatmaps de clics pueden utilizarse como ayuda visual para comunicar problemas y optimizaciones del sitio web y del producto a stakeholders y clientes, lo que resulta especialmente útil si te diriges a un público que no tenga conocimientos técnicos y necesitas obtener aprobación para temas de UX por parte de tu equipo o director.

Por último, los heatmaps de clics son realmente útiles como herramientas para generar informes de rendimiento, ya que aportan datos visuales que te servirán para ilustrar lo que estás contando. Al fin y al cabo, una imagen vale más que mil palabras 😉.

#Un usuario de Hotjar comparte un mapa de calor con un miembro de su equipo para elaborar un caso de negocio que les ayude a conseguir una mayor aceptación
Un usuario de Hotjar comparte un mapa de calor con un miembro de su equipo para elaborar un caso de negocio que les ayude a conseguir una mayor aceptación

Cómo utilizar los mapas de clics en tu sitio web

Puedes utilizar los heatmaps de clics en cualquier tipo de sitio web: sitios de comercio electrónico, páginas de listas de productos, blogs, páginas de destinoy mucho más.

A continuación, te mostramos cómo configurar los mapas de clics de Hotjar utilizando nuestra herramienta de analítica de mapas de calor para que empieces a recopilar datos de clics en tu sitio web hoy mismo. No tienes que hacer nada especial para configurar un mapa de clics, ya que Hotjar genera automáticamente todos los tipos de mapas de calor (de clics, movimientos y desplazamiento vertical).

Crea una cuenta de Hotjar gratuita para siempre o inicia sesión si ya la tienes. Ve al dashboard de Hotjar y navega hasta la sección Heatmaps para empezar.

Para crear un mapa de clics, sigue estos 6 sencillos pasos:

Paso 1: añade el código de seguimiento de Hotjar a tu sitio web

Puedes instalar el código de seguimiento de Hotjar de varias maneras; por ejemplo, a través de Google Tag Manager o instalando el plugin de Hotjar para WordPress.

Por si te lo estuvieras preguntando, Hotjar se creó teniendo en cuenta la privacidad desde el primer momento; por lo tanto, todas nuestras herramientas cumplen con las normativas correspondientes. Además, el código de seguimiento no afectará a la velocidad de tu sitio web.

Paso 2: activa la captura de sesiones

Los mapas de calor se generan con los datos de las sesiones. Cuando la captura de sesiones está activada, los mapas de calor comienzan a recopilar automáticamente datos sobre el comportamiento del usuario. Por lo tanto, Lo primero que debes hacer es comprobar que la captura de sesiones está activada.

Para verificarlo, haz clic en la foto de tu cuenta de Hotjar, situada en la esquina superior derecha, y luego selecciona la opción de configuración. A continuación, haz clic en el icono de la rueda dentada, situado a la derecha en el cuadro de configuración de la organización.

En la parte superior de la página de tu cuenta de Hotjar, también verás un widget que indica qué porcentaje del tráfico de tu sitio está cubierto. Si haces clic en este widget, verás más información sobre tu configuración diaria de captura de sesiones, que se aplicará tanto a las grabaciones de Hotjar como a los mapas de calor.

Si la captura de sesiones no está habilitada, verás un botón naranja en la parte superior de la página informándote de que la captura de sesiones está deshabilitada y te redirigirá a la página de configuración de la captura de sesiones.

Paso 3: empieza a utilizar mapas de calor

Haz clic en el icono de Heatmaps, situado en el menú de navegación de la izquierda.

Paso 4: introduce la URL de la que quieres generar el mapa de calor o selecciónala de la lista de páginas populares

Utiliza la barra de búsqueda situada en la parte superior de la página de Heatmaps para indicar de qué página de la que estés haciendo un seguimiento quieres generar un mapa de calor.

Para obtener más información, puedes consultar nuestro artículo sobre las opciones de filtrado de las URL.

También puedes seleccionar una opción de la lista de páginas populares. Esta lista muestra las páginas de tu sitio que han recogido la mayor cantidad de datos de sesión en los últimos 30 días.

Paso 5: selecciona el mapa de clics

En la siguiente pantalla se te preguntará cuál es tu objetivo. Para generar un mapa de clics, debes seleccionar la primera opción, en la que se pregunta en qué parte de la página hacen clic los usuarios.

Paso 6: averigua en qué parte de tu página hacen clic los usuarios

Tu mapa de calor debería aparecer en 90 segundos o menos. Este es un ejemplo de cómo se mostrarán los resultados del mapa de clics:

#A Hotjar click map example
A Hotjar click map example

Puedes cambiar de mapa de calor para visualizar datos de sesiones de escritorio, tableta o móvil. Para ver los datos del mapa de clics, selecciona la opción correspondiente en el panel de la derecha o en el widget flotante de la parte inferior. También puedes ver y descargar los datos sin procesar.

Nota: Para garantizar que Hotjar informa con precisión sobre dónde han hecho clic los visitantes de tu sitio web, recopilamos datos de los clics en relación con elementos de la página. Por ejemplo, si una usuaria o un usuario hace clic en un botón, registraremos la posición de su cursor en relación con ese botón en particular, no con toda la página; en otras palabras, los Heatmaps de Hotjar te proporcionan una visualización agregada del comportamiento de los usuarios.

Descubre por qué la gente hace clic combinando mapas de calor con otras herramientas de investigación de la experiencia de producto

#Hotjar provides product experience insights with tools like heatmaps, recordings, and feedback surveys
Hotjar provides product experience insights with tools like heatmaps, recordings, and feedback surveys

Los mapas de clics son fantásticos para averiguar en qué elementos hacen clic o tocan los usuarios, pero no es suficiente. También debes comprender por qué los usuarios hacen clic (o, lo que es quizás más urgente, por qué no lo hacen).

Para ello, puedes combinar los insights cuantitativos que obtengas con los heatmaps de clics con insights cualitativos que identifiques gracias al feedback de los usuarios, encuestasy grabaciones de sesiones. Además de los mapas de calor, con Hotjar también puedes configurar rápidamente en tu sitio web o página de producto otras herramientas para, por ejemplo, grabar sesiones de usuario, pedir feedback o hacer encuestas, lo que te servirá para obtener todos los insights sobre experiencia de producto que necesitas para optimizar y mejorar tu UX.

📚 Lecturas complementarias: Infórmate sobre cómo combinar mapas de calor con otras herramientas para obtener todavía más insights y averigua cómo la empresa de SaaS CCV Shop utilizó mapas de clics en combinación con grabaciones de sesiones para aumentar las tasas de conversión y la satisfacción de los clientes.

Crea un mapa de clics gratuito para aumentar tus conversiones desde hoy mismo

Los mapas de clics son una forma rápida y sencilla de ver qué hacen realmente los usuarios en tu sitio web. Es una de las herramientas clave de UX y optimización que utilizan los profesionales del marketing, los diseñadores de UX y los responsables de optimización de la tasa de conversión para identificar insights sobre la experiencia de producto. Además, los heatmaps de clics te serán especialmente útiles si tienes una empresa online y quieres comprender hasta el último detalle sobre el comportamiento de tus clientes:qué les motiva, qué les interesa, con qué elementos de tu sitio web interactúan o ignoran.

Preguntas frecuentes sobre mapas de clics