Como adicionar o Google Tag Manager ao Shopify

O que é o Gerenciador de tags do Google?

O Google Tag Manager (GTM) é um sistema de gerenciamento de tags gratuito Isso permite adicionar e gerenciar vários scripts de rastreamento em sua loja Shopify sem precisar editar o código do seu tema todas as vezes. Usando o GTM, você pode gerenciar:

• Rastreamento do Google Analytics 4
• Facebook Pixel
• Eventos de conversão (compra, envio de formulário, adicionar ao carrinho)
• Etiquetas personalizadas para ferramentas de marketing e análise

Este guia abrange dois métodos Para instalação: via aplicativo Google & YouTube da Shopify (mais fácil) ou injeção manual de código (mais controle), além de como testar o GTM com Páginas criadas com GemPages.

Antes de começar, certifique-se de ter:

1. ID da conta e do contêiner do GTM

Inscreva-se em Google Tag Manager.

Crie um contêiner para sua loja Shopify e copie o ID do contêiner (GTM-XXXXXXX).

2. Acesso administrativo do Shopify

É necessário ter permissão para editar temas ou inserir scripts.

3. Plano de acompanhamento

Identifique os eventos que deseja monitorar: visualizações de página, adições ao carrinho, finalização da compra, compras, envios de formulários.

Como instalar o Google Tag Manager no Shopify

Aqui está o processo passo a passo para adicionar o GTM ao Shopify:

Método 1: Instalar o Google Tag Manager usando o aplicativo do Google e do YouTube (Mais fácil)

Este método é recomendado se você quiser um configuração rápida com configuração mínima.

Passo 1: Acesse Loja de aplicativos da Shopify → Google e YouTube. Clique Instale.

Passo 2: Após a instalação, clique em Conectar conta do Google Para conectar sua conta do Google Ads e ativar o acompanhamento de conversões.

Passo 3: Digite seu ID do contêiner GTM quando solicitado.

Passo 4: Escolha qual tags para habilitar, como o Analytics 4, anúncios ou eventos de conversão.

Passo 5: Conclua a configuração e verificar disparo da etiqueta Utilizando a pré-visualização do GTM ou o Google Tag Assistant.

Limitações deste método

• Menos controle sobre eventos avançados ou personalizados.
• Não é o ideal se você planeja usar o GTM extensivamente com gatilhos personalizados.

Método 2: Instalar o Google Tag Manager manualmente (recomendado para rastreamento avançado)

Este método fornece controle total e é recomendado se você:

• Use eventos personalizados
• Acompanhe as interações nas páginas do GemPages.
• Deseja total flexibilidade dentro do GTM?

Passo 1: Abra o código do seu tema.

1. No administrador do Shopify, acesse Loja Online → Temas
2. Clique ⋯ → Editar código
3. Abra o arquivo layout/tema.liquid

Passo 2: Adicione o script GTM ao

Cole o seguinte código imediatamente após a abertura etiqueta:

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

Passo 3: Adicione o GTM noscript depois

No mesmo arquivo, cole o seguinte código. imediatamente após a abertura etiqueta:

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

Passo 4: Salve suas alterações

Clique Economize Para publicar as alterações na sua loja virtual.

Utilizando o Google Tag Manager com páginas GemPages

Se o GTM estiver instalado corretamente, ele funcionará automaticamente em todas as páginas criadas com ele. GemPages, incluindo:

• As páginas de destino
  
• Páginas do produto
• Páginas de coleção

Você pode usar o GTM para:

• Rastreie cliques em botões usando seletores CSS.
• Acompanhe os envios de formulários dos elementos de formulário do GemPages.
• Acione eventos com base nas interações do usuário sem editar o código da página.

Nenhuma configuração adicional é necessária no GemPages.

Limitações do Shopify Checkout

A Shopify restringe o rastreamento durante o processo de finalização da compra, dependendo do seu plano:

• Shopify Básico, Shopify Avançado: GTM faz não totalmente carregado Nas páginas de finalização da compra. O rastreamento de compras é limitado.
• Shopify Plus: O GTM pode ser adicionado ao checkout usando checkout.liquido ou extensibilidade do checkout, permitindo o rastreamento completo da compra.

Essa limitação é controlada pela Shopify, não pela GemPages ou pelo GTM.

Como testar sua instalação do GTM

Você pode verificar se o GTM está funcionando usando qualquer um dos seguintes métodos:

Opção 1: Modo de pré-visualização do GTM

1. Abra o Gerenciador de tags do Google
2. Clique visualização
3. Insira o URL da sua loja
4. Confirme se o Tag Assistant se conectou com sucesso.

Opção 2: Verificação do código-fonte da página

• Abra sua loja virtual
• Clique com o botão direito → Ver o código-fonte da página
• Procurar por GTM-

Problemas comuns e solução de problemas

• Não instale o GTM duas vezes: Evite usar os aplicativos do Google e do YouTube e a injeção manual de código ao mesmo tempo.
• Evite misturar scripts GA4 diretos com GTM: Use o GTM como fonte única de rastreamento para evitar eventos duplicados.
• Sempre teste antes de publicar as tags: Use o modo de pré-visualização para confirmar se os eventos são disparados corretamente.