Configuração Facebook Pixel¶

Guia passo a passo para configurar a integração Complyr + Facebook Pixel e começar a rastrear conversões de forma conforme com a LGPD.

📋 Pré-requisitos¶

Antes de começar, certifique-se de que você tem:

✅ Conta no Facebook Business Manager
✅ Pixel criado no Events Manager
✅ Workspace criado no Complyr
✅ Script Complyr instalado no site
✅ Acesso ao código do site ou GTM

Ordem de Carregamento

O script Complyr DEVE ser carregado antes do código do Facebook Pixel para garantir controle de consentimento correto.

🚀 Passo 1: Obter Pixel ID¶

1.1. Criar Pixel (se ainda não tem)¶

Acesse Facebook Events Manager
Clique em "Conectar Fontes de Dados"
Selecione "Web"
Clique em "Conectar"
Digite o nome do seu site
Clique em "Criar Pixel"

1.2. Copiar Pixel ID¶

No Events Manager, selecione seu Pixel
Vá em "Configurações" (ícone de engrenagem)
Copie o Pixel ID (número de 15 dígitos)

Exemplo: 123456789012345

Múltiplos Pixels

Você pode ter múltiplos Pixels para diferentes sites ou ambientes (produção/desenvolvimento). Use o Pixel ID correto para cada ambiente.

🔧 Passo 2: Instalar Código do Pixel¶

Opção 1: HTML Direto (Recomendado)¶

Adicione o código do Facebook Pixel após o script Complyr, antes de </head>:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Meu Site</title>

    <!-- 1. Script Complyr - PRIMEIRO -->
    <script
      src="https://app.complyr.com.br/tag/js"
      data-workspace-id="SEU_WORKSPACE_ID"
      data-complyr-script
      async
      defer>
    </script>

    <!-- 2. Facebook Pixel - DEPOIS -->
    <script>
      !function(f,b,e,v,n,t,s)
      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');

      fbq('init', 'SEU_PIXEL_ID');
      fbq('track', 'PageView');
    </script>
    <noscript>
      <img height="1" width="1" style="display:none"
           src="https://www.facebook.com/tr?id=SEU_PIXEL_ID&ev=PageView&noscript=1"/>
    </noscript>
</head>
<body>
    <!-- Seu conteúdo -->
</body>
</html>

Substitua: - SEU_WORKSPACE_ID pelo ID do workspace Complyr - SEU_PIXEL_ID pelo ID do seu Pixel (15 dígitos)

Opção 2: Next.js (App Router)¶

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="pt-BR">
      <head>
        {/* 1. Complyr - PRIMEIRO */}
        <Script
          src="https://app.complyr.com.br/tag/js"
          data-workspace-id="SEU_WORKSPACE_ID"
          data-complyr-script
          strategy="beforeInteractive"
        />

        {/* 2. Facebook Pixel - DEPOIS */}
        <Script id="facebook-pixel" strategy="afterInteractive">
          {`
            !function(f,b,e,v,n,t,s)
            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
            n.queue=[];t=b.createElement(e);t.async=!0;
            t.src=v;s=b.getElementsByTagName(e)[0];
            s.parentNode.insertBefore(t,s)}(window, document,'script',
            'https://connect.facebook.net/en_US/fbevents.js');

            fbq('init', 'SEU_PIXEL_ID');
            fbq('track', 'PageView');
          `}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  )
}

Opção 3: Google Tag Manager¶

Atenção

Embora possível, não é recomendado usar GTM para carregar o Pixel. O script Complyr deve controlar o carregamento do Pixel diretamente. Se usar GTM, configure consentimento manual.

Se ainda assim quiser usar GTM:

Crie uma Nova Tag
Tipo: HTML Personalizado
Cole o código do Pixel
Acionador: Consentimento Inicializado - Marketing (acionador customizado baseado em complyr_accept_all)
Salve e publique

🎯 Passo 3: Configurar Gerenciamento de Consentimento¶

O Complyr detecta automaticamente o Facebook Pixel e controla seu disparo baseado no consentimento do usuário.

Mapeamento de Propósitos¶

O consentimento no Complyr é mapeado para controle do Pixel:

Propósito Complyr	Comportamento do Pixel
Marketing e Publicidade	Se `granted`: Pixel carrega e dispara eventos Se `denied`: Pixel bloqueado
Analytics e Métricas	Opcional: Pode permitir eventos básicos
Essencial	Não afeta o Pixel (sempre permitido)

Como Funciona¶

sequenceDiagram
    participant U as Usuário
    participant C as Script Complyr
    participant P as Facebook Pixel
    participant F as Facebook Ads

    U->>C: Visita site
    C->>U: Exibe banner
    U->>C: Aceita Marketing
    C->>P: Carrega Pixel
    P->>F: Envia PageView
    P->>F: Envia eventos customizados

    Note over U,F: Com consentimento concedido

    U->>C: Nega Marketing
    C->>P: Bloqueia Pixel
    P--xF: Nenhum evento enviado

    Note over U,F: Sem consentimento

Fluxo Detalhado:

Primeira Visita (Sem Consentimento):
Banner aparece
Pixel não é carregado
Nenhum evento disparado
Usuário Aceita Marketing:
Consentimento salvo
Pixel carregado dinamicamente
fbq('init') executado
Eventos começam a disparar
Visitas Subsequentes:
Consentimento carregado do localStorage
Pixel carrega automaticamente se consentimento concedido
Banner não aparece

✅ Passo 4: Validar Instalação¶

4.1. Instalar Facebook Pixel Helper¶

Instale a extensão Facebook Pixel Helper
Abra seu site
Clique no ícone da extensão
Verifique:
✅ Pixel detectado
✅ ID do Pixel correto
✅ PageView disparado

4.2. Testar Consentimento¶

Teste 1: Sem Consentimento

Abra site em janela anônima
Aguarde banner aparecer
NÃO aceite
Abra Facebook Pixel Helper
Esperado: Nenhum Pixel detectado ✅

Teste 2: Com Consentimento

Limpe localStorage: localStorage.clear()
Recarregue página
Banner aparece
Clique em "Aceitar Todos"
Facebook Pixel Helper deve mostrar:
✅ Pixel ativo
✅ PageView disparado

4.3. Verificar Events Manager¶

Acesse Facebook Events Manager
Selecione seu Pixel
Vá em "Testar Eventos"
Digite URL do seu site
Abra o site e aceite consentimento
Events Manager deve mostrar eventos em tempo real

Eventos Esperados: - PageView - Outros eventos customizados que você configurar

🔍 Passo 5: Testar Fluxos Completos¶

Cenário 1: Aceitar Marketing¶

1. Usuário visita site → Banner aparece
2. Clica em "Aceitar Todos"
3. Pixel carrega
4. PageView disparado
5. Consentimento salvo

Validação: - ✅ Facebook Pixel Helper mostra Pixel ativo - ✅ Events Manager registra PageView - ✅ localStorage contém complyr_consent

Cenário 2: Apenas Essenciais¶

1. Usuário visita site → Banner aparece
2. Clica em "Apenas Essenciais"
3. Pixel NÃO carrega
4. Nenhum evento disparado
5. Consentimento salvo como "denied"

Validação: - ✅ Facebook Pixel Helper NÃO mostra Pixel - ✅ Events Manager não registra eventos - ✅ localStorage contém complyr_consent com marketing = false

Cenário 3: Personalizar¶

1. Usuário clica em "Personalizar"
2. Habilita "Analytics"
3. Desabilita "Marketing"
4. Clica em "Salvar"
5. Pixel permanece bloqueado

Validação: - ✅ Pixel bloqueado (marketing negado) - ✅ Consentimento parcial salvo

🛡️ Segurança e Privacidade¶

Dados Enviados ao Facebook¶

Com consentimento (Marketing aceito): - ✅ Eventos de comportamento (PageView, ViewContent, etc.) - ✅ Parâmetros de produtos e valores - ✅ Email do usuário (via Advanced Matching - hasheado)

Sem consentimento (Marketing negado): - ❌ Pixel bloqueado completamente - ❌ Nenhum dado enviado ao Facebook - ❌ Cookies do Facebook não são criados

Conformidade LGPD¶

✅ Art. 7º, I: Consentimento explícito para marketing
✅ Art. 18, IX: Direito de revogar consentimento
✅ Art. 46: Histórico de consentimento auditável
✅ Art. 48: Comunicação clara sobre rastreamento

🎨 Customização Avançada¶

Identifique usuários autenticados para melhor rastreamento:

// Após login do usuário
window.complyr.identify('email', 'usuario@example.com');

// Automaticamente atualiza Advanced Matching no Pixel
// Email é hasheado com SHA-256 antes de enviar

Eventos Customizados¶

Rastreie eventos específicos do seu negócio:

// Exemplo: Adicionar ao carrinho
fbq('track', 'AddToCart', {
  content_name: 'Produto X',
  content_ids: ['123'],
  content_type: 'product',
  value: 99.90,
  currency: 'BRL'
});

❌ Problemas Comuns¶

Pixel Não Detectado¶

Possíveis causas: - Script Complyr não carregou - Usuário não aceitou consentimento de marketing - Código do Pixel com erro

Solução: Ver Solução de Problemas

Pixel Dispara Sem Consentimento¶

Causa: Script Complyr carrega depois do Pixel.

Solução: Certifique-se de que o script Complyr é carregado ANTES do código do Facebook Pixel.

<!-- ✅ CORRETO -->
<script data-complyr-script></script>
<script> Facebook Pixel </script>

<!-- ❌ ERRADO -->
<script> Facebook Pixel </script>
<script data-complyr-script></script>

Events Manager Não Mostra Eventos¶

Possíveis causas: - Pixel ID incorreto - AdBlocker bloqueando requisições - Consentimento não concedido

Solução: 1. Valide Pixel ID 2. Desabilite AdBlocker para testar 3. Limpe consentimento e aceite novamente

🔗 Próximos Passos¶

Agora que o Pixel está instalado:

Configure Advanced Matching
Identifique usuários após login
Melhore precisão do rastreamento
Implemente Eventos Customizados
AddToCart, InitiateCheckout, Purchase
Lead, CompleteRegistration
Teste a Integração
Valide todos os fluxos
Use Pixel Helper
Entenda Gerenciamento de Consentimento
Como funciona o bloqueio automático
Revogação de consentimento

📞 Suporte¶

Precisa de ajuda?

FAQ - Perguntas frequentes
Solução de Problemas - Problemas comuns
Documentação Facebook - Docs oficiais
Email: contato@complyr.com.br