---
updatedAt: 2026-10-06T20:06:17.000Z
agentTools:
  projectIndex: https://wakecommerce.readme.io/llms.txt
---

# Meta Pixel e Conversions API

A integração com a **Meta** permite o envio de eventos do comportamento dos consumidores para o **Meta Pixel** e para a **Meta Conversions API (CAPI)**, aumentando a qualidade do rastreamento e a confiabilidade dos dados utilizados para campanhas, públicos e mensuração de conversões.

A **WAKE Commerce** envia os principais eventos do e-commerce para a Meta, permitindo uma integração consistente entre navegador (Pixel) e servidor (Conversions API).

### Benefícios

* **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".

***

## Pré-requisitos

Antes de habilitar a integração com a Meta, verifique se sua loja atende aos seguintes requisitos:

| Cenário                                             | Ação necessária                                                                                                              |
| --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| Loja criada nas versões mais recentes da plataforma | Nenhuma ação. Os componentes já estão presentes no HTML.                                                                     |
| Loja criada antes da atualização da integração      | Atualizar os componentes da Storefront utilizando a versão mais recente disponível no repositório Git e publicá-los na loja. |

Caso sua loja já esteja em produção e tenha sido criada antes da disponibilização desta funcionalidade, realize a atualização dos componentes.

<Callout icon="📘" theme="info">
  ### Baixe a versão mais recente dos componentes da Storefront disponíveis no repositório Git e publique-os na loja.
</Callout>

***

## Instruções de Implementação

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.&#x20;

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

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

```

Adicione o parâmetro `send_page_view_to_storefront_api: true` em conjunto do componente. Por padrão, ao acessar uma página com o componente inserido, um evento `PageView` é enviado à Meta.

```html
<body>
   ...
{{ wake_meta_pixel_script send_page_view_to_storefront_api: true }}
   ...
</body>
```

### 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.

```html
<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.

```html
<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`.

```html
{{~ 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`.

```html
{{~ 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.

```html
<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.

```html
<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`.

```html
{{~ 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`.

```html
{{~ 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`):

```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`:

```javascript
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:

```javascript
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:

```javascript
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:&#x20;*`home.graphql`*,&#x20;*`hotsite.graphql`*,&#x20;*`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:&#x20;*`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:&#x20;*`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:&#x20;*`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:&#x20;*`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`