Criar um pixel personalizado do Gerenciador de tags do Google

Esta página foi impressa em Apr 24, 2024. 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.

Nesta página

Preparar-se para criar um pixel personalizado
Criar um pixel personalizado do Gerenciador de tags do Google

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

Etapas:

Abra a conta do Gerenciador de tags do Google e selecione a conta para 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 pertence à seção head de uma página.
Remova as tags HTML desse bloco de código. Por exemplo, <script></script>.
Insira o código restante em um novo pixel personalizado da Shopify.
Inscreva-se em eventos do cliente e envie para o dataLayer do GTM.
Para analisar como o código 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 pixel personalizado.
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 para os clientes 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 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.

// 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 clientes da Shopify e os eventos equivalentes no GTM
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 para seleção de eventos do `dataLayer` com pixel personalizado usando 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 extensibilidade de checkout, é 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 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 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>

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

Abra a loja da Shopify no navegador Chrome.
Adicione a extensão do Assistente de tags do Google para Chrome (legado) ao navegador.
Clique no ícone da extensão e em Habilitar.
Navegue até o site e acione os eventos que você quer testar.
Na extensão, clique na tag do Gerenciador de tags do Google. A seção Camada de dados exibe o payload do evento acionado.
Todas as outras tags carregadas pelo Gerenciador de tags do Google também estão listadas na extensão. Você pode clicar nessas tags para revisar os dados que foram enviados para elas.

Criar um pixel personalizado do Gerenciador de tags do Google

Nesta página

Preparar-se para criar um pixel personalizado

Criar um pixel personalizado do Gerenciador de tags do Google

Etapas:

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

Exemplo de pixel personalizado do Gerenciador de tags do Google

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

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

Substituir dataLayer.push(data) antigos

Dicas para configurar o Google Analytics 4

URLs de página mais limpas

Medição aprimorada

Testar e depurar

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