Criar um pixel personalizado do Google Tag Manager

É possível usar o Google Tag Manager (GTM) como um pixel personalizado para gerenciar os pixels de terceiros.

Quando tudo estiver pronto para testar o pixel personalizado do GTM, use o Shopify Pixel Helper para garantir que todos os eventos que você quer rastrear sejam adicionados ao sandbox sem erros.

Você também pode usar a extensão de página Google Tag Assistant para testar quais tags do Google estão sendo carregadas na página. No entanto, o recurso Troubleshoot tag do Google Tag Assistant não é compatível com pixels personalizados e não detecta tags do Google em um pixel personalizado nem outros pixels carregados pelo GTM.

Nesta página

Preparação para criar um pixel personalizado

Antes de criar um pixel personalizado com o Google Tag Manager, analise as informações a seguir para se certificar de que você entende como configurar o pixel:

Crie ou abra uma conta do Google Tag Manager e encontre o ID de contêiner do GTM.
Por segurança, os gerenciadores de tags carregados em nosso sandbox têm as mesmas restrições que quaisquer outros pixels. Saiba mais sobre as limitações do sandbox de pixels.

Criar um pixel personalizado do Google Tag Manager

É possível criar um pixel personalizado do Google Tag Manager para gerenciar os pixels de terceiros.

Etapas:

Abra sua conta do Google Tag Manager e selecione a conta com a qual você quer configurar um pixel personalizado.
Clique em Administrador e, depois, em Instalar o Gerenciador de tags do Google para abrir o código de instalação.
Copie o bloco de código que corresponde à seção head de uma página.
Remova as tags HTML do bloco de código. Por exemplo: <script></script>.
Insira o código restante em um novo pixel personalizado da Shopify.
Inscreva-se nos eventos de clientes e envie-os para o dataLayer do GTM.
Para conferir como o código deve ser exibido, consulte o exemplo de pixel personalizado do Gerenciador de tags do Google.
Configure o Gerenciador de tags do Google para aceitar eventos do seu pixel personalizado.
Opcional: se houver chamadas dataLayer.push(event) existentes no arquivo checkout.liquid, substitua-as por analytics.publish().

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

É possível se inscrever em eventos de clientes usando o dataLayer do GTM no código do pixel personalizado.

Por padrão, há um conjunto de eventos padrão nos quais é possível se inscrever. No entanto, se quiser rastrear eventos de clientes que não fazem parte da oferta de eventos padrão, será possível publicar seus próprios eventos personalizados de arquivos de modelo do Liquid.

Abaixo, há um exemplo de inscrição no evento padrão “product_viewed”, que indica quando alguém visualiza um produto. Quando o evento é acionado, ele o envia 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 é transmitido no payload do evento. É possível usar uma variável do Gerenciador de tags do Google para capturar o título do produto do payload na tag de sua preferência.

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 que mostra como enviar dados para o Gerenciador de tags do Google. Para enviar mais eventos ao dataLayer, é possível se inscrever em mais eventos padrão e personalizados.

// 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, é preciso configurar o Gerenciador de tags do Google para aceitar os eventos dele. Para fazer isso, você precisará de uma tag, um acionador e variáveis de dataLayer no Gerenciador de tags do Google.

Alguns exemplos de eventos de clientes padrão e seus equivalentes no Gerenciador de tags do Google estão listados na tabela a seguir:

Lista de eventos de clientes padrão da Shopify para usar com pixels, em comparação com os eventos de clientes equivalentes no Gerenciador de tags do Google, além do acionador necessário para que os eventos sejam disparados.
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	purchase
product_removed_from_cart	Remover item do carrinho	remove_from_cart
cart_viewed	Visualizar carrinho de compras	view_cart
product_viewed	Visualizar página de informações do produto	view_item
collection_viewed	Visualizar uma lista de itens	view_item_list

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

Alguns exemplos de propriedades de eventos do dataLayer de pixel personalizado e seus parâmetros de evento equivalentes do Google Analytics 4 (GA4) são os seguintes:

Lista de eventos do `dataLayer` de pixel personalizado que usam a convenção de nomenclatura do GA4
Eventos do `dataLayer` de pixel personalizado	Parâmetros de evento do GA4
`event.data?.checkout?.currencyCode`	`currency`
`event.data?.checkout?.totalPrice?.amount`	`value`
`event.data?.checkout?.order?.id`	`transaction_id`
`event.data?.checkout?.discountAllocations`	`coupon`
`event.data?.checkout?.shippingLine?.price?.amount`	`shipping`
`event.data?.checkout?.totalTax`	`imposto`
`event.data?.checkout?.lineItems`	`items`

Confira um exemplo que usa o seguinte 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 usadas no Gerenciador de tags do Google para capturar os dados do evento. Elas podem ser mapeadas para uma variável dataLayer no Gerenciador de tags do Google. Cada variável de evento exige uma variável dataLayer própria. Configure o acionador para disparar em todos os eventos personalizados.

Crie uma tag que use o acionador recém-criado. Em parâmetros do evento, adicione as variáveis que deseja capturar. No exemplo acima, orderId, currency, price, shippingLine e totalTax seriam configuradas como variáveis dataLayer. Toda vez que a tag for disparada, ela capturará essas variáveis dataLayer com o evento.

Observe que pelo menos uma tag e um acionador precisam ser configurados no Gerenciador de tags do Google para que a transferência de dados ocorra.

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

Caso já tenha configurado o Gerenciador de tags do Google, você precisará substituir as chamadas de dataLayer.push por Shopify.analytics.publish(). É possível encontrar as chamadas de dataLayer.push nos arquivos theme.liquid, na seção Layout do editor de temas.

Também é preciso substituir as chamadas dataLayer.push no checkout.liquid. No entanto, como o checkout.liquid não é compatível com as Shopify Extensions, você precisa usar uma extensão de UI para enviar dados para web pixels.

Abaixo, há um exemplo simplificado de um evento personalizado de cadastro por e-mail rastreado com o dataLayer em arquivos theme.liquid:

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

O equivalente da Shopify é exibido desta forma e envia os dados para o pixel personalizado:

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

Em seguida, no código do pixel personalizado, adicione algo como:

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

Substituir o antigo dataLayer.push(data)

O Gerenciador de tags do Google tem um recurso que permite enviar um objeto dataLayer com estado em todos os eventos. Embora o sandbox de pixel da Shopify não inclua um recurso equivalente, é possível alcançar o mesmo resultado criando um objeto de dados próprio e transmitindo-o para eventos personalizados.

Por exemplo, defina um objeto “customData” antes de publicar qualquer evento personalizado:

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

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

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

Dicas para configurar o Google Analytics 4

Confira as dicas a seguir para configurar o Google Analytics 4 (GA4) ao usar o Gerenciador de tags do Google como um pixel personalizado.

URLs de página mais limpos

Quando o GA4 está em execução em um sandbox, talvez você perceba que os URLs de página incluem informações sobre o sandbox em que ele está operando. Se quiser remover as informações do sandbox desses URLs, desative o rastreamento automático de páginas do GA4 e implemente um rastreamento próprio usando o evento-padrão page_viewed.

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 publicar um evento próprio no dataLayer, crie uma tag page_view do GA4 que seja disparada no evento page_viewed. Geralmente, é possível usar o tipo de tag Google Analytics: evento do GA4 e definir o Nome do evento como page_view. Depois de definir o tipo de tag e o nome do evento, adicione um parâmetro para page_location e defina o valor como o mesmo que foi transmitido ao dataLayer pelo pixel personalizado.

Medição otimizada

Ao carregar o GA4 no sandbox de pixel da Shopify, alguns eventos que normalmente são inferidos de forma automática precisarão ser configurados manualmente. Por exemplo, cliques em links externos, como parte da configuração de Medição otimizada do GA4, não podem ser disparados automaticamente por motivos de segurança ao usar pixels personalizados. No entanto, é possível implementar os eventos de medição otimizada do GA4 como eventos personalizados.

O código abaixo inclui um exemplo simplificado de 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 fim, 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 eventos otimizados do GA4.

É possível fazer o mesmo rastreamento para qualquer uma das métricas de medição otimizada do Google.

Testar e depurar o pixel personalizado

Quando tudo estiver pronto para testar o pixel personalizado do GTM, use o Shopify Pixel Helper para garantir que todos os eventos que você quer rastrear sejam adicionados ao sandbox sem erros.