Criar um pixel personalizado do Gerenciador de tags do Google

Use o Gerenciador de tags do Google (GTM) como um pixel personalizado para gerenciar os pixels de terceiros.

Quando estiver pronto para testar seu pixel personalizado do GTM, use o Shopify Pixel Helper para garantir que todos os eventos que você deseja compilar estejam sendo adicionados sem erros à sandbox.

Também é possível usar a extensão de página do Assistente de tags do Google para testar quais tags estão sendo carregadas na página. No entanto, o recurso Troubleshoot tag do Assistente de tags do Google não é compatível com pixels personalizados e não detecta tags do Google em pixels personalizados ou em outros pixels carregados pelo GTM.

Observação

Antes de criar um pixel personalizado, verifique os apps disponíveis para melhorar a estabilidade, a segurança e o desempenho. Se não houver um que atenda às suas necessidades, opte por usar o Gerenciador de tags do Google como pixel personalizado.

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:

• Crie ou abra uma conta do Gerenciador de tags do Google e acesse o ID do contêiner.
• Por questões de segurança, os gerenciadores de tags carregados em nossa sandbox têm as mesmas restrições que os demais pixels. Saiba mais sobre as limitações da sandbox de pixels.

Criar um pixel personalizado do Gerenciador de tags do Google

Você pode criar um pixel personalizado do Gerenciador de tags do Google para gerenciar os pixels de terceiros.

Faça sua empresa crescer

Este é um tutorial avançado e não é atendido pela Shopify. Se você precisar de ajuda para adicionar pixels personalizados, contrate um Parceiro da Shopify.

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. Por exemplo, <script></script>.
5. Insira o código restante em um novo pixel personalizado da Shopify.
6. Inscreva-se em eventos do cliente e envie para o dataLayer do GTM.
7. Para analisar como o código será exibido, consulte o exemplo de pixel personalizado do Gerenciador de tags do Google.
8. Configure o Gerenciador de tags do Google para aceitar eventos do pixel personalizado.
9. Opcional: se você tiver chamadas dataLayer.push(event) no arquivo checkout.liquid, substitua-o por analytics.publish().

Inscrever-se em eventos de clientes e enviar para a camada de dados do GTM

Para assinar eventos de clientes, use o dataLayer do GTM no código de pixel personalizado .

Por padrão, há um conjunto de eventos padrão que você pode assinar. No entanto, se você quiser acompanhar eventos de clientes que não fazem parte da oferta de eventos padrão, poderá publicar seus próprios eventos personalizados de 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, o título do produto está sendo transmitido no payload do evento. Utilize uma variável do Gerenciador de tags do Google para capturar o título do produto a partir do payload do evento na tag escolhida.

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 ele. Para enviar mais eventos para o dataLayer, inscreva-se em outros eventos-padrão e eventos personalizados.

Observação

Este pixel de exemplo também contém amostras de configurações que refletem o Modo de consentimento do Google v2, um modo que permite que um pixel respeite as opções de autorização de cookies de um visitante para tráfego que inclua o Espaço Econômico Europeu (EEA). Saiba mais sobre o modo de consentimento na Ajuda do Google Ads.

Essas exemplos de configuração podem não corresponder ao que é exigido para a loja com base na legislação de privacidade da sua região. Se precisar de ajuda para adicionar ou adaptar as configurações de consentimento no seu pixel personalizado, consulte o guia do Google Configurar o modo de consentimento nos sites ou contrate um Parceiro da Shopify.

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(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');

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  window.dataLayer.push({
    event: "payment_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_shipping_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "checkout_started",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
  });
});

analytics.subscribe("cart_viewed", (event) => {
  window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data?.cart?.cost?.totalAmount?.amount,
    quantity: event.data?.cart?.totalQuantity,
    cart_id: event.data?.cart?.id,
  });
});

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
  });
});

analytics.subscribe("search_submitted", (event) => {
  window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data?.searchResult?.query,
  });
});

analytics.subscribe("collection_viewed", (event) => {
  window.dataLayer.push({
    event: "collection_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    collection_id: event.data?.collection?.id,
    collection_title: event.data?.collection?.title,
  });
});

Configurar o Gerenciador de tags do Google para aceitar eventos do pixel personalizado

Depois de criar o pixel personalizado, configure o Gerenciador de tags do Google para aceitar eventos dele. Para fazer isso, é preciso ter uma tag, um acionador e variáveis do dataLayer no Gerenciador de tags do Google.

A tabela abaixo mostra alguns exemplos de eventos-padrão de clientes e de equivalentes do Gerenciador de tags do Google:

Lista de eventos-padrão de cliente da Shopify para usar com pixels em comparação com os eventos equivalentes de clientes no Gerenciador de tags do Google, além do acionador necessário para disparar os eventos.

Evento da Shopify	Acionador	Evento do GTM
payment_info_submitted	Enviar informações de pagamento	add_payment_info
checkout_address_info_submitted	Enviar informações de frete	add_shipping_info
product_added_to_cart	Adicionar um item ao carrinho de compras	add_to_cart
checkout_started	Iniciar checkout	begin_checkout
checkout_completed	Concluir checkout	compra
product_removed_from_cart	Remover item do carrinho	remove_from_cart
cart_viewed	Ver carrinho de compras	view_cart
product_viewed	Ver a página de informações do produto	view_item
collection_viewed	Ver uma lista de itens	view_item_list

Os parâmetros de evento da tag do GTM precisam corresponder às convenções de nomenclatura previstas para que os eventos do dataLayer com pixel personalizado sejam processados.

Estes são alguns exemplos de propriedades para eventos do dataLayer com pixel personalizado e seus parâmetros de evento equivalentes do Google Analytics 4 (GA4):

Lista de eventos do dataLayer com pixel personalizado que usam a convenção de nomenclatura do GA4

Eventos do dataLayer com pixel personalizado	Parâmetros de evento GA4
event.data?. Checkout?. currencyCode	Moeda
event.data?.checkout?.totalPrice?.amount	valor
event.data?.checkout?.order?.id	transaction_id
event.data?.checkout?.discountAllocations	cupom
event.data?.checkout?.shippingLine?.price?.amount	frete
event.data?.checkout?.totalTax	tax
event.data?.checkout?.lineItems	itens

Veja um exemplo que usa este evento checkout_completed:

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    price: event.data.checkout.totalPrice.amount,
    shippingLine: event.data.checkout.shippingLine.price.amount,
    totalTax: event.data.checkout.totalTax,
  });
});

O acionador do Gerenciador de tags do Google é um tipo de evento personalizado com o nome de evento checkout_completed. O campo Nome do evento no acionador precisa corresponder à chave event no pixel personalizado.

orderId e currency são as variáveis que você usa no Gerenciador de tags do Google para capturar os dados do evento. Eles podem ser mapeados para uma variável do dataLayer no Gerenciador de tags do Google. Vale lembrar que cada variável de evento requer sua própria variável do dataLayer. Defina o acionador em todos os eventos personalizados.

Crie uma tag que use o acionador que você acabou de gerar. Em parâmetros do evento, adicione as variáveis que você quer capturar. No exemplo acima, orderId, currency, price, shippingLine e totalTax seriam configuradas como variáveis do dataLayer. Cada vez que a tag é acionada, ela captura essas variáveis do dataLayer com o evento.

É preciso configurar pelo menos uma tag e um acionador no Gerenciador de tags do Google para que a transferência de dados ocorra.

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

Se você já tiver configurado o Gerenciador de tags do Google, será preciso substituir as chamadas dataLayer.push por chamadas Shopify.analytics.publish(). As chamadas dataLayer.push podem ser encontradas nos arquivos theme.liquid, na seção Layout do editor de temas.

Além disso, é preciso substituir as chamadas dataLayer.push no checkout.liquid. No entanto, como o checkout.liquid não é compatível com a Shopify Extensions, é necessário usar uma extensão de interface do usuário para fazer o push dos dados para os pixels da web.

O exemplo simplificado abaixo mostra um evento de inscrição de e-mail personalizado rastreado com dataLayer em arquivos theme.liquid.

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

O equivalente da Shopify é exibido dessa maneira, o 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 por push um objeto dataLayer 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>

Observação

No momento, a Shopify não aceita a inclusão de dados personalizados a eventos-padrão. Se você precisar desse recurso, publique seus próprios eventos personalizados para substituir os eventos-padrão.

Dicas 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 GA4 e 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. Após 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 o dataLayer.

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 o pixel personalizado

Quando estiver pronto para testar seu pixel personalizado do GTM, use o Shopify Pixel Helper para garantir que todos os eventos que você deseja compilar estejam sendo adicionados sem erros à sandbox.

Também é possível usar a extensão de página do Assistente de tags do Google para testar quais tags estão sendo carregadas na página. No entanto, o recurso Troubleshoot tag do Assistente de tags do Google não é compatível com pixels personalizados e não detecta tags do Google em pixels personalizados ou em outros pixels carregados pelo GTM.