Cómo añadir Google Tag Manager a tu sitio web (configuración) | We.Inc
Instala Google Tag Manager tal como lo documenta Google: fragmentos del head y del body, una etiqueta de Google para GA4, el modo Vista previa y el seguimiento de apps de una sola página. Generador de fragmentos para tu ID de GTM.
Crea un contenedor en Tag Manager para obtener un ID como GTM-ABCD123. Pega el primer fragmento de Google lo más arriba posible en el <head> y el segundo, un iframe noscript, justo después de la etiqueta de apertura <body> en todas las páginas. Después añade etiquetas, como la de Google Analytics, dentro de Tag Manager y publica.
La configuración de un vistazo
Paso
Dónde
Qué haces
1. Crea un contenedor
Elige Web como plataforma y anota el ID GTM-
2. Instala los fragmentos
El HTML de tu sitio o los ajustes del tema
Fragmento del head arriba en <head>, fragmento noscript justo después de <body>
3. Añade una etiqueta
Espacio de trabajo de Tag Manager
Para Analytics: tipo de etiqueta Etiqueta de Google con tu ID G-
4. Prueba
Botón Vista previa
Tag Assistant se conecta a tu sitio y muestra qué etiquetas se activaron
5. Publica
Enviar en el espacio de trabajo
Nada se activa en tu sitio hasta que publicas
Google Tag Manager es un contenedor gratuito para códigos de seguimiento. En lugar de pegar el script de cada herramienta en tu sitio, instalas un contenedor una sola vez y después añades, cambias o eliminas etiquetas (pequeños scripts de analítica, anuncios y herramientas similares) desde la web de Tag Manager. Escribe el ID de tu contenedor en el generador para obtener los dos fragmentos listos para pegar.
Introduce el ID de tu contenedor. El generador comprueba que tenga la forma GTM- seguido de letras y números.
Copia el fragmento del head en el <head> de cada página, lo más arriba que puedas.
Copia el fragmento del body en la línea justo después de la etiqueta de apertura <body>.
Abre Tag Manager, haz clic en Vista previa, introduce la dirección de tu sitio y confirma que Tag Assistant indica Conectado.
Instala un contenedor por sitio. La guía de la capa de datos de Google advierte de que más de una capa de datos por página hace que las etiquetas fallen.
Si una página define datos para las etiquetas, pon window.dataLayer = window.dataLayer || []; y tus llamadas push por encima del fragmento del contenedor.
Elimina cualquier código de Analytics que hayas pegado directamente antes de añadir la misma etiqueta en Tag Manager, o cada visita se contará dos veces.
Muchos creadores de sitios web tienen un campo para el ID de GTM. Si el tuyo lo tiene, úsalo y no pegues nada a mano.
Preguntas frecuentes
¿Dónde va exactamente el código de Google Tag Manager?
La ayuda de instalación de Google indica pegar el primer bloque lo más arriba posible en la etiqueta <head> y el segundo bloque justo después de la etiqueta de apertura <body>, en todas las páginas del sitio.
¿Sigo necesitando la parte noscript?
Google la incluye en el código de instalación. Es un iframe dentro de un elemento noscript, que los navegadores solo usan cuando JavaScript está desactivado. Pégala exactamente como te la da Google.
¿Cómo añado Google Analytics 4 a través de Tag Manager?
En Tag Manager, añade una etiqueta nueva, elige Etiqueta de Google como tipo e introduce tu ID de etiqueta que empieza por G-. Elige un activador de inicialización, guarda, pruébala en Vista previa y después publica.
¿Por qué Tag Manager no registra los cambios de página en mi app de una sola página?
Las apps que cambian de página sin recargar no provocan una nueva carga de página. Usa el activador Cambio de historial, que según Google se activa cuando cambia el fragmento de la URL o cuando el sitio usa la API pushState de HTML5.
¿Google Tag Manager es gratis?
La versión estándar es de uso gratuito. Google también vende Tag Manager 360 como parte de sus productos para empresas.
Cómo probar con el modo Vista previa
En tu espacio de trabajo, haz clic en Vista previa arriba a la derecha. Tag Assistant se abre en una pestaña nueva: introduce la dirección de tu sitio y haz clic en Conectar. Tu sitio se abre en una ventana nueva y muestra Conectado en la esquina.
De vuelta en la pestaña de Tag Assistant, haz clic en Continuar para ver cada evento y qué etiquetas se activaron. Corrige lo que no se haya activado antes de publicar.
Cómo enviar tus propios eventos
La capa de datos es un array de JavaScript que pasa información a Tag Manager. Envía un objeto con una clave event, como un alta en la newsletter, y crea un activador de Evento personalizado con el mismo nombre.
La guía de Google dice que la capa de datos distingue mayúsculas y minúsculas, así que dataLayer funciona y datalayer no, y que solo debes hacer push en ella, nunca reasignarla.
Enviar un evento a la capa de datos
Úsalo cuando ocurra algo que Tag Manager no puede ver por sí mismo, como un formulario que se envía sin salir de la página.
Evento de alta en la newsletter
Crea en Tag Manager un activador de Evento personalizado llamado newsletter_signup para activar etiquetas con él.
Los activadores que usarás primero
Activadores habituales de Tag Manager
Activador
Se activa cuando
Uso típico
Inicialización
Antes que todos los demás activadores excepto Inicialización del consentimiento
Etiqueta de Google para Analytics
Página vista
Cuando el navegador empieza a cargar una página
La mayoría de las demás etiquetas a nivel de página
Cambio de historial
Cambia el fragmento de la URL o la página llama a pushState
Páginas vistas en apps de una sola página
Evento personalizado
Tu código envía un evento coincidente a la capa de datos
Envíos de formularios, altas, reservas
Clic
Un visitante hace clic en un elemento o enlace
Clics en enlaces de teléfono y email
Generador de fragmentos
Escribe el ID de tu contenedor, que aparece en la parte superior de tu espacio de trabajo de Tag Manager. Todo se genera en tu navegador.
ID del contenedor
Parece correcto. Pega ambos fragmentos en todas las páginas.
Eso no parece un ID de contenedor. Debe empezar por GTM- seguido de letras y números.
1. Pégalo lo más arriba posible en el <head>
2. Pégalo justo después de la etiqueta de apertura <body>