Documentação
Start typing to search…

Meta Pixel

O que é o Meta Pixel?

O Meta Pixel é um trecho de código JavaScript que, ao ser inserido no template da loja, permite medir a eficácia das campanhas publicitárias ao rastrear as ações que as pessoas realizam no site.

Por que ele é importante?

  • Mensuração de Conversões: Permite visualizar como os usuários interagem com o site após visualizarem um anúncio no Facebook ou Instagram.
  • Otimização da Entrega dos Anúncios: Ajuda os algoritmos da Meta a mostrarem seus anúncios para pessoas com maior probabilidade de realizar uma conversão (compra, cadastro, etc.).
  • Criação de Públicos (Remarketing): Possibilita a criação de públicos personalizados baseados em ações específicas, como "usuários que adicionaram ao carrinho, mas não finalizaram a compra".

Instruções de Implementação

⚠️

Atenção: É necessário baixar uma nova versão do Storefront local para testes em localhost.

A implementação foi simplificada através de dois componentes da wake-components centralizados. No entanto, para que os dados sejam capturados corretamente, recomendamos seguir os passos abaixo.

1. wake_meta_pixel_script

Este componente contém a biblioteca base do Meta Pixel e a inicialização do rastreio. Ele é o "motor" que permite a comunicação com os servidores da Meta.

Onde inserir: Deve ser incluído no <head> de todas as páginas da loja onde o rastreamento é desejado. Por padrão, ao acessar uma página com o componente inserido, um evento PageView é enviado à Meta.

Exemplo de uso: No arquivo de páginas como home.html, hotsite.html, product.html, etc.

<head>
   ...
   {{ wake_meta_pixel_script }}
   ...
</head>

2. wake_meta_pixel_content

Este componente é responsável pela inteligência de dados. Ele monta os objetos com as informações da página (IDs, preços, nomes) e dispara um evento customizado, que será capturado por uma função que executa o comando fbq('track', ...) para disparar os eventos. Nele é possível enviar parâmetros que irão definir os dados e os eventos que serão enviados.

Recomendações de onde inserir

  • Pages/search.html: Dentro do <body>. Inserir da seguinte forma dispara um evento Search por padrão.
<body>
   ...
   {{ wake_meta_pixel_content search_query: data.search.search_query }}
   ...
</body>
  • Pages/product.html: Dentro do <body>. Inserir da seguinte forma dispara um evento ViewContent por padrão.
<body>
   ...
   {{ wake_meta_pixel_content product: product variant_id: null }}
   ...
</body>
  • Components/product/attributes/product_attribute.html: Dentro da validação se o produto está disponível. Inserir da seguinte forma fará com que a ação de adição do produto ao carrinho dispare um evento AddToCart.
{{~ if available ~}}
   ...
   {{ wake_meta_pixel_content product: product variant_id: variant_id }}
   ...
{{~ end ~}}
  • Components/spot.html: Dentro da validação se é possível adicionar o produto ao carrinho diretamente do spot. Inserir da seguinte forma fará com que a ação de adição do produto ao carrinho dispare um evento AddToCart.
{{~ if product.add_to_cart_from_spot ~}}
   ...
   {{ wake_meta_pixel_content product: product variant_id: product.product_variant_id }}
   ...
{{~ end ~}}
  • Pages/checkout/close.html: Dentro do <body>. Inserir da seguinte forma dispara um evento InitiateCheckout por padrão.
<body>
   ...
   {{ wake_meta_pixel_content checkout: data.checkout }}
   ...
</body>
  • Pages/checkout/confirmation.html: Dentro do <body>. Inserir da seguinte forma dispara um evento Purchase por padrão.
<body>
   ...
   {{ wake_meta_pixel_content orders: data.checkout.orders }}
   ...
</body>
  • Components/product/buy_list/buy_list_product_attribute.html (para listas de compras e kits): Dentro da validação se a lista de compras ou kit está disponível. Inserir da seguinte forma fará com que a ação de adição ao carrinho dispare um evento AddToCart.
{{~ if available ~}}
   ...
   {{ wake_meta_pixel_content product: product variant_id: variant_id }}
   ...
{{~ end ~}}
  • Components/product/attributes/product_matrix_attribute.html (para produtos com matriz de atributos): Dentro da renderização das colunas dos atributos. Inserir da seguinte forma fará com que a ação de adição do produto ao carrinho dispare um evento AddToCart.
{{~ for j in 0..column_size ~}}
   ...
   {{ wake_meta_pixel_content product: current_product variant_id: current_product.product_variant_id }}
   ...
{{~ end ~}}

Eventos e Dados Customizados

É possível enviar eventos e dados customizados, diferentes dos implementados por padrão no componente wake_meta_pixel_content da wake-components. Para isso, basta enviar os parâmetros meta_pixel_content_data e event_name, com o conteúdo e o nome do evento, respectivamente.

Exemplo: No componente de visualização dos produtos da página de lista de compras/kits (Components/product/buy_list/buy_list_view.html):

{{- 
  meta_pixel_content_data = {
    is_kit: is_kit,
    buy_list_id: buy_list.buy_list_id, 
    value: buy_list.prices.price, 
    currency: "BRL"
  }
-}}
{{ wake_meta_pixel_content meta_pixel_content_data: meta_pixel_content_data event_name: "ViewContent" }}

Scripts

Assets/JS/event_manager.js

Recomendamos inserir o event listener do evento fbqEvent no arquivo event_manager.js, que é dedicado para isso. O event listener fará referência à função wakeHandleFbqEvent, que é própria da wake-components:

if (typeof wakeHandleFbqEvent === "function") {
    window.addEventListener('fbqEvent', wakeHandleFbqEvent);
}

Assets/JS/product.js

Recomendamos inserir o disparo do evento fbqEvent para os eventos AddToCart no arquivo product.js, na função addOrCreateCheckout, responsável por adicionar o produto ao carrinho:

async function addOrCreateCheckout(input) {
   // ... 
   // await client.checkout.add(input);
   
   input.forEach(product => {
       const metaPixelInput = document.querySelector(`input[meta-pixel-content-data='${product.productVariantId}']`);
       const metaPixelContentData = metaPixelInput?.value;
       
       if (metaPixelContentData) {
           window.dispatchEvent(new CustomEvent('fbqEvent', {
               detail: {
                   name: 'AddToCart',
                   payload: metaPixelContentData
               }
           }));
       }
   });
   // ...
}

Assets/JS/buy_list.js

Recomendamos inserir o disparo do evento fbqEvent para os eventos AddToCart no arquivo buy_list.js, na função addKitToCart, responsável por adicionar kits ao carrinho:

async function addKitToCart(input) {
   // ...
   // await client.checkout.add(input);
   
   input.products.forEach(product => {
       product.variants.forEach(variant => {
           const metaPixelInput = document.querySelector(`input[meta-pixel-content-data='${variant.productVariantId}']`);
           const metaPixelContentData = metaPixelInput?.value;
           
           if (metaPixelContentData) {
               window.dispatchEvent(new CustomEvent('fbqEvent', {
                   detail: {
                       name: 'AddToCart',
                       payload: metaPixelContentData
                   }
               }));
           }
       });
   });
   // ...
}

Queries (GraphQL)

Queries que renderizam spots

(Ex: home.graphql, hotsite.graphql, search.graphql, etc.)

Os seguintes campos relacionados aos PRODUTOS são necessários para o preenchimento completo das informações:

  • productCategories

  • main

  • name

  • prices

  • price

  • productName

  • productId

  • productVariantId

Queries que renderizam página de produtos e atributos

(Ex: product.graphql, etc.)

Os seguintes campos relacionados aos PRODUTOS são necessários para o preenchimento completo das informações:

  • productCategories

  • main

  • name

  • prices

  • price

  • productName

  • productId

  • attributeSelections

  • selectedVariant

  • productVariantId

Query que renderiza página de busca

(Ex: search.graphql, etc.)

Os seguintes campos relacionados à BUSCA são necessários para o preenchimento completo das informações:

  • searchQuery

Os seguintes campos relacionados aos PRODUTOS são necessários:

  • productCategories

  • main

  • name

  • prices

  • price

  • productName

  • productId

  • productVariantId

Query que renderiza página de finalização do pedido

(Ex: close.graphql, etc.)

Os seguintes campos relacionados ao CARRINHO são necessários para o preenchimento completo das informações:

  • total

Os seguintes campos relacionados aos PRODUTOS são necessários:

  • quantity
  • productVariantId
  • productId

Query que renderiza página de confirmação do pedido

(Ex: confirmation.graphql, etc.)

Os seguintes campos relacionados ao PEDIDO são necessários para o preenchimento completo das informações:

  • orderId
  • totalValue

Os seguintes campos relacionados aos PRODUTOS DO PEDIDO são necessários:

  • quantity
  • productVariantId
  • name
  • value

Updated about 9 hours ago