Webflow es uno de los CMS visuales más potentes y utilizados en la actualidad, especialmente por diseñadores y desarrolladores que buscan control total sobre su web sin necesidad de programar desde cero. Pero cuando hablamos de analítica digital, Webflow no incluye integraciones avanzadas por defecto. Por suerte, existen dos formas principales de instalar Google Analytics 4 en Webflow: la integración nativa o usando Google Tag Manager (GTM).
Ambos métodos son válidos, pero cada uno responde a necesidades distintas. Si buscas una configuración básica, rápida y sencilla, puedes usar la opción nativa. En cambio, si lo que necesitas es personalización, flexibilidad y control completo sobre tus eventos y conversiones, la mejor opción es instalar GA4 a través de GTM.
Crear una propiedad nueva en Google Analytics 4
Antes de tocar Webflow, lo primero es crear una nueva propiedad de GA4. Entra en tu cuenta de Google Analytics y haz clic en Start measuring. El asistente te pedirá el nombre de la cuenta y de la propiedad, así como algunos datos básicos sobre el negocio. Si ya tienes una cuenta y solo necesitas una propiedad adicional, ve al apartado Admin y haz clic en “Crear propiedad”.
Una vez creada, dirígete a Admin > Data Streams > Web y copia el Measurement ID, que es el identificador único de esa propiedad.
Cómo añadir GA4 en Webflow con la integración nativa
Webflow permite integrar Google Analytics directamente desde su panel. No necesitas editar código, solo acceder a la configuración de tu sitio.
Abre Webflow, haz clic en los tres puntos junto al nombre de tu proyecto y accede a Settings. En el menú lateral, ve a la sección Apps & Integrations. Verás un campo para introducir tu Measurement ID de GA4.
Una vez pegado el identificador, guarda y publica los cambios para que la analítica comience a recoger datos.
Cómo verificar que GA4 está recibiendo datos correctamente
Para comprobar que todo funciona bien, accede al informe en tiempo real de GA4: Reports > Realtime. Mientras navegas por tu sitio, deberías ver cómo se actualizan las visitas y eventos.
Si no ves datos en tiempo real, activa la extensión Google Analytics Debugger en Chrome. Después, entra en Admin > DebugView dentro de GA4. Esta vista te mostrará los eventos que están ocurriendo en tu sitio, como visitas a páginas o clics.
Limitaciones de la integración nativa de GA4 en Webflow
Aunque esta integración es útil, es bastante limitada. Solo recoge eventos automáticos como pageviews o clics externos. Si quieres medir formularios, vídeos, botones o cualquier acción personalizada, esta solución no es suficiente.
Aquí es donde entra Google Tag Manager. Con GTM puedes enviar cualquier tipo de interacción como evento a GA4 sin tocar el código del sitio directamente.
Cómo instalar Google Tag Manager en Webflow
Para instalar GTM necesitas tener un plan de pago en Webflow y tener conectado un dominio personalizado. Si tu sitio termina en “.webflow.io”, no podrás añadir GTM correctamente.
Entra en tu cuenta de GTM y crea un nuevo contenedor. Una vez dentro, copia el bloque de código del contenedor que aparece en la pantalla de bienvenida.
Vuelve a Webflow, accede a Settings > Custom Code, y pega el bloque dentro del <head> de tu sitio. Guarda los cambios y haz clic en Publish to selected domains para asegurarte de que se aplican en producción.
Verificar que GTM se ha instalado correctamente
Abre Tag Assistant desde el modo “Preview” de GTM e introduce la URL de tu Webflow. Si el asistente se conecta y te muestra el entorno, significa que GTM está funcionando correctamente en tu web.
Pero ojo, esto no quiere decir que GA4 ya esté activo. Solo has añadido GTM, ahora toca crear la etiqueta de GA4.
Cómo instalar GA4 dentro de Google Tag Manager
En el panel izquierdo de GTM, haz clic en Tags > New. En la configuración de la etiqueta, selecciona Google Analytics > Google Tag. Este será el canal por donde se enviarán todos los datos a tu propiedad de GA4.
Ahora tienes que añadir el Measurement ID. Para mantener ordenado tu contenedor, lo mejor es crear una variable constante con ese valor. Haz clic en el icono “+”, selecciona Constant como tipo de variable y pega el ID que copiaste antes desde GA4.
Nombra la variable con algo claro, como “Constant – G-XXXXXXXXXX”. Ahora podrás reutilizar ese ID en todas tus etiquetas sin tener que copiarlo manualmente.
Configurar el disparador para todas las páginas
Dentro de la etiqueta de GA4, haz clic en Triggering y selecciona Initialization – All Pages. Esto garantiza que la etiqueta se cargue en todas las páginas y lo haga antes que cualquier otra etiqueta, ideal para un buen control de sesión desde el primer momento.
Guarda y nombra la etiqueta como “GA4 – Config”.
Cómo comprobar si GA4 se ha implementado correctamente
Usa nuevamente el modo Preview de GTM. Si todo está correcto, verás la etiqueta “GA4 – Config” dispararse en cada página que visites. Puedes además verificar en el DebugView de GA4 si los eventos comienzan a llegar.
Una vez hecho esto, publica los cambios en GTM.
Ventajas de usar Google Tag Manager en Webflow
La principal ventaja es que ahora tienes el control completo para medir cualquier interacción que ocurra en tu sitio sin editar el código HTML. Puedes crear eventos personalizados, aplicar reglas de activación, utilizar triggers avanzados como scroll depth, visibilidad de elementos o clics en botones.
También puedes importar datos a otras plataformas como Google Ads o Meta Ads. Además, el modo Preview de GTM es más detallado que DebugView y te permite detectar errores de disparo con más precisión.
Y si en el futuro necesitas medir conversiones personalizadas, hacer seguimiento de formularios o implementar píxeles de terceros, ya tienes el sistema preparado.
Qué hacer después de instalar GA4 y GTM en Webflow
Una vez que tu sistema de analítica esté en marcha, puedes empezar a implementar eventos avanzados. Algunas ideas interesantes:
Medir scroll hasta el 75% de página, para ver el engagement real del contenido
Enviar eventos cuando el usuario interactúa con un botón de contacto
Detectar cuándo un usuario completa un formulario y enviar la conversión a Google Ads
Configurar eventos para vídeos embebidos de YouTube o Vimeo
Crear audiencias personalizadas en base a eventos específicos
Si tienes múltiples formularios, puedes diferenciar cada uno mediante su ID y generar eventos independientes para cada uno en GA4.
¿Quieres que te prepare también un artículo para configurar scroll tracking o conversiones personalizadas en Webflow con GTM y GA4?