Saltar al contenido
sGTM.space

Instala Google Tag Manager en tu sitio web (contenedor web)

Google Tag Manager (GTM) te permite añadir y cambiar etiquetas de tracking sin tocar el código de tu sitio en cada cambio. Instalas un pequeño snippet una sola vez y, a partir de ahí, GA4, los píxeles de anuncios y el resto de etiquetas se gestionan desde la interfaz de GTM. En esta lección creas el contenedor web, lo instalas, envías tu primer evento personalizado y publicas una versión. Todas las lecciones siguientes parten de este contenedor.

Principiante 8 min de lectura

Lo que aprenderás

  • Crear una cuenta de GTM y un contenedor web para tu sitio.
  • Instalar correctamente el snippet del head y el snippet noscript del body.
  • Enviar un evento personalizado al dataLayer y verlo en el modo Preview.
  • Enviar y publicar una versión del contenedor, y entender para qué sirven los espacios de trabajo y las versiones.

Antes de empezar

  • Una cuenta de Google.
  • Acceso a la plantilla o al CMS de tu sitio web para poder añadir código en todas las páginas.

01 Crea la cuenta y el contenedor web

Una cuenta de GTM suele corresponder a una empresa. Dentro creas un contenedor por sitio web (y más adelante un contenedor de servidor aparte, que se explica en la lección 2).

  1. 1 Abre tagmanager.google.com y haz clic en Create Account.
  2. 2 Introduce un Account Name (tu empresa) y tu Country.
  3. 3 En Container Setup, escribe tu dominio como Container name, por ejemplo www.example.com.
  4. 4 Elige Web como Target platform y haz clic en Create.
  5. 5 Acepta las condiciones del servicio de Google Tag Manager.

GTM muestra entonces el cuadro Install Google Tag Manager con dos snippets. El ID de tu contenedor tiene el formato GTM-XXXXXXX y aparece en ambos.

02 Pega los dos snippets

Pega el primer snippet lo más arriba posible dentro del <head> de cada página. Carga GTM de forma asíncrona, así que no bloquea el renderizado.

html 
<!-- Google Tag Manager -->
<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>
<!-- End Google Tag Manager -->

Pega el segundo snippet justo después de la etiqueta de apertura <body>. Es un respaldo para navegadores con JavaScript desactivado.

html 
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
  • Usa el ID de tu propio contenedor en los dos snippets, no GTM-XXXXXXX.
  • Coloca los snippets en un layout o archivo de tema compartido para que aparezcan en todas las páginas, no solo en la de inicio.
  • Muchos CMS (plugins de WordPress, Shopify, Webflow) tienen un campo para el ID de GTM. Usa el campo o los snippets, nunca ambos, o GTM se cargará dos veces.

03 Envía tu primer evento personalizado a través del dataLayer

El dataLayer es un array de JavaScript que comparten tu sitio y GTM. Tu código añade objetos a él y GTM reacciona ante ellos. Un objeto con la clave event se convierte en un evento que los activadores pueden escuchar; el resto de claves son valores que puedes leer con variables de capa de datos (Data Layer Variables).

js 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'sign_up',
  method: 'email'
});

Ejecuta este código cuando ocurra la acción, por ejemplo tras un registro correcto. Para usarlo en GTM:

  1. 1 Ve a Triggers, haz clic en New y elige Custom Event.
  2. 2 Pon sign_up en Event name (debe coincidir exactamente, mayúsculas incluidas) y guarda.
  3. 3 Ve a Variables, en User-Defined Variables haz clic en New, elige Data Layer Variable y pon method en Data Layer Variable Name.

04 Prueba en el modo Preview

El modo Preview muestra exactamente lo que GTM ve en tu sitio antes de que nada se publique.

  1. 1 Haz clic en Preview, arriba a la derecha del espacio de trabajo. Tag Assistant se abre en una pestaña nueva.
  2. 2 Introduce la URL de tu sitio y haz clic en Connect. Tu sitio se abre en otra ventana con una insignia de Tag Assistant.
  3. 3 Vuelve a la pestaña de Tag Assistant. A la izquierda verás eventos como Consent Initialization, Initialization, Container Loaded, DOM Ready y Window Loaded.
  4. 4 Provoca el registro en tu sitio. Aparece un evento sign_up; haz clic en él y abre la pestaña Data Layer para ver method: email.

Si Tag Assistant no consigue conectarse, comprueba que el snippet está en la página y usa el ID de contenedor correcto. La lección de depuración recoge más causas.

05 Envía y publica una versión

Ningún cambio que hagas en GTM llega a los visitantes hasta que lo publicas.

  1. 1 Haz clic en Submit, arriba a la derecha.
  2. 2 Deja seleccionado Publish and Create Version.
  3. 3 Escribe un Version name y una Version description que digan qué ha cambiado, por ejemplo Add sign_up trigger.
  4. 4 Haz clic en Publish.
  • Los Workspaces (espacios de trabajo) son borradores. Cada uno guarda cambios sin publicar, así que dos personas pueden trabajar sin pisarse. El plan gratuito de GTM permite tres espacios de trabajo por contenedor.
  • Las Versions son instantáneas del contenedor en el momento de publicar. En Versions puedes ver quién publicó qué y volver a publicar una versión anterior para deshacer cambios.
  • Los dos snippets están en todas las páginas con tu propio ID GTM-.
  • Tag Assistant se conecta a tu sitio.
  • El evento sign_up aparece en Preview con su valor de method.
  • La primera versión está publicada con un nombre claro.

Preguntas frecuentes

¿El contenedor web sustituye a mi código de GA4?

Puede hacerlo. En lugar de pegar directamente el snippet de GA4, añades una etiqueta de Google dentro de GTM. La lección 3 lo hace y envía los datos a través de tu contenedor de servidor. Elimina cualquier snippet de GA4 incrustado en el código cuando GTM ya envíe los mismos datos, o lo contarás todo dos veces.

¿Por qué necesito el snippet noscript?

Solo se ejecuta cuando JavaScript está desactivado, algo poco habitual. Aun así Google lo recomienda y no hace ningún daño, así que instálalo.

He publicado, pero mi cambio no aparece en el sitio. ¿Por qué?

Comprueba que publicaste el espacio de trabajo que contiene el cambio y recarga la página forzando la actualización. Las cachés de página y las CDN también pueden servir una página HTML antigua, pero el archivo de GTM se actualiza en pocos minutos.

¿Listo para ponerlo en práctica?

Despliega un contenedor GTM de servidor en tu propio dominio en pocos minutos. El plan Gratis no pide tarjeta.

Crear una cuenta gratuita