Parte 1: crea un contenedor de Google Tag Manager, instálalo en Webflow con el código del head y un embed en el body, y pruébalo. La parte 2 añade Google Analytics 4.
Actualización, octubre de 2026: Google ha cambiado algunas cosas desde que escribimos esto. Universal Analytics dejó de procesar datos en julio de 2023 y Google Optimize se cerró en septiembre de 2023, así que si los ves en las capturas de pantalla de abajo, no los necesitarás. La extensión de Chrome Tag Assistant que usamos para las pruebas se ha fusionado desde entonces en una sola extensión, llamada simplemente Tag Assistant, en el mismo enlace de la Chrome Web Store. Los pasos de abajo siguen funcionando, pero Webflow ha añadido desde entonces un ajuste nativo de Google tag en Site settings, Apps & Integrations, y Webflow sugiere pasar a él las etiquetas de Google con código personalizado (aquí tienes su artículo sobre el tema). Webflow indica que allí puedes conectar tu Google tag o Google Tag Manager, así que merece la pena echarle un vistazo si prefieres evitar el código. Nosotros no hemos probado ese camino, así que el método del código en el head y el embed en el body que mostramos abajo es el que sabemos que funciona. Si prefieres ejecutar tus etiquetas en el edge, échale un vistazo a nuestra guía de Cloudflare Zaraz y Google Analytics 4 en Webflow.
Aunque Webflow suele ser la solución sin código de referencia para diseñar sitios web de forma rápida y sencilla, y me atrevería a decir que también para desarrollarlos, instalar Google Tag Manager correctamente puede ser un poco un apaño. Por desgracia, Webflow nos ha dejado una forma rápida, pero poco robusta, de añadir GA a tu proyecto. No pasa nada, y si lo único que necesitas es añadir Google Analytics, sigue simplemente su guía. Si necesitas algo más flexible para añadir no solo Google Analytics, sino también seguimiento de conversiones, anuncios, redes sociales, etc., Tag Manager es el camino.
Hoy te explicaremos la solución más sencilla para poner Tag Manager en marcha lo antes posible y que funcione al 100 %. Milk Moon Studio es un pequeño estudio de Webflow centrado en el diseño, así que para nosotros una solución low-code es la forma más simple de hacerlo con el menor esfuerzo posible. Usar Tag Manager evita tener un montón de scripts de seguimiento y conversión en el <head> del proyecto que hay que gestionar y mantener. Con este enfoque añades el script de Tag Manager y, a partir de ahí, puedes gestionar todo lo demás desde Tag Manager. Limpio y ordenado, como le gusta a cualquier diseñador de Webflow.
Pero primero lo primero:
Configura un contenedor de Tag Manager
Si aún no lo has hecho, te lo explicamos rápidamente. (Hemos escrito un artículo aparte sobre por qué deberías usar Tag Manager y no solo la instalación básica de Google Analytics pegando el código de seguimiento GA UA en Webflow, y sobre otras muchísimas ventajas de Tag Manager: por qué deberías usar Google Tag Manager en Webflow.)
Paso 1: crea una cuenta de Tag Manager
Esta parte es muy fácil. Regístrate en Tag Manager y pulsa Create Account.
Ponle un nombre a la cuenta, selecciona el país, escribe tu URL y pulsa Web.
Después de aceptar el acuerdo de usuario llegarás a las instrucciones de instalación. La primera parte es simplemente copiar y pegar, pero la segunda, la que va dentro de la etiqueta <body>, será un poco más difícil.
Paso 2: instala Tag Manager en Webflow
Cuando llegues a la pantalla de arriba, copia el código que va en el <head> y ve a la página de ajustes de tu proyecto de Webflow.
Una vez en los ajustes, abre Custom Code, pega el código del contenedor de Tag Manager en la sección Head Code y guarda. Esta parte es tan fácil como contar 1, 2, 3.
La siguiente parada es el Designer. Añade un HTML Embed nuevo.
Pega el segundo fragmento de código de Tag Manager, el que se supone que va en el <body>. Guarda y cierra.
Te recomendamos convertirlo en un Símbolo / Componente, ya que vas a reutilizarlo en todas las páginas de tu proyecto de Webflow.
Una vez convertido en Símbolo, arrástralo hasta arriba del todo, justo debajo del elemento Body. Siempre querrás que esté en lo más alto de la lista de elementos de cada página.
Y ya está. Tag Manager queda incrustado de forma segura en tu proyecto de Webflow. Solo recuerda comprobar que esté en lo más alto de cada página en tu lista de elementos del Navigator y publicar el contenedor en Tag Manager antes de publicar tu proyecto de Webflow. El código de tu <head> hace el trabajo pesado. El código de tu símbolo es el respaldo noscript, que solo entra en juego para los visitantes que tienen JavaScript desactivado.
Pero espera, hay más:
Paso 3: pruebas
Naturalmente, quieres asegurarte de que Tag Manager está instalado, así que vamos a probarlo.
Te conviene instalar esta extensión para Chrome (lo sentimos, usuarios de Safari).
Asegúrate de haber publicado primero Tag Manager y después Webflow, y ahora ve a tu sitio.
Abre la extensión y pulsa Enable.
Hecho esto, actualiza la página (comando+R).
La extensión debería mostrar ahora un numerito (variará según el número de etiquetas cargadas):
Verás que la mía tiene cuatro. El número 4 es mi contenedor de Tag Manager; la parte borrosa es el ID de mi contenedor, que debería coincidir con mi contenedor en el propio Tag Manager.
El nº 1 es mi etiqueta de Google Analytics 4, el nº 2 es mi antigua etiqueta de Google Analytics (Universal Analytics) y el nº 3 es Google Optimize. Tenemos artículos sobre cómo configurarlas en Tag Manager, incluido cómo añadir información gratuita sobre comportamiento con Tag Manager y Microsoft Clarity, así que no te preocupes: si acabas de crear tu contenedor, no verás ninguna de ellas.
Pero sí, eso es todo, bien hecho, has configurado Google Tag Manager en Webflow. Como apunte, no te preocupes por la carita azul triste junto al contenedor de Tag Manager, es solo porque esta es una implementación no estándar de Tag Manager. Por desgracia, esto es prácticamente lo mejor que hay: hasta que Webflow cambie las cosas no vas a ver una carita verde sonriente, pero todo funciona perfectamente, confía en nosotros.
En la parte 2 de esta serie explicaremos cómo configurar Google Analytics en Tag Manager. Puedes encontrar la parte 2 aquí. También puedes consultar cómo vincular tu cuenta de GA4 a BigQuery aquí y una guía para acelerar tu sitio con etiquetas diferidas aquí.
Preguntas frecuentes
¿Cómo añado Google Tag Manager a Webflow?
Crea un contenedor de Tag Manager, pega el primer fragmento en Site settings (que se llamaba Project settings cuando escribimos esto), Custom code, Head code, y añade el segundo fragmento a un HTML Embed en lo más alto de todas las páginas, justo debajo del elemento Body. Después, publica el contenedor en Tag Manager antes de publicar tu proyecto de Webflow. Los pasos 1 y 2 de arriba te guían por el proceso.
¿Dónde va el código del body de Google Tag Manager en Webflow?
En un HTML Embed que esté en lo más alto de cada página, bajo tu elemento Body en el Navigator. Convertimos ese embed en un Símbolo / Componente para poder reutilizarlo en todas las páginas. Contiene la versión noscript del contenedor, que solo se ejecuta para los visitantes que tienen JavaScript desactivado; el código del head hace el trabajo de verdad.
¿Cómo añado Google Analytics 4 a Webflow con Tag Manager?
Instala primero el contenedor, como se explica arriba, y luego añade tu etiqueta de Google Analytics 4 dentro de Tag Manager. Lo explicamos en la parte 2, cómo añadir Google Analytics a Webflow con Tag Manager. Si lo único que necesitas es Analytics, la configuración propia de Google Analytics de Webflow es más rápida, pero Tag Manager es más flexible cuando añades seguimiento de conversiones, anuncios o redes sociales.
¿Por qué Tag Assistant muestra una carita azul triste junto a mi contenedor?
Porque es una implementación no estándar de Tag Manager y Webflow no nos deja hacerla de la forma estándar. Todo sigue funcionando perfectamente.
Si tienes alguna pregunta, escríbenos en los comentarios y no olvides echar un vistazo a la sección How-To de nuestro blog para más tutoriales.
Actualización Hemos añadido contenido en vídeo al principio del artículo para que sea más fácil seguirlo, así que esperamos que ayude. Suscríbete al canal para estar al día de nuestros próximos tutoriales y contenidos actualizados.
