Cuando empecé a trabajar en mis sitios web de WordPress, la mayoría de las veces adivinaba lo que querían los visitantes. No fue hasta que empecé a utilizar mapas de calor cuando comprendí realmente cómo interactuaba la gente con mi sitio: dónde hacían clic, cuánto se desplazaban y qué les llamaba la atención.
Si está intentando mejorar su sitio de WordPress pero no está seguro de lo que funciona y lo que no, los mapas de calor pueden darle algunas respuestas.
Después de probar varias herramientas a lo largo de los años, lo he reducido a 2 formas sencillas de establecer mapas de calor en WordPress: Microsoft Clarity y UserFeedback.
En esta guía, voy a ir a través de cada proceso de configuración paso a paso. Al final, tendrás las herramientas que necesitas para hacer cambios basados en datos en tu sitio. 🔥
¿Por qué es necesario establecer mapas de calor en WordPress?
Un mapa de calor es una herramienta visual que le muestra exactamente cómo interactúan los visitantes con su sitio web en WordPress. Utiliza un código de colores para resaltar las zonas más y menos activas de una página:
- Loscolores rojo, naranja y amarillo (zonas “calientes”) muestran dónde los visitantes hacen clic, tocan o pasan más tiempo.
- El azul y el verde (zonas “frías”) muestran puntos a los que se presta poca o ninguna atención.
Al ver asignada esta actividad, puede dejar de hacer conjeturas acerca de lo que funciona y lo que no. En otras palabras, los mapas de calor ayudan a quitar / eliminar las conjeturas, ya que proporcionan una visión vaciada del comportamiento de los visitantes.
Le ayudan a responder a preguntas importantes, como:
- ¿Hace la gente clic en sus botones CTA?
- ¿Se desplazan hacia abajo lo suficiente para ver su contenido?
- ¿Están haciendo clic en cosas que no hacen nada?
Con esta información, podrá hacer cambios inteligentes en su sitio. Sabrá qué corregir, qué mover y qué mejorar.
Puede utilizar esa información para conseguir más lectores, aumentar las ventas o incrementar las consultas de clientes potenciales, todo ello realizando cambios sencillos basados en el uso real que la gente hace de su sitio.
En las siguientes secciones, voy a compartir cómo establecer mapas de calor de WordPress utilizando 2 de las mejores herramientas para añadir mapas de calor. Una es completamente gratuita y la otra es una opción premium con características extra.
No dude en enlazar los siguientes enlaces para acceder al método que prefiera:
Paso 0: Preparar su sitio WordPress para Heatmaps
Antes de añadir mapas de calor a su sitio de WordPress, es importante asegurarse de que su sitio está preparado adecuadamente. Tomando algunos pasos de precaución puede ayudar a prevenir cualquier problema al empezar.
Si va a añadir mapas de calor a su sitio activo por primera vez, es una buena idea probarlo todo primero en un sitio de prueba.
Un sitio de prueba es esencialmente un duplicado de su sitio web en vivo, donde se pueden hacer cambios y probar nuevas características sin afectar a su sitio web real. Te permite probar nuevas herramientas, como los mapas de calor, de forma segura, sin arriesgarte a interrumpir la experiencia del usuario.
A continuación, sólo tiene que activar los cambios para aplicarlos a su sitio web real.
Si utiliza Bluehost, puede crear fácilmente un sitio de prueba, gracias a su rápida solución de 1 clic.
Dicho esto, si usted no tiene acceso a la puesta en escena a través de su alojamiento, entonces también puede utilizar plugins como WP Stagecoach para crear sitios de puesta en escena.
Para una guía completa, puede marcar / comprobar nuestra guía sobre cómo crear un sitio de ensayo para WordPress.
Además, haga siempre una copia de seguridad de su sitio antes de realizar cambios importantes. Tener una copia de seguridad le garantiza que, en caso de que algo vaya mal durante el proceso de configuración, podrá restaurar fácilmente su sitio a su estado anterior sin perder ningún dato importante.
Por último, recuerde que los mapas de calor funcionan mejor cuando se utilizan junto con otras herramientas de análisis y la respuesta / comentario / opinión de los usuarios.
Considérelos un punto de partida para descubrir posibles problemas / oportunidades, no la única fuente de información. Combinando la información de los mapas de calor con datos más amplios se obtiene una imagen más clara y precisa de cómo interactúan los visitantes con el sitio.
Método 1: Establecer mapas de calor de WordPress con Microsoft Clarity
Microsoft Clarity es una herramienta gratuita y fácil de usar de registro de sesiones y mapas de calor que se integra perfectamente con WordPress. Es la mejor para el análisis general del sitio, ideal para principiantes, blogueros y propietarios de pequeñas empresas que quieren entender el comportamiento de los visitantes.
Por eso lo utilizamos en algunos de nuestros sitios web asociados para hacer un seguimiento de los mapas de calor y obtener información sobre las interacciones de los usuarios.
📌 Importante: Clarity recopila datos de uso anonimizados para mejorar sus servicios, lo que puede ayudarte a cumplir con el RGPD y otras leyes de privacidad. Para más detalles sobre el cumplimiento del RGPD, marca / comprueba nuestra guía sobre WordPress y el RGPD.
Paso 1: Crear una cuenta gratuita de Microsoft Clarity
Para establecer mapas térmicos de WordPress con Microsoft Clarity, primero necesitará una cuenta.
Vaya al sitio web de Microsoft Clarity y haga clic en “Primeros pasos”.
En la ventana emergente que aparece, verás que puedes acceder con una cuenta de Microsoft, Facebook o Google. Solo tienes que hacer clic en la que prefieras.
Para este tutorial, voy a seleccionar “Acceder a Google”.
A continuación, puede seguir el proceso de registro eligiendo la cuenta adecuada.
A continuación, haga clic en “Continuar” en la página de confirmación.
Al registrarte, se te pedirá que confirmes tu dirección de correo electrónico.
No olvide marcar / comprobar las Condiciones de uso de Clarity y haga clic en la casilla de verificación antes de continuar.
A continuación, se le indicará que cree un nuevo proyecto para su sitio de WordPress.
Sólo tiene que dar un nombre a su proyecto, introducir la URL de su sitio web y elegir su sector en el menú desplegable.
Una vez hecho esto, sigue adelante y haz clic en “Añadir nuevo proyecto” para finalizar la configuración.
Una vez hecho esto, ya puede instalar el plugin Microsoft Clarity WordPress para establecer mapas de calor en su sitio web.
Paso 2: Instalar Microsoft Clarity en su sitio WordPress
En este paso, instalarás el plugin Microsoft Clarity y lo conectarás a la cuenta que acabas de crear.
Desde tu escritorio de WordPress, vamos a Plugins ” Añadir nuevo plugin.
Utilice la barra de búsqueda para encontrar rápidamente el plugin Microsoft Clarity.
Basta con hacer clic en “Instalar ahora” en el resultado de búsqueda correspondiente y, una vez más, en “Activar” cuando aparezca.
Para obtener instrucciones paso a paso, consulte nuestra guía sobre cómo instalar un plugin de WordPress.
Una vez activado el plugin, el siguiente paso es elegir un proyecto Clarity para conectar ambas herramientas.
Puede navegar a Clarity desde su área de administrador / administración de WordPress y elegir el proyecto que acaba de crear en el menú desplegable.
En los siguientes segundos debería aparecer el aviso “Proyecto integrado correctamente”.
Para más detalles, puede consultar nuestra guía sobre cómo instalar Microsoft Clarity Analytics en WordPress.
💡 Nota: Si utiliza un plugin de caché de WordPress, deberá vaciar la caché de WordPress después de conectar Microsoft Clarity a su sitio web. Esto es importante porque, de lo contrario, Microsoft no podrá verificar su sitio durante unas horas.
Paso 3: Establecer mapas de calor en Microsoft Clarity
Una vez que conecte Microsoft Clarity, se iniciará automáticamente el seguimiento de sus visitantes – sin necesidad de pegar ningún código manualmente o meterse con archivos de temas.
Dentro de su escritorio de Clarity, encontrará informes útiles que le darán una visión general de cómo interactúan las personas con su blog o sitio de WordPress.
Algunas de las métricas clave son:
- Sesiones – Muestra cuántas visitas individuales ha recibido su sitio.
- Páginas por sesión – Indica cuántas páginas ha visto un visitante durante una sesión.
- Profundidad de desplazamiento – Muestra cuánto se desplazan los usuarios por cada página.
- Tiempo activo – Registra el tiempo que los usuarios participan activamente en su página (no sólo dejándola abierta en una pestaña en segundo plano).
También encontrará widgets predefinidos, como el “Resumen de usuarios”, que destaca los tipos de visitantes y dispositivos.
Además, hay datos de comportamiento como los clics de rabia (cuando los usuarios hacen clic repetidamente por frustración) y el desplazamiento excesivo (cuando los usuarios se desplazan demasiado, posiblemente buscando algo).
Para ver tus mapas de calor, ve a la pestaña “Mapas de calor”.
Una vez dentro, verá un anuncio / catálogo / ficha de todos los mapas de calor de página que Clarity ha registrado automáticamente.
Sólo tiene que hacer clic en la página que desee analizar.
Una vez que abra un mapa térmico, verá tres vistas principales: Clics, Desplazamiento y Atención.
Puede cambiar a “Clic” para ver dónde hacen más clic los visitantes.
Para conocer la profundidad de desplazamiento, sólo tienes que ir a la pestaña “Desplazamiento”.
Aquí, Clarity revelará hasta qué punto se desplazan los usuarios por la página. Esto ayuda a identificar si faltan contenidos clave.
Por último, siga adelante y haga clic en el botón“Atención” para ver el tiempo medio que pasan los visitantes en las distintas partes de la página.
Las zonas rojas indican mayor atención, mientras que las azules reciben menos.
Eso es todo: ¡ha establecido correctamente los mapas térmicos de WordPress con Microsoft Clarity!
Método 2: Establecer mapas de calor de WordPress utilizando UserFeedback
UserFeedback de MonsterInsights combina la respuesta / comentario / opinión de estilo mapa de calor con encuestas y segmentación avanzada. Es una potente opción para sitios web en crecimiento, tiendas online y agencias que necesitan una visión más profunda y más control sobre cómo recopilar la respuesta / comentario / opinión de los visitantes.
En WPBeginner, hemos utilizado UserFeedback para obtener información sobre lo que nuestros clientes de diseño web quieren y esperan de nosotros. Hemos tenido una gran experiencia con él, ¡y puedes marcar / comprobar nuestra reseña / valoración completa de UserFeedback para ver por qué lo recomendamos!
Paso 1: Instalar y activar UserFeedback
En primer lugar, tendrás que establecer una cuenta de UserFeedback. Para ello, visita el sitio web de UserFeedback y suscríbete a un plan.
💡 Nota: Existe una versión gratuita de UserFeedback por si quieres explorar sus características. Pero necesitarás al menos el plan Elite para desbloquear la característica Heatmaps de UserFeedback.
Una vez que se haya registrado para obtener una cuenta, se le redirigirá al Escritorio de su cuenta de UserFeedback, donde podrá encontrar el enlace de descarga del archivo zip de UserFeedback y su clave de licencia.
Ahora, es el momento de instalar el plugin.
Desde su escritorio de WordPress, debe ir a Plugins ” Añadir nuevo.
En la siguiente pantalla, vamos a buscar UserFeedback.
A continuación, puede instalar y activar el plugin como lo haría con cualquier otro plugin de WordPress.
¿Eres nuevo en la instalación de plugins? Aquí tienes una guía detallada sobre cómo instalar un plugin de WordPress.
Una vez activado, puedes introducir tu clave de licencia para desbloquear todas las características pro que vienen con tu plan.
Para ello, vaya a UserFeedback ” Ajustes. A continuación, copie y pegue la clave de licencia del panel de UserFeedback en el campo “Clave de licencia”.
Siga adelante y haga clic en el botón “Verificar” para iniciar el proceso de verificación.
En unos segundos, debería ver un mensaje de verificación correcta.
Paso 2: Activar la extensión Heatmaps
Ahora, vamos a UserFeedback ” Extensiones para instalar la extensión Heatmaps.
Puede desplazarse por la página hasta encontrar la extensión Heatmaps y hacer clic en “Instalar extensión” en el cuadro correspondiente.
Una vez instalado, asegúrate de que está activado al hacer clic en el botón “Activar”.
Paso 3: Crear un nuevo mapa de calor
Con la extensión Heatmaps activada, ya puede crear el mapa de calor de su sitio.
Vamos a UserFeedback ” Heatmaps en su escritorio de WordPress, y haga clic en el botón “Nuevo mapa de calor”.
En el mensaje / ventana emergente que aparece, despliegue el menú desplegable para seleccionar la página específica que desea seguir. Por ejemplo, puedes crear un mapa de calor para tu página de inicio, página de destino o entrada de blog.
Pulsa el botón “Crear” para establecer el mapa térmico.
Paso 4: Ver los resultados del mapa de calor
Después de crear un mapa térmico, UserFeedback empezará a recopilar datos de los usuarios inmediatamente.
Vayamos a UserFeedback ” Mapas de calor y hagamos clic en un mapa de calor para ver información visual detallada.
En la siguiente pantalla, podrá ver información detallada acerca de sus visitantes, incluyendo:
- Filtro de dispositivos: compare el comportamiento de los usuarios en ordenadores de sobremesa, tabletas y móviles.
- Clics – Vea exactamente dónde hace clic la gente en su página.
- Movimientos del ratón – Seguimiento de cómo los usuarios mueven el ratón por la pantalla.
Si promociona su sitio a través de varios canales, también puede filtrar los datos por campaña UTM, fuente o medio. Esto le ayudará a comprender cómo interactúan con su sitio los visitantes procedentes de diferentes iniciativas de marketing.
Y eso es todo – ¡Has establecido correctamente los mapas de calor de WordPress usando UserFeedback!
Bonus Steps: Maximiza la información de tu mapa de calor 🔥
Los mapas de calor solo son útiles si sabes cómo actuar en función de lo que te dicen. A continuación te explicamos cómo convertir los datos de tus mapas de calor en mejoras reales para tu sitio de WordPress.
Corrección de la caída de visitantes
Puede utilizar mapas de desplazamiento para ver hasta dónde llegan sus visitantes en una página. Si el contenido importante está demasiado abajo en la página, es posible que la mayoría de la gente nunca lo vea.
Puede intentar desplazar elementos clave como las CTA o las ofertas a un lugar más alto de la página, y dividir las páginas largas con secciones más pequeñas y encabezados más claros. También puedes utilizar filtros de fechas para hacer un seguimiento de cómo afectan estos cambios al comportamiento de los visitantes a lo largo del tiempo.
Este pequeño cambio puede reducir las tasas de rebote y mantener la participación de sus visitantes durante más tiempo.
Detectar y resolver las confusiones de los usuarios
A veces, los visitantes intentan hacer clic en imágenes, iconos o texto en los que no se puede hacer clic. Esto demuestra que están confundidos o que esperan algo diferente.
Puede reseñar sus mapas de asignación de clics y movimientos del ratón para detectar estas zonas. Si es necesario, puede enlazar esas imágenes o añadir botones cerca para facilitar las cosas a los usuarios.
También puede establecer una encuesta rápida con UserFeedback para preguntar qué esperaban encontrar los usuarios.
Identificar y corregir problemas de navegación
Si ve que los visitantes saltan con frecuencia de una página a otra sin una orientación clara, es señal de que su navegación puede ser confusa.
Simplifique su navegación asegurándose de que la información es fácil de encontrar y ajustando cualquier cosa que pueda causar confusión. También puedes recorrer los pasos importantes de tu sitio como si fueras un visitante novato para asegurarte de que todo funciona correctamente.
También puede consultar nuestra guía sobre cómo crear un menú de navegación personalizado en WordPress.
Haga que sus botones CTA sean imposibles de pasar por alto
Si sus CTA (botones de llamada a la acción) no reciben suficientes clics, le recomiendo que ajuste su color, texto o ubicación para que destaquen más.
Siga adelante y utilice sus conocimientos sobre el movimiento del ratón para detectar dudas antes de hacer clic y comprobar los filtros de dispositivos para asegurarse de que sus CTA son visibles y fáciles de hacer clic en todos los dispositivos, especialmente en los móviles.
🧑💻 Consejo profesional: Hacer cambios en el contenido y el diseño es sólo el principio. También te recomiendo que establezcas pruebas A/B para comparar diferentes versiones de una página o elemento, como la ubicación de los botones, los colores o el texto del titular, para ver qué funciona mejor.
Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo realizar pruebas A/B en WordPress.
Espero que este artículo te haya ayudado a establecer mapas de calor en WordPress. A continuación, puede que quieras explorar nuestros consejos sobre páginas de destino seleccionados por expertos para disparar las conversiones en WordPress y nuestra guía definitiva sobre geolocalización.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Have a question or suggestion? Please leave a comment to start the discussion.