Cómo configurar Google Tag Manager avanzado: triggers y variables

Qué vas a lograr

Configurar en GTM: eventos de scroll depth (25%, 50%, 75%, 90%), time on page (30s, 60s), visibilidad de elemento específico (formulario en pantalla), variables personalizadas con lógica JavaScript, y dataLayer push para pasar datos dinámicos del sitio al tracking. Todo sin pedir ayuda al developer para cada cambio.

Requisitos previos

• GTM instalado y funcionando en tu sitio
• GA4 básico configurado en GTM
• Acceso Editor a GTM
• Conocimiento básico de HTML y JavaScript (ayuda pero no es obligatorio)
• Chrome con extensión Tag Assistant instalada

Paso 1 — Variables avanzadas: dataLayer y JavaScript custom

1. GTM: Variables → New → Data Layer Variable
2. Sirve para capturar valores que el sitio empuja al dataLayer: nombre del producto, precio de carrito, categoría, ID de usuario logueado
3. Tu developer agrega en el código del sitio: window.dataLayer.push con objeto JSON que contiene event y los valores a pasar
4. En GTM: Variable → Data Layer Variable → Data Layer Variable Name con el nombre exacto del campo
5. Ahora usas esa variable en cualquier tag o trigger con la notación de doble llave
6. Custom JavaScript Variable: Variables → New → Custom JavaScript → escribe función que retorna el valor que necesitas, por ejemplo capturar el H1 de cualquier página automáticamente

Paso 2 — Trigger de Scroll Depth

1. GTM: Triggers → New → Scroll Depth
2. Configura: Vertical Scroll Depths con 25, 50, 75, 90 (porcentajes), This trigger fires on All Pages
3. Crea tag GA4 Event que dispara con este trigger: Event Name scroll_depth, Parámetro percent_scrolled → valor variable built-in Scroll Depth Threshold
4. Publica el workspace y verifica en GA4 que el evento aparece con el parámetro correcto

Paso 3 — Trigger de Visibilidad de Elemento

1. Triggers → New → Element Visibility
2. Selection Method: CSS Selector
3. Element Selector: el ID o clase del elemento que quieres trackear (ej. #contactForm o .pricing-section)
4. When to fire: Once per element
5. Minimum Percent Visible: 50% (se dispara cuando la mitad del elemento es visible en pantalla)
6. Crea tag GA4 Event: element_visible para saber qué porcentaje de visitantes llegan a ver tu formulario o sección de precios

Paso 4 — Trigger de Timer (tiempo en página)

1. Triggers → New → Timer
2. Interval: 30000 (30 segundos en milisegundos)
3. Limit: 3 (máximo 3 disparos: 30s, 60s, 90s)
4. Enable when: Page URL contains /blog/ para limitar solo a blog
5. Tag GA4: evento time_on_page con parámetro de segundos calculado
6. Permite segmentar lectores reales (30+ segundos) de rebotes rápidos

Verificación y troubleshooting

• Usa siempre Preview Mode de GTM antes de publicar. El panel muestra cada trigger que se dispara en tiempo real con todos sus valores.
• Tag no se dispara: revisa el orden de condiciones en el trigger, todas deben cumplirse simultáneamente
• Eventos duplicados en GA4: verifica en Preview que el mismo evento no se dispara 2+ veces en el mismo momento
• dataLayer variable undefined: verifica que el push del dataLayer ocurre ANTES de que GTM lea la variable

Próximos pasos y optimización

• Versioning: nombra tus versiones descriptivamente en GTM para poder hacer rollback si algo falla
• Environments: crea GTM Environment de Staging para probar cambios antes de publicar en producción
• Folder organization: agrupa tags, triggers y variables en folders por propósito (GA4, Meta Pixel, Hotjar) para workspace limpio

En Weblindrome ofrecemos Análisis de datos para ayudarte con esta y otras implementaciones. Solicita una cotización personalizada.