Cómo Agregar Google Tag Manager a Shopify

¿Qué es Google Tag Manager?

Google Tag Manager (GTM) es un sistema gratuito de gestión de etiquetas que le permite agregar y administrar múltiples scripts de seguimiento en su tienda Shopify sin necesidad de editar el código de su tema cada vez. Con GTM, puede gestionar:

• Seguimiento de Google Analytics 4
• Pixel de Facebook
• Eventos de conversión (compra, envío de formulario, agregar al carrito)
• Etiquetas personalizadas para herramientas de marketing y analítica

Esta guía cubre dos métodos de instalación: a través de la aplicación Google & YouTube de Shopify (más fácil) o inyección manual de código (mayor control), además de cómo probar GTM con páginas creadas con GemPages.

Antes de comenzar, asegúrese de tener:

1. Cuenta de GTM y ID de Contenedor

Regístrese en Google Tag Manager.

Cree un contenedor para su tienda Shopify y copie el ID de Container (GTM-XXXXXXX).

2. Acceso de Administrador de Shopify

Debe tener permiso para editar temas o insertar scripts.

3. Plan de seguimiento

Identifique los eventos que desea rastrear: vistas de página, agregar al carrito, pago, compras, envíos de formularios.

Cómo Instalar Google Tag Manager en Shopify

A continuación se presenta el proceso paso a paso para agregar GTM a Shopify:

Método 1: Instalar Google Tag Manager Usando la Aplicación Google & YouTube (Más Fácil)

Este método es recomendado si desea una configuración rápida con una configuración mínima.

Paso 1: Volver Tienda de Aplicaciones de Shopify → Google & YouTube. Haga clic en Instalar .

Paso 2: Una vez instalada, haga clic en Conectar Cuenta Google para conectar su cuenta de Google Ads y habilitar el seguimiento de conversiones.

Paso 3: Ingrese su ID de contenedor GTM cuando se le solicite.

Paso 4: Elija qué etiquetas para habilitar, por ejemplo Analytics 4, Ads o eventos de conversión.

Paso 5: Complete la configuración y verifique que las etiquetas se activen usando Vista Previa de GTM o Google Tag Assistant.

Limitaciones de este método

• Menos control sobre eventos avanzados o personalizados
• No es ideal si planea usar GTM de forma extensiva con disparadores personalizados

Método 2: Instalar Google Tag Manager Manualmente (Recomendado para Seguimiento Avanzado)

Este método proporciona control total y es recomendado si:

• Utiliza eventos personalizados
• Rastrea interacciones en páginas de GemPages
• Desea flexibilidad total dentro de GTM

Paso 1: Abra el código de su tema

1. En la administración de Shopify, vaya a Tienda Online → Temas
2. Haga clic en ⋯ → Editar código
3. Abra el archivo layout/theme.liquid

Paso 2: Agregue el script de GTM al < head >

Pegue el siguiente código inmediatamente después de la etiqueta de apertura < head > :

<!-- 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 -->
  

Paso 3: Agregue el noscript de GTM después de < body >

En el mismo archivo, pegue el siguiente código inmediatamente después de la etiqueta de apertura < body > :

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

Paso 4: Guarde sus cambios

Haga clic en Guardar para publicar los cambios en su tienda en vivo.

Usar Google Tag Manager con Páginas de GemPages

Si GTM está instalado correctamente, funciona automáticamente en todas las páginas creadas con GemPages, incluyendo:

• Landing páginas
  
• Páginas de producto
• Páginas de colección

Puede usar GTM para:

• Rastrear clics en botones usando selectores CSS
• Rastrear envíos de formularios desde los elementos de formulario de GemPages
• Activar eventos basados en interacciones del usuario sin editar el código de la página

No se requiere ninguna configuración adicional dentro de GemPages.

Limitaciones de Checkout de Shopify

Shopify restringe el seguimiento dentro del checkout según su plan:

• Shopify Basic, Shopify, Advanced: GTM no se carga completamente en las páginas de pago. El seguimiento de compras es limitado.
• Shopify Plus: GTM puede agregarse al checkout usando checkout.liquid o Checkout Extensibility, lo que permite el seguimiento completo de compras.

Esta limitación está controlada por Shopify, no por GemPages ni GTM.

Cómo Probar Su Instalación de GTM

Puede verificar que GTM esté funcionando usando cualquiera de estos métodos:

Opción 1: Modo de Vista Previa de GTM

1. Abra Google Tag Manager
2. Haga clic en Vista previa
3. Ingrese la URL de su tienda
4. Confirme que Tag Assistant se conecta correctamente

Opción 2: Comprobación del código fuente de la página

• Abra su tienda
• Haga clic derecho → Ver el código fuente de la página (View page source)
• Busque GTM-

Problemas Comunes y Solución de Problemas

• No instale GTM dos veces: Evite usar tanto la aplicación Google & YouTube como la inyección manual de código al mismo tiempo.
• Evite mezclar scripts directos de GA4 con GTM: Use GTM como la única fuente de seguimiento para evitar eventos duplicados.
• Siempre pruebe antes de publicar etiquetas: Use el modo Preview para confirmar que los eventos se activan correctamente.