Qué es Google Tag Manager
Google Tag Manager (GTM) es una herramienta gratuita de Google que permite gestionar todos los scripts de tracking de tu web desde un panel único, sin tocar el código cada vez que añades o cambias algo.
Problema que soluciona
Sin GTM, cada nueva herramienta de tracking requiere tocar tu HTML:
- Añadir GA4: editar
<head> - Añadir Meta Pixel: editar
<head>otra vez - Añadir LinkedIn Insight Tag: tocar HTML
- Configurar un evento de conversión: tocar HTML
- Cambiar disparador de evento: tocar HTML
10 scripts = 10 modificaciones de código. Cada cambio requiere deploy. Inviable para marketers no técnicos.
Con GTM:
- Instalas GTM una sola vez en tu web
- Todo lo demás se gestiona desde el panel GTM
- Sin tocar código nunca más
Estructura
Container
Un GTM “container” es tu instancia. Tiene un ID tipo GTM-XXXXXXX. Una organización puede tener varios containers (uno por web).
Tags
Scripts que quieres ejecutar:
- Google Analytics 4 base tag
- GA4 event (conversion)
- Meta Pixel
- LinkedIn Insight
- Hotjar
- Custom HTML script
Triggers
Cuándo dispararse cada tag:
- Page view (en todas las páginas o solo en algunas)
- Click on element (botón específico)
- Form submission
- Scroll depth
- Time on page
- Custom event (desde código)
Variables
Datos que GTM captura para usar en tags y triggers:
- URL actual
- Texto clicado
- Valor de un elemento del DOM
- DataLayer variables (lo más potente)
Instalación
1. Crear cuenta GTM
tagmanager.google.com → crear cuenta y container.
2. Instalar en tu web
GTM da dos snippets:
<!-- En <head> -->
<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 <body> después del open tag -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>A partir de ahí, no tocas el código de la web. Todo en panel GTM.
Ejemplos de tags típicos
GA4 Configuration tag
Manda el pageview a GA4 en todas las páginas:
- Tag type: Google Analytics 4 Configuration
- Measurement ID:
G-XXXXXXXXXX - Trigger: All Pages
Form submit conversion
Trackea conversión cuando el usuario envía un form:
- Tag type: GA4 Event
- Event name:
form_submit - Trigger: Form Submission (con filtro de form ID específico)
Phone click
Trackea clics en teléfonos:
- Tag type: GA4 Event
- Event name:
phone_click - Trigger: Click on element with
hrefstarting withtel:
DataLayer (avanzado)
Para tracking de ecommerce o eventos complejos, GTM trabaja con dataLayer:
// En tu código, cuando ocurre una compra
window.dataLayer.push({
event: 'purchase',
ecommerce: {
transaction_id: '12345',
value: 199.99,
items: [
{ item_id: 'A1', item_name: 'Producto X', price: 199.99 }
]
}
});GTM captura ese evento y lo manda a GA4, Meta, etc.
Ventajas
- No tocar código: marketers gestionan tracking autónomamente
- Versionado: cada cambio se versionea, puedes hacer rollback
- Workspace de testing: probar cambios antes de publicar
- Múltiples plataformas: GA4, Meta, LinkedIn, TikTok, Hotjar, todo en uno
- Consent Mode integrado: gestiona consentimiento de cookies
Desventajas
- Curva de aprendizaje: tiene su lógica que aprender
- Carga JS extra: GTM en sí mismo pesa 30-50KB (no critical)
- Mal uso lo hace lento: si añades 30 scripts mal configurados, ralentiza la web
- RGPD: cada tag puede requerir consentimiento específico
Server-side GTM
Variante avanzada: GTM ejecutándose en tu servidor en lugar de navegador del usuario.
Ventajas:
- Mejor privacidad (datos no salen del browser)
- Mejor rendimiento (menos JS en cliente)
- Bypass de bloqueadores de tracking
- Cumplimiento iOS ATT
Coste: 50-200€/mes en infraestructura (Google Cloud, Stape, etc.).
Para pyme empezando: GTM normal (client-side) es suficiente. Server-side cuando volumen lo justifique.