Criar um pixel personalizado do Gerenciador de tags do Google

Esta página foi impressa em Apr 01, 2023. Para a versão mais recente, acesse https://help.shopify.com/pt-BR/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial.

Esta página inclui instruções sobre como usar o Gerenciador de tags do Google (GTM) como um pixel personalizado para gerenciar os pixels de terceiros.

Preparar-se para criar um pixel personalizado

Antes de usar o Gerenciador de tags do Google para criar um pixel personalizado, leia as informações abaixo para entender melhor como funciona a configuração do recurso:

Criar um pixel personalizado do Gerenciador de tags do Google

Etapas

  1. Abra a conta do Gerenciador de tags do Google e selecione a conta para a qual você quer configurar um pixel personalizado.
  2. Clique em Administrador e depois em Instalar o Gerenciador de tags do Google para abrir o código de instalação.
  3. Copie o bloco de código que pertence à seção head de uma página.
  4. Remova as tags HTML desse bloco de código.
  5. Insira o código restante em um novo pixel personalizado da Shopify.
  6. Inicialize o objeto dataLayer com window.dataLayer = window.dataLayer || [];.

O código do pixel personalizado deve ter uma aparência parecida com essa, e GTM-XXXXXXX deve corresponder ao seu próprio ID de contêiner do GTM.

(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');

window.dataLayer = window.dataLayer || [];

Inscrever-se em eventos do cliente e enviar para o dataLayer do GTM

Em vez de adicionar chamadasdataLayer.push() aos arquivos de modelos do Liquid, todo o trabalho de dataLayer do GTM será feito no código de pixel personalizado.

Por padrão, há um conjunto de eventos-padrão personalizados que permitem sua inscrição diretamente, mas também é possível publicar seus próprios eventos personalizados em arquivos de modelos do Liquid.

Veja abaixo um exemplo de inscrição para o evento-padrão "product_viewed", que indica quando alguém vê um produto. Quando é acionado, o evento é enviado para o dataLayer.

analytics.subscribe('product_viewed', (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_title': event.data.productVariant.title,
  });
});

Neste exemplo, os dados sobre o título do produto, que usam variáveis do Gerenciador de tags do Google, podem ser encaminhados para outras tags.

Substituir chamadas dataLayer.push(event) antigas por analytics.publish()

Se você já configurou o Gerenciador de tags do Google antes, será preciso substituir as chamadas dataLayer.push por chamadas Shopify.analytics.publish().

O exemplo simplificado abaixo mostra um evento de inscrição de e-mail personalizado que é rastreado com uso do dataLayer.

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

O equivalente da Shopify se parece com este, que envia os dados para o pixel personalizado.

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

Em seguida, no código de pixel personalizado, você adicionaria um código como este.

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

Substituir dataLayer.push(data) antigos

O Gerenciador de tags do Google tem um recurso que permite enviar um objeto de camada de dados de estado em todos os eventos. Embora a sandbox de pixels da Shopify não inclua um recurso equivalente, é possível chegar ao mesmo resultado criando seu próprio objeto de dados e transmitindo-o para eventos personalizados.

Por exemplo, defina um objeto "customData" antes que os eventos personalizados sejam publicados.

<script>
  const customData = {email: customer.email}
</script>

Em seguida, sempre que você quiser incluir os dados personalizados, transmita-os para o método de publicação.

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

Exemplo de pixel personalizado do Gerenciador de tags do Google

O exemplo abaixo é uma versão simplificada de um pixel personalizado do Gerenciador de tags do Google e mostra como enviar dados para o GTM. Para enviar mais eventos para o dataLayer, inscreva-se em outros eventos-padrão e eventos personalizados.

(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');

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.product.id,
   'product_title': event.data.product.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.order.id,
   'currency': event.data.checkout.currencyCode,
  });
});

Dicas e truques para configurar o Google Analytics 4

Considere as dicas abaixo para configurar o Google Analytics 4 (GA4) quando usar o Gerenciador de tags do Google como pixel personalizado.

URLs de página mais limpas

Quando o GA4 está em execução em uma sandbox, talvez você note que os URLs da página incluem informações sobre a sandbox em operação. Se você quiser remover essas informações dos URLs, desative o rastreamento automático de páginas do GA4e use o evento-padrão page_viewed para implementar o seu próprio.

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

Depois de você publicar seu próprio evento no dataLayer, é possível criar uma tag page_view do GA4 que é acionada no evento page_viewed. Na maioria dos casos, é possível usar o tipo de tag Google Analytics: GA4 Event e definir o nome do evento como page_view. Depois de você definir o tipo de tag e o nome do evento, adicione um parâmetro para page_location e defina o valor para o mesmo que você transferiu do pixel personalizado para a camada de dados.

Medição aprimorada

No carregamento do GA4 dentro da sandbox de pixels da Shopify, alguns eventos que costumam ser inferidos automaticamente precisarão ser definidos de modo manual. Por exemplo, os cliques em links externos, como parte da configuração de medição aprimorada do GA4, não podem ser acionados automaticamente por questões de segurança durante o uso de pixels personalizados. No entanto, é possível implementar por conta própria os eventos de medição aprimorada do GA4 como eventos personalizados.

O código fornecido abaixo inclui um exemplo simplificado do rastreamento de cliques em links externos.

<script>
  function detectOutboundLink() {
    // add your logic for determining if a link click is outbound

    // if the link click is outbound then publish it
    if (isOutboundLink) {
      Shopify.analytics.publish('outbound_link', { link_url: link_url });
    }
  }
</script>

Por último, no GTM, crie uma tag do GA4 que envie o clique no link para o GA4, garantindo que o nome do evento seja click para corresponder à nomenclatura de evento aprimorado do GA4.

Você pode conseguir o mesmo rastreamento em qualquer métrica de medição aprimoradas do Google.

Testar e depurar

  1. Abra a loja da Shopify no navegador Chrome.
  2. Abra a aba de rede no navegador e encontre a solicitação collect?..., que conterá o ID de medição do GA4 se houver dados enviados do Gerenciador de tags do Google para o GA4.
  3. Na conta do Google Analytics, clique em Administradore depois em Vista de depuração.
  4. Verifique se a extensão Google Analytics Debugger foi adicionada ao navegador Chrome:
    • Ative a depuração do Google Analytics.
    • Abra a loja da Shopify em uma aba separada.
    • Volte para o GA4 na vista de depuração e analise os eventos page_viewed.

Tudo pronto para começar a vender com a Shopify?

Experimente de graça