Guía para Configurar Google Tag Manager en Webflow

Aprende a integrar y configurar Google Tag Manager en Webflow de manera sencilla

Autor

Marco

Fecha

2/24/2025

Google Tag Manager (GTM) es una herramienta esencial para gestionar etiquetas de seguimiento sin necesidad de modificar el código de tu sitio web. En esta guía, te explicaremos paso a paso cómo configurar GTM en Webflow e implementar eventos personalizados.

¿Qué es Google Tag Manager y por qué usarlo en Webflow?

Google Tag Manager es un sistema de gestión de etiquetas que facilita la implementación y administración de scripts de seguimiento en tu sitio web sin necesidad de tocar el código fuente. Usar GTM en Webflow te permite:

Agregar etiquetas sin depender de un desarrollador.
Administrar píxeles de seguimiento (Google Analytics, Facebook Pixel, etc.).
Configurar eventos personalizados para mejorar el análisis de usuarios.

Paso 1: Crear una cuenta y contenedor en Google Tag Manager

Accede a Google Tag Manager e inicia sesión con tu cuenta de Google.
Haz clic en Crear cuenta y completa los siguientes campos:
- Nombre de la cuenta (ej. "Mi Sitio Web").
- País.
- Nombre del contenedor (ej. "Webflow").
- Tipo de plataforma: selecciona Web.
Acepta los términos y condiciones y haz clic en Crear.
Copia el ID del contenedor (formato: GTM-XXXXXXX).

Paso 2: Agregar GTM en Webflow

Abre Webflow y accede al panel de configuración de tu proyecto.
Ve a la pestaña Custom Code.
En la sección Head Code, pega el siguiente código antes del cierre de <head>:Reemplaza GTM-XXXXXXX con tu ID de contenedor.
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '<https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f)>; })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
En la sección Body Code, pega este fragmento justo después de <body>:
<noscript><iframe src="<https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX>" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
Guarda los cambios y publica tu sitio en Webflow.

‍

Paso 3: Verificar la instalación de GTM

Para confirmar que Google Tag Manager está funcionando correctamente en Webflow:

Abre Google Tag Assistant en tu navegador.
Habilita la extensión y recarga tu sitio Webflow.
Verifica que el código de GTM aparece correctamente en el escaneo.
También puedes usar el modo Preview de Google Tag Manager para probar etiquetas y eventos en tiempo real.

Paso 4: Configurar eventos personalizados en Webflow

Si deseas rastrear interacciones específicas (clics en botones, envíos de formularios, etc.), sigue estos pasos:

En Google Tag Manager, ve a Variables y habilita las Variables incorporadas como "Click ID", "Click Text" y "Click URL".
Crea un Trigger:
- Tipo: Click - Todos los elementos o Click - Solo enlaces.
- Configura condiciones (ej. Click ID contiene boton-contacto).
Agrega una Etiqueta:
- Tipo: Google Analytics: Evento.
- Categoría: "Interacciones".
- Acción: "Clic en Botón".
- Etiqueta: "Contacto".
- Activa la etiqueta con el trigger configurado.
Guarda, publica y prueba el evento en Preview Mode de GTM.

Conclusión

Integrar Google Tag Manager con Webflow te permite tener un mejor control sobre las etiquetas y eventos sin modificar código directamente. Siguiendo esta guía, podrás configurar GTM de manera efectiva y optimizar el seguimiento de tu sitio web.

‍

Puede que te interese