Pixel Tracking Setup

---
name: pixel-tracking-setup
description: "Pixel Tracking Setup — Skill especializada para pixel tracking setup"
license: MIT
metadata:
  version: 1.0.0
  author: Cafe Code AI
  category: 04-anuncios-trafego
  updated: 2026-03-01
risk: safe
---

# Pixel Tracking Setup

Capacita o Claude a configurar e auditar implementações de pixels de rastreamento para Meta Ads, Google Ads e TikTok Ads, garantindo a coleta precisa de dados para otimização de campanhas.

---

## Keywords

Meta Pixel Setup; Google Tag Manager; GA4 Event Tracking; TikTok Pixel Implementation; Conversões API; Server-Side Tracking; Data Layer Configuration; Pixel Debugging; Enhanced Conversions; Server-Side Tagging; Deduplicação de Eventos; Consent Mode.

---

## Quick Start

1.  Crie uma conta no Google Tag Manager (GTM) e configure um novo contêiner para Web.
2.  Instale o snippet do GTM no `<head>` e `<body>` de todas as páginas do website.
3.  Configure a Tag de Meta Pixel base (Page View) no GTM, usando o Meta Pixel ID do Gerenciador de Eventos.
4.  Configure a Tag de Configuração do Google Analytics 4 (GA4) no GTM, usando o ID de Medição (G-XXXXXXXXX).
5.  Verifique a correta instalação e o disparo das tags utilizando o Meta Pixel Helper e o Google Tag Assistant.

---

## Core Workflows

### Workflow 1: Implementação Avançada de Meta Pixel e Eventos Padrão via GTM

Este workflow detalha a configuração de eventos de rastreamento para Meta Ads, utilizando o Google Tag Manager para garantir a precisão dos dados, crucial para otimização de lances e segmentação.

**Passos Detalhados:**

1.  **Obtenção do Meta Pixel ID**: No Gerenciador de Eventos do Meta Business Suite, navegue até "Fontes de Dados", selecione o Pixel desejado e copie o ID (ex: `123456789012345`).
2.  **Configuração da Tag Base do Meta Pixel no GTM**:
    *   No GTM, crie uma "Nova Tag".
    *   Escolha "Configuração de Tag" e selecione "Meta Pixel".
    *   Insira o Meta Pixel ID (`123456789012345`) no campo "Pixel ID".
    *   Selecione "PageView" como "Event Name".
    *   Em "Acionamento", selecione "All Pages" para que o pixel base dispare em todas as páginas.
    *   Salve a tag com um nome como `Meta Pixel - PageView`.
3.  **Configuração do Evento `ViewContent` via GTM**:
    *   Crie uma "Nova Tag" no GTM.
    *   Escolha "Configuração de Tag" e selecione "Meta Pixel".
    *   Selecione "ViewContent" como "Event Name".
    *   Adicione parâmetros dinâmicos para o evento. Por exemplo, para um e-commerce:
        *   `content_ids`: `{{DLV - product_id}}` (Variável de Camada de Dados - Data Layer Variable)
        *   `content_name`: `{{DLV - product_name}}`
        *   `content_type`: `product`
        *   `value`: `{{DLV - product_price}}`
        *   `currency`: `BRL` (ou `{{DLV - currency}}`)
    *   Crie um "Novo Acionador" do tipo "Evento Personalizado" com o nome `view_item` (que será enviado via `dataLayer.push` no frontend).
    *   Salve a tag com um nome como `Meta Pixel - ViewContent`.
    *   **Exemplo de `dataLayer.push` para `ViewContent` no frontend**:
        ```javascript
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({
          event: 'view_item',
          product_id: 'SKU-001',
          product_name: 'Camisa Polo Azul',
          product_price: 79.90,
          currency: 'BRL'
        });
        ```
4.  **Configuração do Evento `AddToCart` via GTM**:
    *   Crie uma "Nova Tag" no GTM, tipo "Meta Pixel".
    *   Selecione "AddToCart" como "Event Name" e adicione parâmetros semelhantes ao `ViewContent` (content_ids, value, currency).
    *   Crie um "Novo Acionador" do tipo "Evento Personalizado" com o nome `add_to_cart`.
    *   Salve a tag como `Meta Pixel - AddToCart`.
    *   **Exemplo de `dataLayer.push` para `AddToCart` em clique de botão**:
        ```javascript
        // No JavaScript do site, após o clique no botão "Adicionar ao Carrinho"
        document.getElementById('add_to_cart_button').addEventListener('click', function() {
          window.dataLayer = window.dataLayer || [];
          dataLayer.push({
            event: 'add_to_cart',
            product_id: 'SKU-001',
            product_name: 'Camisa Polo Azul',
            product_price: 79.90,
            currency: 'BRL'
          });
        });
        ```
5.  **Configuração do Evento `Purchase` via GTM**:
    *   Crie uma "Nova Tag" no GTM, tipo "Meta Pixel".
    *   Selecione "Purchase" como "Event Name".
    *   Adicione parâmetros cruciais como `value`, `currency`, `transaction_id`, e um array de `contents` (ou `content_ids`).
    *   Crie um "Novo Acionador" do tipo "Evento Personalizado" com o nome `purchase`, que deve ser acionado na página de confirmação de compra.
    *   Salve a tag como `Meta Pixel - Purchase`.
    *   **Exemplo de `dataLayer.push` para `Purchase` na página de confirmação**:
        ```javascript
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({
          event: 'purchase',
          ecommerce: {
            transaction_id: 'ORDER-12345',
            value: 129.90,
            currency: 'BRL',
            items: [
              { item_id: 'SKU-001', item_name: 'Camisa Polo Azul', price: 79.90, quantity: 1 },
              { item_id: 'SKU-002', item_name: 'Calça Jeans Preta', price: 49.90, quantity: 1 }
            ]
          }
        });
        ```
6.  **Publicar o Contêiner GTM**: Após configurar todas as tags, publique o contêiner GTM para que as alterações entrem em vigor no site.
7.  **Verificação**: Use o Meta Pixel Helper e o "Teste de Eventos" no Gerenciador de Eventos para confirmar que todos os eventos estão disparando corretamente com os parâmetros esperados.

### Workflow 2: Configuração de Conversões Otimizadas (Enhanced Conversions) para Google Ads e Eventos de E-commerce no GA4 com GTM

Este workflow aborda a implementação de Enhanced Conversions para Google Ads, melhorando a precisão da medição de conversões, e a configuração de eventos de e-commerce para GA4, fornecendo insights detalhados sobre o funil de vendas.

**Passos Detalhados:**

1.  **Habilitar Enhanced Conversions no Google Ads**:
    *   No Google Ads, navegue até "Ferramentas e Configurações" > "Medição" > "Conversões".
    *   Edite sua ação de conversão principal (ex: "Compra").
    *   Na seção "Enhanced Conversions", marque a caixa para ativá-las e siga as instruções para configurar o método "Google Tag Manager".
2.  **Configuração da Tag de Google Ads Conversion Tracking no GTM**:
    *   Crie uma "Nova Tag" no GTM.
    *   Escolha "Configuração de Tag" e selecione "Monitor de Conversões do Google Ads".
    *   Insira o "ID de Conversão" e o "Label de Conversão" da ação de conversão do Google Ads (ex: ID `AW-123456789`, Label `AbC-DeF-GhI-JkL`).
    *   **Para Enhanced Conversions**:
        *   Marque a opção "Incluir dados de conversões otimizadas fornecidos pelo usuário".
        *   Em "Novos dados fornecidos pelo usuário", selecione "Variável de Camada de Dados" ou crie um novo "Grupo de Dados Fornecidos pelo Usuário".
        *   Configure variáveis de Camada de Dados (ex: `{{DLV - user_email}}`, `{{DLV - user_phone}}`) para mapear os dados do usuário (email, telefone, nome, endereço) que serão enviados via `dataLayer.push`.
    *   Crie um "Acionador" do tipo "Evento Personalizado" com o nome `purchase` (o mesmo usado para Meta Pixel Purchase).
    *   Salve a tag com um nome como `Google Ads - Conversão Compra + Enhanced`.
    *   **Exemplo de `dataLayer.push` para `purchase` incluindo dados do usuário**:
        ```javascript
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({
          event: 'purchase',
          ecommerce: { /* ... dados do produto ... */ },
          user_data: {
            email: 'usuario@email.com',
            phone_number: '5511998765432', // Formato E.164
            first_name: 'João',
            last_name: 'Silva'
          }
        });
        ```
3.  **Configuração de Eventos de E-commerce no GA4 via GTM**:
    *   **Assumindo Tag de Configuração do GA4 já existe**: Certifique-se de que sua tag `GA4 - Configuração` está configurada para disparar em "All Pages".
    *   Crie uma "Nova Tag" no GTM.
    *   Escolha "Configuração de Tag" e selecione "Google Analytics: Evento GA4".
    *   Selecione a "Tag de Configuração" do GA4 criada anteriormente (ex: `GA4 - Configuração Base`).
    *   Em "Nome do Evento", insira `purchase`.
    *   Em "Parâmetros do Evento", adicione:
        *   `transaction_id`: `{{DLV - ecommerce.transaction_id}}`
        *   `value`: `{{DLV - ecommerce.value}}`
        *   `currency`: `{{DLV - ecommerce.currency}}`
        *   `items`: `{{DLV - ecommerce.items}}` (Mapeie para a variável `ecommerce.items` do `dataLayer`)
    *   Crie um "Acionador" do tipo "Evento Personalizado" com o nome `purchase`.
    *   Salve a tag com um nome como `GA4 - Evento Compra`.
    *   Repita este processo para outros eventos de e-commerce importantes como `add_to_cart`, `view_item`, `begin_checkout`, adaptando o nome do evento e os parâmetros.
4.  **Publicar o Contêiner GTM**: Publique o contêiner GTM.
5.  **Verificação**:
    *   Use o "DebugView" no Google Analytics 4 para verificar se os eventos estão sendo recebidos com os parâmetros corretos.
    *   No Google Ads, verifique o status das Enhanced Conversions na interface de "Conversões" e monitore os relatórios de conversão para garantir que os dados estejam sendo atribuídos.

---

## Templates

### Template de Data Layer para Evento de Compra (E-commerce Completo)

```javascript
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'purchase', // Evento customizado para acionar tags no GTM
  ecommerce: {
    transaction_id: 'ORDER-123456789', // ID único da transação
    value: 199.99, // Valor total da compra
    currency: 'BRL', // Moeda
    affiliation: 'Loja Online Exemplo', // Afiliado (opcional)
    shipping: 15.00, // Custo de envio (opcional)
    tax: 10.00, // Impostos (opcional)
    items: [ // Array de itens comprados
      {
        item_id: 'SKU-001',
        item_name: 'Camisa Polo Slim Fit',
        item_brand: 'Marca A',
        item_category: 'Vestuário',
        item_variant: 'Azul P',
        price: 99.99,
        quantity: 1
      },
      {
        item_id: 'SKU-002',
        item_name: 'Calça Jeans Reta',
        item_brand: 'Marca B',
        item_category: 'Vestuário',
        item_variant: 'Preta 40',
        price: 85.00,
        quantity: 1
      }
    ]
  },
  user_data: { // Dados do usuário para Enhanced Conversions e CAPI
    email: 'cliente@email.com',
    phone_number: '5511998765432', // Formato E.164
    first_name: 'Maria',
    last_name: 'Souza',
    address: {
      street: 'Rua das Flores',
      city: 'São Paulo',
      region: 'SP',
      postal_code: '01234-567',
      country: 'BR'
    }
  }
});
```

### Template de Tag TikTok Pixel - AddToCart via GTM Custom HTML

```html
<script>
  ttq.track('AddToCart', {
    content_id: 'PROD-789',
    content_name: 'Tenis Esportivo',
    content_type: 'product',
    value: 249.90,
    currency: 'BRL',
    quantity: 1
  });
</script>
```
**Instruções de Uso**: Esta tag deve ser configurada no GTM como uma "Tag HTML Personalizada". O "Acionador" associado deve ser um "Evento Personalizado" (ex: `add_to_cart`), disparado por um `dataLayer.push` no frontend. Os valores (`content_id`, `value`, etc.) devem ser mapeados para "Variáveis de Camada de Dados" no GTM, extraindo-os do `dataLayer.push` correspondente.

---

## Checklist

- [x] Snippets do Google Tag Manager (`<head>` e `<body>`) instalados em todas as páginas do site.
- [x] Meta Pixel base (PageView) configurado via GTM e disparando em todas as páginas.
- [x] Eventos padrão Meta (ViewContent, AddToCart, Purchase) configurados com parâmetros dinâmicos via `dataLayer`.
- [x] Tag de Configuração do GA4 ativa e disparando em todas as páginas.
- [x] Eventos de conversão GA4 (purchase, generate_lead) configurados com parâmetros `value`, `currency`, e `items` quando aplicável.
- [x] Tags de conversão Google Ads configuradas para os eventos de maior valor.
- [x] Enhanced Conversions ativadas no Google Ads e enviando dados de usuário via GTM.
- [x] TikTok Pixel base e eventos (PageView, ViewContent, AddToCart, CompletePayment) configurados com parâmetros.
- [x] Debuggers (Meta Pixel Helper, Google Tag Assistant, TikTok Pixel Helper) utilizados para verificar a ativação e os parâmetros dos eventos.
- [x] Deduplicação de eventos implementada para Meta CAPI (usando `event_id`).
- [x] Consent Mode configurado para plataformas relevantes (Google, Meta) se o site exigir consentimento de cookies.
- [x] Testes de ponta a ponta realizados para simular o fluxo do usuário e garantir a captura de todos os eventos.

---

## Métricas de Referência

| Métrica                         | Benchmark (E-commerce) | Meta (Exemplo) |
| :------------------------------ | :--------------------- | :------------- |
| **ROAS (Meta Ads)**             | 3.0x - 5.0x            | 4.0x           |
| **Taxa de Adição ao Carrinho**  | 8% - 15%               | 12%            |
| **Taxa de Conversão (GA4/Ads)** | 1.5% - 3.0%            | 2.5%           |
| **CPC (Google Search Ads)**     | R$1.50 - R$5.00        | R$2.80         |
| **CPA (TikTok Ads - Compra)**   | R$20 - R$50            | R$35           |
| **CTR (Meta Ads)**              | 1.0% - 3.0%            | 2.2%           |

---

## Erros Comuns

1.  **Pixel não disparando em todas as páginas ou eventos ausentes**: A instalação do snippet do GTM ou do pixel base não foi feita corretamente, ou o acionador (trigger) de um evento específico está mal configurado. Por exemplo, o GTM container ID `GTM-ABCDEFG` não está no `<head>` do site, ou o trigger do `AddToCart` está configurado para uma URL que não é a de um clique real. A solução é verificar o código-fonte da página e o modo de depuração do GTM para identificar onde a tag falha.
2.  **Dados de evento incompletos ou incorretos (parâmetros ausentes)**: Os parâmetros de eventos (como `value`, `currency`, `content_ids`) não estão sendo passados corretamente via `dataLayer` ou não estão sendo mapeados adequadamente nas tags do GTM. Por exemplo, um evento `Purchase` do Meta Pixel dispara, mas o `value` está sempre `0`. A correção envolve revisar o `dataLayer.push` no código do site e as "Variáveis de Camada de Dados" no GTM para garantir que os nomes e formatos correspondam.
3.  **Duplicidade de eventos ou conversões**: O mesmo evento está sendo disparado mais de uma vez, ou a mesma conversão é contada múltiplas vezes. Isso pode ocorrer por ter o pixel instalado diretamente no código e também via GTM, ou por não usar um `event_id` único para deduplicação em implementações de Conversions API (CAPI). Para Meta Pixel, usar o parâmetro `event_id` no `fbq('track')` e na CAPI permite deduplicação. Para Google Ads, garantir que o `transaction_id` seja único para cada compra é fundamental.
4.  **Atribuição incorreta devido a falta de dados de usuário nas Enhanced Conversions**: As Enhanced Conversions do Google Ads ou a Conversions API do Meta não estão recebendo dados de usuário (email, telefone, nome) para fazer a correspondência com cliques de anúncios. Isso resulta em menos conversões atribuídas. A solução é garantir que o `dataLayer.push` inclua o objeto `user_data` com os campos `email`, `phone_number` (no formato E.164), `first_name`, etc., e que esses campos estejam mapeados nas tags do GTM para as respectivas plataformas.

---

## Dicas Avançadas

1.  **Implementação de Conversions API (CAPI) para Meta Ads via GTM Server-Side**: Para mitigar os impactos de bloqueadores de anúncios e restrições de cookies, utilize o Google Tag Manager Server-Side (SGTM) para enviar eventos de conversão diretamente do seu servidor para o Meta. Crie um servidor de tags no SGTM, configure o cliente GA4 para capturar os dados do navegador e, em seguida, use uma Tag "Meta Conversions API" no SGTM para enviar os eventos de `purchase` (e outros) com um `event_id` único para deduplicação.
2.  **Google Tag Manager Server-Side (SGTM) para centralização de dados**: Migre toda a coleta de dados para um contêiner GTM Server-Side. Isso permite centralizar a lógica de transformação de dados, melhorar a performance do site (menos scripts no frontend), aumentar a resiliência do rastreamento e ter maior controle sobre quais dados são enviados para cada plataforma de marketing (Meta, Google, TikTok). Por exemplo, coletar um evento `add_to_cart` apenas uma vez no cliente SGTM e roteá-lo para Meta Pixel, GA4 e TikTok Pixel a partir do servidor.
3.  **Uso de Data Layer Schemas e Versionamento**: Defina um esquema rigoroso para o `dataLayer` do seu site e mantenha-o documentado. Isso garante consistência nos nomes e tipos de dados, facilitando a manutenção e a integração com novas ferramentas. Por exemplo, padronize que todos os eventos de e-commerce sigam o esquema `ecommerce` do GA4, e que todos os dados de usuário estejam sob o objeto `user_data`. Mantenha um versionamento das suas implementações de `dataLayer` para rastrear mudanças.
4.  **Configuração de Eventos Personalizados e Conversões Customizadas**: Além dos eventos padrão, crie eventos personalizados no GTM para rastrear micro-interações específicas do seu negócio que indicam interesse (ex: `visualizou_video_produto`, `download_catalogo`, `interacao_chatbot`). No Meta Ads e Google Ads, use esses eventos personalizados para criar "Conversões Personalizadas" ou "Objetivos de Conversão" para otimizar campanhas para estas ações de valor intermediário.
5.  **Implementação do Consent Mode (Modo de Consentimento) para Google e Meta**: Integre a gestão de consentimento de cookies do seu site (CMP) com o Consent Mode do Google e o tratamento de consentimento da Meta. Isso garante que os pixels só disparem ou enviem dados de forma adequada com base no consentimento do usuário (ex: `gtag('consent', 'analytics_storage', 'granted')`). Configure as tags no GTM para respeitar essas preferências, ajustando o comportamento de coleta de dados para estar em conformidade com regulamentações como GDPR e LGPD.