Cómo instalar Google Tag Manager y verificarlo con Tag Assistant

Por el equipo de Mayab Media · Nivel: Principiante · Tiempo: 45 minutos

Pegaste el código de Google Tag Manager en tu sitio, pero Tag Assistant dice que no encuentra el contenedor. O GTM funciona en unas páginas y en otras no. O GA4 ahora cuenta cada vista de página dos veces. Todo esto sale del mismo lugar: cómo y dónde se instaló el contenedor.

Google Tag Manager (GTM) es un contenedor que carga tus demás etiquetas, como GA4, Google Ads y Meta. Lo instalas una vez y después administras las etiquetas desde GTM sin tocar el sitio cada vez. Hacer bien esa primera instalación importa, porque todas las etiquetas que agregues después dependen de ella.

Algo cambió hace poco. Las guías viejas (y los contenedores viejos) hablan de dos fragmentos: un script para el <head> y un iframe <noscript> justo después de <body>. La pantalla de instalación actual de GTM muestra un solo fragmento, que va justo después de la etiqueta de apertura <head>. Los sitios que ya tienen el código antiguo de dos partes no necesitan cambiarlo, pero una instalación nueva solo necesita ese bloque.

Esta guía cubre cómo crear el contenedor, colocar el código en un sitio a la medida, en WordPress, en Shopify y en Squarespace, agregar tu primera etiqueta y verificar todo con Tag Assistant antes y después de publicar.

Respuesta rápida

1. Crea un contenedor Web en tagmanager.google.com.
2. Abre Admin > Install Google Tag Manager (o haz clic en tu ID GTM- en el espacio de trabajo). Usa Select your platform si tienes un CMS, o la pestaña Install manually (instalar manualmente) para copiar el fragmento.
3. Pega ese único fragmento justo después de la etiqueta de apertura <head> en todas las páginas. Las instrucciones actuales ya no incluyen fragmento para el <body>.
4. Quita cualquier otra copia de GTM o etiquetas de GA4 escritas a mano que dupliquen datos.
5. Agrega una etiqueta de Google Analytics (o Google Tag) con tu ID de GA4, activada en la inicialización de todas las páginas.
6. Haz clic en Preview (vista previa), conecta Tag Assistant a tu sitio y confirma que aparecen el contenedor y la etiqueta.
7. Haz clic en Submit > Publish (enviar y publicar) y revisa otra vez el sitio en vivo con Tag Assistant.

Antes de empezar

Necesitas:

• Una cuenta de Google con permiso para crear una cuenta de GTM, o acceso para Publish (publicar) en un contenedor existente.
• Acceso para editar el código, el tema o el área de inyección de código de tu sitio.
• Tu ID de medición de GA4 (empieza con G-) si vas a agregar GA4 desde ahora.
• Chrome y, para que la vista previa conecte sin problemas, la extensión de Tag Assistant.

Revisa dos cosas primero.

¿Ya existe un contenedor? Abre tu sitio, haz clic derecho y elige Ver código fuente de la página. Busca googletagmanager.com/gtm.js. Si encuentras un ID de GTM, averigua de quién es antes de agregar otro. Dos contenedores casi siempre significan medición duplicada.

¿GA4 está escrito a mano en el código? Busca gtag/js?id=G- en el código fuente. Si GA4 ya está instalado directo y lo vas a pasar a GTM, quitarás el código anterior en el paso 3.

Respalda tu tema o copia el código actual del encabezado en un archivo de texto antes de editar.

Paso 1: Crea la cuenta y el contenedor

Entra a tagmanager.google.com y haz clic en Create Account (crear cuenta). El formulario Add a New Account tiene dos partes.

• Account Setup (configuración de la cuenta): el Account Name (nombre de tu empresa) y el Country (país). También hay una casilla opcional para compartir datos de forma anónima con Google.
• Container Setup (configuración del contenedor): el Container name (normalmente tu dominio, como www.example.com) y la Target platform (plataforma de destino).

Para un sitio web normal, elige Web. Las demás plataformas (iOS, Android, AMP si aparece, y Server) son para apps y etiquetado del lado del servidor, que es otra configuración.

Haz clic en Create y acepta las condiciones. GTM abre el espacio de trabajo del contenedor nuevo.

Si la cuenta ya existe, ábrela y crea un contenedor nuevo desde la pestaña Admin.

Paso 2: Abre las instrucciones de instalación

El código de instalación está en dos lugares:

• En la pestaña Workspace (espacio de trabajo), haz clic en el ID de tu contenedor (se ve como GTM-XXXXXXX), junto a Workspace Changes, arriba a la derecha.
• En la pestaña Admin, en la columna del contenedor, haz clic en Install Google Tag Manager.

De cualquier forma se abre un panel llamado Installation instructions (instrucciones de instalación) con dos pestañas.

Install with a website builder or CMS (instalar con un creador de sitios o CMS). Muestra los íconos de WordPress, Wix, Drupal, Shopify, Squarespace, TYPO3 y Duda, y un botón Select your platform (elige tu plataforma). La idea de Google es que muchas plataformas tienen su propia integración y así te ahorras copiar código. Úsala si tu plataforma aparece y prefieres su configuración nativa.

Install manually (instalar manualmente). Esta pestaña muestra el código, con el texto que pide pegarlo en el código de cada página, inmediatamente después del elemento <head>, y advierte que no agregues más de una etiqueta de Google por página.

El fragmento se ve así, con el ID de tu contenedor:

<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
</script>

Cópialo con el ícono de copiar en lugar de escribirlo. El ID debe ser el de tu contenedor. Esta versión no tiene iframe <noscript>, así que no hay nada que poner después de <body>.

Si en un sitio existente ves el código antiguo de dos partes (un script (function(w,d,s,l,i){...}) más un iframe <noscript>), sigue funcionando. La ayuda de instalación de Google dice que no hace falta reemplazarlo. Solo no agregues el fragmento nuevo junto a él, o GTM cargará dos veces.

Paso 3: Instala el fragmento en tu plataforma

La regla es igual en todas partes: cada página recibe el fragmento una vez, lo más arriba que puedas dentro del <head>. Así se ve en las plataformas más comunes.

Sitios a la medida o hechos a mano

Edita la plantilla compartida del encabezado, no páginas sueltas:

<head>
  <script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
  </script>
  <meta charset="utf-8">
  <title>Ejemplo</title>
  ...
</head>

Si usas una plataforma de gestión de consentimiento (CMP) que debe fijar los valores predeterminados de Consent Mode primero, sigue sus instrucciones sobre el orden. Normalmente el script de la CMP o el comando gtag('consent', 'default', ...) va justo antes del fragmento de GTM. Si tu CMP funciona como plantilla dentro de GTM con el activador Consent Initialization - All Pages, el orden se resuelve dentro de GTM.

WordPress

Tienes tres opciones comunes. Elige una, no varias.

• Un plugin de código para encabezado y pie (por ejemplo WPCode u otro similar). Pega el fragmento en la caja del encabezado.
• Site Kit de Google. Puede conectar Tag Manager y colocar el contenedor por ti.
• Un tema hijo. Agrega el fragmento con el hook wp_head en functions.php, con un número de prioridad bajo para que salga temprano. No edites el header.php del tema padre, porque las actualizaciones lo sobrescriben.

add_action('wp_head', function () { ?>
  <!-- Fragmento de GTM de Install manually aquí -->
<?php }, 1);

Después de instalar, limpia la caché del plugin que uses y la de tu CDN. Las páginas en caché pueden seguir mostrando el HTML anterior sin GTM.

Shopify

Shopify tiene dos zonas que se comportan distinto.

• Páginas de la tienda (inicio, colecciones, productos, carrito): agrega el fragmento al archivo theme.liquid de tu tema. Abre Tienda online > Temas, haz clic en los tres puntos > Editar código y pégalo justo después de <head>. Duplica el tema primero.
• Checkout y página de agradecimiento: ahí no corre el código del tema. Shopify usa Eventos del cliente (píxeles personalizados) en Configuración para medir el checkout. Un contenedor de GTM cargado dentro de un píxel personalizado corre en un entorno aislado, así que la vista previa y muchos activadores integrados no funcionan como siempre.

Para Google Ads y GA4 en Shopify, muchos profesionales usan la app Google & YouTube para medir compras y dejan GTM para otras etiquetas. Decídelo antes de instalar para no contar compras dos veces.

Squarespace

Usa Code Injection (inyección de código). En Squarespace 7.1, abre el panel Pages (páginas), baja hasta Custom Code (código personalizado) y haz clic en Code Injection. La ruta antigua (Settings > Advanced > Code Injection) ahora redirige ahí. La inyección de código no está disponible en todos los planes.

Pega el fragmento en HEADER y haz clic en Save (guardar), arriba a la izquierda. Squarespace inserta sus propias etiquetas antes que las tuyas, así que el fragmento no quedará en la primera línea del <head>. No pasa nada; igual carga en todas las páginas. Como el fragmento actual no tiene parte <noscript>, no necesitas ningún espacio en el <body>.

Squarespace también tiene un campo integrado para Google Analytics. Si cargas GA4 desde GTM, deja ese campo vacío.

Quita duplicados

Ahora quita todo lo que duplicaría datos:

• Un fragmento viejo de GA4 con gtag.js escrito a mano, si GA4 ahora va a correr desde GTM.
• Un plugin o ajuste de la plataforma que también agregue GA4 con el mismo ID.
• Un segundo contenedor de GTM que nadie usa, o el código antiguo de dos partes del mismo contenedor.

Paso 4: Agrega tu primera etiqueta (GA4)

En GTM ve a Tags > New (o haz clic en Add tag en la página de resumen) y luego en Tag Configuration.

La ayuda de GA4 de Google ahora muestra dos caminos. El recomendado es Google Analytics > Google Analytics, que agrega GA4 como destino. La alternativa es el tipo Google Tag, que usan muchos contenedores existentes. Los dos piden tu ID de medición de GA4 (G-XXXXXXXXXX) en Tag ID y aceptan, de forma opcional, Configuration settings y Shared event settings. Puedes omitirlos para dejar los valores predeterminados.

En Triggering (activación), elige el activador integrado de inicialización. En la mayoría de los contenedores aparece como Initialization - All Pages; la ayuda de Google lo llama "Initialization - All Initialization Events". Activa la etiqueta temprano, antes que la mayoría de las demás. Un activador de vista de página como All Pages también funciona, como en el ejemplo, pero Google sugiere el de inicialización.

Ponle un nombre claro, como "GA4 - Google tag", y haz clic en Save.

Si tu sitio usa un banner de consentimiento, asegúrate de que los valores predeterminados de Consent Mode se fijen antes de que se active esta etiqueta. Es otra configuración, pero puedes probarla en el siguiente paso.

Paso 5: Prueba y depura con Tag Assistant

Nada sale en vivo hasta que publicas. La vista previa te deja probar antes.

1. En el espacio de trabajo de GTM, haz clic en Preview (arriba a la derecha). Tag Assistant se abre en una pestaña nueva.
2. Escribe la URL de tu sitio y haz clic en Connect (conectar). Tu sitio se abre en otra ventana.
3. Una pequeña insignia en tu sitio indica que Tag Assistant está conectado.
4. Regresa a la pestaña de Tag Assistant y haz clic en Continue.

Tag Assistant muestra el ID de tu contenedor arriba, una línea de tiempo de eventos a la izquierda y pestañas para Tags, Variables, Data Layer, Consent y Errors. Esto es lo que debes buscar:

Navega por tu sitio. Cada página y acción agrega eventos a la línea de tiempo. Haz clic en un evento para ver qué etiquetas se activaron en ese momento.

Si necesitas probar en otro dispositivo o con un colega, usa Share (compartir) en el menú de Tag Assistant para enviar un enlace de vista previa.

Paso 6: Publica y revisa el sitio en vivo

De vuelta en GTM, haz clic en Submit. Agrega un Version name (nombre de versión) como "Instalación GTM + GA4" y una descripción corta. Haz clic en Publish.

Ahora revisa el sitio en vivo sin vista previa:

1. Abre tagassistant.google.com, haz clic en Add domain, escribe tu URL y conecta. Debe encontrar tu contenedor y la etiqueta de GA4.
2. Abre el código fuente de la página y confirma que el fragmento de GTM está ahí, una sola vez.
3. En las DevTools de Chrome, abre Network, recarga y filtra por gtm.js. Debes ver una sola solicitud con el ID de tu contenedor.
4. En GA4, abre Informes > Tiempo real y confirma que apareces como usuario activo.
5. Si quieres, pega tu URL en Test your website dentro del panel de instalación de GTM y haz clic en Test.

Si GA4 sigue sin mostrar nada, nuestra guía para solucionar GA4 con Tiempo real y DebugView repasa todas las causas.

¿Sigue sin funcionar? Causas comunes

Caché y creadores de páginas

Los plugins de caché y los CDN suelen seguir sirviendo el HTML de antes de que agregaras GTM. Purga todo después de instalar. Algunos creadores de páginas tienen su propio campo de "scripts del encabezado". Usa un solo lugar para el fragmento.

Configuraciones del lado del servidor y de primera parte

Si alguien configuró etiquetado del lado del servidor o Google tag gateway (aparece en la pestaña Admin de GTM), el script puede cargar desde tu propio dominio en vez de googletagmanager.com. Está bien. Verifícalo igual con Tag Assistant y no agregues un segundo fragmento estándar junto a él.

Cómo confirmar que quedó resuelto

Terminaste cuando todo esto se cumple:

1. El código fuente muestra un solo fragmento de GTM con tu ID en cada plantilla que revisaste (inicio, una entrada de blog, una página de producto o servicio, una página con formulario).
2. Tag Assistant, conectado sin vista previa, encuentra el contenedor y la etiqueta de GA4.
3. Versions en GTM muestra tu versión publicada como Live (en vivo).
4. Tiempo real de GA4 muestra tu visita en uno o dos minutos.
5. No hay eventos de vista de página duplicados en DebugView ni en Tiempo real de GA4.

Vuelve a revisar después de cualquier actualización de tema o rediseño. Los cambios de tema son la forma más común en que GTM desaparece.

Con el contenedor en su lugar, ya puedes agregar más etiquetas. Los pasos que suelen venir después: configurar Consent Mode v2 en GTM y medir envíos de formularios.

Preguntas frecuentes

¿Todavía necesito el fragmento noscript?

No en instalaciones nuevas. La pestaña Install manually actual solo muestra el fragmento del head. El iframe <noscript> antiguo solo corría para visitantes con JavaScript desactivado, y la mayoría de las etiquetas (GA4 incluida) no funcionan ahí de todos modos. Si tu sitio ya lo tiene, puedes dejarlo.

¿Puedo usar GTM y gtag.js al mismo tiempo?

Puedes, pero no envíes los mismos datos de GA4 desde los dos. Elige un solo lugar para cada etiqueta. Los duplicados son la causa más común de vistas de página dobles. La pantalla de instalación lo dice claro: no agregues más de una etiqueta de Google por página.

¿Uso la opción de CMS o instalo manualmente?

Si tu plataforma aparece en Install with a website builder or CMS y su integración cubre lo que necesitas, te ahorra editar código. Instala manualmente cuando quieras control total sobre dónde queda el fragmento, o cuando tu plataforma no aparece.

¿GTM hace más lento mi sitio?

El fragmento carga de forma asíncrona, así que por sí solo no bloquea la página. Lo que pongas dentro sí puede. Quita las etiquetas que no uses y revisa las Core Web Vitals después de cambios grandes.

¿Quién debe ser dueño de la cuenta de GTM?

La empresa. Créala con una cuenta de Google de la empresa y da acceso de usuario a agencias o freelancers. Así nunca pierdes el acceso cuando cambia el personal.

¿Todavía se necesita Tag Assistant Companion?

Google integró Companion en la extensión principal de Tag Assistant. Instala la extensión actual de Tag Assistant para que la vista previa conecte sin problemas.

Fuentes

• support.google.com: /tagmanager/answer/14847097?hl=es
• support.google.com: /tagmanager/answer/9442095?hl=es
• support.google.com: /tagmanager/answer/6107056?hl=es
• support.google.com: /tagassistant/answer/10039345?hl=es
• support.squarespace.com: /hc/es/articles/205815908