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 Versión 1.3, actualizada el 4 de noviembre de 2026

En esta página

Lo que aprenderás

  • Crear una cuenta de GTM y un contenedor web para tu sitio.
  • Instalar el contenedor con los snippets de Better Loader, o con el snippet del head y el snippet noscript de Google.
  • 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 (y los Data Processing Terms, si estás en el EEE o en el Reino Unido).

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

Puedes cargar el contenedor de dos maneras. Cada una usa dos snippets: uno en el <head> y un respaldo justo después de la etiqueta de apertura <body>. Elige una manera y usa solo sus snippets, o GTM se cargará dos veces.

¿Qué snippets instalas?

Elige esta opción si tu sitio tiene un contenedor en SGTM.space. Better Loader carga GTM desde tu propio dominio de carga, como load.k7q2x.example.com, con un nombre de script aleatorio en lugar de desde googletagmanager.com, así que los bloqueadores de anuncios lo frenan con menos frecuencia. Está disponible en todos los planes, incluido el gratuito, y funciona antes de que configures tu contenedor de servidor.

  1. 1 Crea un contenedor para tu sitio en SGTM.space, como muestra la lección 2: introduce el ID de este contenedor web (GTM-XXXXXXX) y deja marcada la opción Activar Better Loader para GTM-XXXXXXX. El contenedor de servidor puedes conectarlo más tarde. Si ya tienes un contenedor, introduce el ID en la tarjeta Better Loader de su pestaña Complementos y haz clic en Activar.
  2. 2
    En la pestaña DNS, añade el CNAME del dominio de carga donde gestionas tu DNS (DNS only en Cloudflare) y haz clic en Comprobar DNS. El certificado HTTPS llega en pocos minutos.
    Type
    CNAME
    Name
    load.k7q2x
    Value
    eu.sgtm.space
    Proxy
    DNS only
  3. 3 Haz clic en Ajustes en la tarjeta Better Loader. El Snippet de instalación y el Respaldo noscript de esa página se parecen a los dos de abajo, con tu propio dominio de carga y nombre de script.

Pega el Snippet de instalación lo más arriba posible en el <head> de cada página. Carga GTM de forma asíncrona, así que no bloquea el renderizado.

HTML 
<!-- Google Tag Manager -->
<script data-cfasync="false">(function(w,d,s,l){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);j.async=true;j.src="https://load.k7q2x.example.com/h3k9x2mq7tbp.js";f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer');</script>
<!-- End Google Tag Manager -->

Pega el Respaldo noscript justo después de la etiqueta de apertura <body>. Sirve de respaldo para navegadores con JavaScript desactivado.

HTML 
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://load.k7q2x.example.com/ns.html"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
  • Estos dos sustituyen a los dos snippets de Google. Quita el snippet de Google si tu sitio lo tiene.
  • Ninguno de los dos contiene un ID GTM-: Better Loader reconoce tu contenedor por el nombre del script. Un campo del CMS que solo acepta un ID de GTM no puede instalarlos, así que pégalos en tu tema o plantilla.
  • Pégalos solo cuando el dominio de carga esté activo. Mientras su registro DNS no resuelva, GTM no se carga en tu sitio.
  • El Snippet de instalación lleva data-cfasync="false": evita que Cloudflare Rocket Loader retrase GTM y no afecta en ningún otro sitio. Si tu script de consentimiento por defecto está encima, ponle el mismo atributo.

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.

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).

JavaScript 
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 carga el contenedor correcto: el ID del snippet de Google o el ID del contenedor GTM web de la tarjeta Better Loader. 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: los de Better Loader, o los de Google con tu propio ID GTM-, nunca ambos.
  • 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.

¿Better Loader o el snippet de Google?

Usa Better Loader en cuanto tu sitio tenga un contenedor en SGTM.space: está disponible en todos los planes, incluido el gratuito, y carga GTM desde tu propio dominio, así que los bloqueadores de anuncios lo frenan con menos frecuencia. Hasta entonces, usa el snippet de Google. Cambiar más tarde solo supone sustituir los dos snippets. Tu contenedor de GTM y sus etiquetas no cambian.

¿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