Guía rápida para añadir mapas de calor y grabaciones de sesión gratuitos a tu sitio con Google Tag Manager y Microsoft Clarity, la alternativa gratuita a Hotjar.
Empecemos por lo básico: para seguir esta guía necesitas tener Google Tag Manager instalado y una cuenta de Microsoft Clarity. Si aún no tienes Tag Manager, puedes consultar este artículo sobre cómo instalar Tag Manager en Webflow, nuestra plataforma de referencia. Milk Moon Studio es ante todo un estudio Webflow, y a quienes diseñan en Webflow les gusta trabajar con poco código y de forma limpia, así que aunque seas experto en Webflow y no lo uses, prueba Tag Manager. Mantendrá tu proyecto ordenado, con solo el script de Tag Manager en tu <head>, lo que facilita muchísimo la gestión de scripts.
Para que tu sitio siga siendo rápido, también te recomendamos aplicar nuestra guía de etiquetas diferidas a la etiqueta de Microsoft Clarity que vamos a crear en Tag Manager.
Una aclaración: si quieres ir a lo más técnico, Hotjar es una gran solución para el problema que intentamos resolver. Permite ver grabaciones de flujos concretos y eventos de conversión, entre otras cosas, lo que requiere un poquito de código (además de extras como las encuestas rápidas). Pero para quienes solo necesitan ver qué hacen sus usuarios y detectar puntos de fricción en su sitio, Clarity es genial y gratuito. Obtienes los mapas de calor y las grabaciones de sesión de siempre sin coste alguno, y es muy fácil detectar problemas como los clics muertos y los clics de frustración. Incluso se vincula con tu cuenta de Google Analytics para ofrecer datos más precisos. Cuando escribimos esto, eso significaba una cuenta de Universal Analytics (UA), y enlazamos nuestra guía de configuración de UA. UA ya se ha desactivado, así que usa en su lugar nuestra guía para añadir Google Analytics 4 con Zaraz. La guía original de UA sigue disponible como referencia: para ayuda con la configuración de UA en Tag Manager, consulta este artículo.
Actualización, 2026: Clarity sigue siendo gratuito. Las preguntas frecuentes de Microsoft dicen: "Clarity is a free service forever. You never encounter traffic limits or are compelled to upgrade to a paid version." (Clarity es un servicio gratuito para siempre. Nunca te encuentras con límites de tráfico ni te obligan a pasarte a una versión de pago). Además, ahora admite Google Analytics 4 y cuenta con una plantilla oficial para Tag Manager, que tratamos en el paso 2. Clarity también necesita el consentimiento válido de los visitantes en las jurisdicciones que lo exigen para usar todas sus funciones, incluidas las grabaciones de sesión. Analizamos cómo afecta eso a tus datos en el dilema del consentimiento de cookies.
Paso 1: Crea un proyecto de Microsoft Clarity
Una vez que te hayas registrado en Clarity, ve a My Projects y haz clic en Add new project.
Ponle un nombre a tu proyecto, indica tu URL y elige una categoría; luego haz clic en Create.
Ahora conéctalo a tu Google Analytics para obtener datos más precisos.
Haz clic en Get Started y selecciona la cuenta de Google que usas para GA.
Dale acceso a Clarity.
Ahora selecciona la cuenta de Analytics con la que quieres vincularlo. En ese momento, Microsoft Clarity solo admitía cuentas de Google Analytics UA y no GA4. Puedes encontrar ayuda para configurarlo y añadirlo a Tag Manager en este artículo.
Actualización, 2026: UA dejó de procesar datos el 1 de julio de 2023 (Google: "All standard Universal Analytics properties will stop processing new hits on July 1, 2023", es decir, todas las propiedades estándar de Universal Analytics dejarán de procesar nuevos hits el 1 de julio de 2023), por lo que las capturas de pantalla anteriores muestran el flujo antiguo. Clarity admite GA4, pero lo conectas introduciendo tu Account ID, Measurement ID y Property ID de GA4, en lugar de elegir una cuenta de una lista. Clarity no envía la URL de reproducción a GA4 y no admite los segmentos de GA en GA4 (fuente: Microsoft Learn, Google Analytics 4 integration with Clarity). Nuestra guía de eventos de GA4 combina muy bien con las grabaciones de Clarity.
Paso 2: Instala la etiqueta
Copia el fragmento de código.
Ve a Tag Manager y crea una etiqueta nueva.
Ahora ponle un nombre a la etiqueta, selecciona Custom HTML como tipo de etiqueta y pega el fragmento.
Como activador puedes elegir simplemente All Pages, pero nosotros vamos a usar nuestro activador Fully Loaded. Es el activador diferido que configuramos en este artículo. Con el activador All Pages funciona perfectamente. El activador diferido solo da tiempo a que todo lo demás de la página se cargue primero, para una experiencia algo mejor en PageSpeed y para dejar a Google un poquito más contento.
Actualización, 2026: Microsoft ahora recomienda una vía más sencilla que pegar el fragmento. En Clarity, ve a Settings, luego Setup, luego Google Tag Manager, y selecciona Finish setup. Inicia sesión, elige tu cuenta y contenedor de GTM y selecciona Create and publish. O bien, en Tag Manager, elige Discover more tags en la Community Template Library, busca Clarity, añade la plantilla oficial de Microsoft Clarity e introduce el ID de tu proyecto de Clarity. Custom HTML, tal como se muestra aquí, sigue funcionando. Fuente: Microsoft Learn, How to install Clarity on Google Tag Manager. Elijas la vía que elijas, la etiqueta de Clarity puede seguir usando el activador diferido descrito arriba.
Ahora haz clic en Submit y Publish y listo. Los resultados aparecerán en unas horas y deberías ver algo como esto:
¿Tienes preguntas sobre cómo configurar el análisis del comportamiento? Escríbenos en los comentarios; y encontrarás más guías prácticas aquí.
Preguntas frecuentes
¿Es Microsoft Clarity realmente gratuito?
Sí. Las preguntas frecuentes de Clarity de Microsoft dicen que es "a free service forever" (un servicio gratuito para siempre), sin límites de tráfico ni actualización de pago. Obtienes mapas de calor, grabaciones de sesión e información como clics muertos y clics de frustración sin coste alguno.
¿Cómo instalo Clarity con Google Tag Manager?
Crea un proyecto de Clarity y luego conéctalo desde la página Settings, Setup, Google Tag Manager de Clarity, añade la plantilla oficial de Microsoft Clarity en Tag Manager o pega el código de seguimiento en una etiqueta Custom HTML, como se muestra arriba. Configura el activador en All Pages o en un activador diferido, y luego haz Submit y Publish.
¿Funciona Microsoft Clarity con GA4?
Sí. Cuando escribimos este artículo, Clarity solo se vinculaba con Universal Analytics, que ya se ha desactivado. Ahora Clarity se conecta con GA4 mediante tu Account ID, Measurement ID y Property ID de GA4. Microsoft indica que no envía a GA4 la URL de reproducción de la grabación.
