Campaign HQ

Rotator · Webhooks · UTM Tracking

Nenhum rotator. Crie um com "+ Rotator".
📖 Como funciona o Webhook

Cada vez que alguém compra um produto seu na plataforma de afiliado, ela envia um aviso automático para a URL do webhook. Esse sistema recebe o aviso, lê os dados da compra (valor, e-mail, UTMs) e encaminha tudo automaticamente para o GA4 e para o Facebook CAPI. Você não precisa fazer nada além de cadastrar a URL uma vez.

① COPIE A URL
Abaixo tem uma URL específica para cada plataforma. Copie a URL da plataforma que você usa.
② COLE NA PLATAFORMA
Acesse as configurações da plataforma, encontre a seção "Webhooks" ou "Notificações" e cole a URL lá.
③ FAÇA UMA VENDA TESTE
Use o modo de teste da plataforma (se disponível) ou aguarde a primeira venda real. O evento aparecerá no log abaixo.
📍 ONDE CADASTRAR EM CADA PLATAFORMA
Hotmart
Ferramentas → Webhooks → Adicionar webhook → cole a URL → selecione todos os eventos de compra.
Dica: adicione o Hottok no campo "Webhook Secret" dentro de ⚙️ Config → Webhook.
Kiwify
Conta → Webhooks → Adicionar → cole a URL. Para segurança, ative a assinatura e coloque o segredo no campo Kiwify Secret em ⚙️ Config.
Eduzz
Conta → Integrações → Webhooks → Nova URL. Selecione os eventos: Venda Concluída, Aguardando Pagamento, Reembolso.
Monetizze
Configurações → Webhooks → Adicionar Webhook. Cole a URL e marque os eventos de compra aprovada e estorno.
PerfectPay / Braip / Ticto / Payt
Configurações da conta → Integrações → Webhook / Postback. Cole a URL correspondente à plataforma.
Clickbank / Digistore24
Account Settings → My Site → Advanced Tools → Instant Notification URL (Clickbank) ou Account → Webhooks (Digistore). Cole a URL.
🔒 Segurança (recomendado)
Em ⚙️ Config → Webhook, defina um Webhook Secret. Depois adicione ?secret=SUA_SENHA no final de cada URL que cadastrar nas plataformas. Assim somente requisições com a senha correta serão aceitas. Exemplo: https://seu-site.pages.dev/webhook/hotmart?secret=minhasenha123
URLs para cadastrar nas plataformas
Adicione &secret=SUA_SENHA quando configurar o Webhook Secret
Eventos recebidos

Nenhum evento ainda. Configure os webhooks nas plataformas.

📊 Resumo

Faturamento Líquido
R$ 0,00
Gastos com anúncios
R$ 0,00
ROAS
N/A
Lucro
R$ 0,00
Vendas por Produto
Nenhuma venda por aqui
Vendas Pendentes
R$ 0,00
ROI
N/A
Custos de Produto
R$ 0,00
Vendas Reembolsadas
R$ 0,00
Margem
N/A
Despesas adicionais
R$ 0,00
Imposto sobre vendas
R$ 0,00
Reembolso
0.0%
Taxas
R$ 0,00
Imposto total
R$ 0,00
Chargeback
0.0%
Imposto Meta Ads
R$ 0,00
Vendas por Pagamento
Total
0
Vendas por Fonte
Nenhuma venda por aqui
Taxa de Aprovação
Cartão
N/A
Pix
N/A
Boleto
N/A
Outros
N/A
Geral
📊 Análise detalhada
📊

Abra a aba Analytics para carregar os dados.

ℹ️ Histórico armazenado por dia (TTL 13 meses). Clique em qualquer linha para filtrar. Configure taxas/custos na aba ⚙️ Config → 🧾 Custos & Impostos.

🔗 UTMs & Scripts

Códigos UTM para Anúncios

Selecione a plataforma de anúncio e o checkout, copie o código e cole no campo de URL final do anúncio.

Scripts para Landing Page

Cole no <head> de todas as suas LPs para capturar e preservar os UTMs entre redirecionamentos.

Carregando...
Script de Back Redirect

Redireciona o usuário quando ele pressionar "Voltar". Edite a variável link antes de usar.

📊 Google Analytics 4

🇧🇷 Propriedade Brasil (BRL)


🌎 Propriedade Internacional (USD) opcional

📘 Facebook CAPI

Pixel padrão

🔢 PIXEL ID
  1. Acesse business.facebook.com/events_manager ↗
  2. No menu lateral, clique em Origens de dados e selecione seu Pixel. (Sem pixel? "+ Conectar origens de dados" → "Web" → "Facebook Pixel")
  3. Clique na aba Configurações
  4. O Pixel ID é o número de 15–16 dígitos logo abaixo do nome do pixel — clique para copiar
🔑 ACCESS TOKEN
  1. Na mesma aba Configurações do pixel, role a página para baixo
  2. Encontre a seção Conversions API
  3. Clique em "Gerar token de acesso manualmente"
  4. Copie o token completo — começa com EAA e tem ~200 caracteres
⚠️ Guarde o token — o Facebook não o exibe novamente.

Múltiplas BMs — PixelMap (roteado por utm_host)

Coloque o código no utm_host do anúncio (ex: C1_MOBILE). O Worker roteia para o Pixel correto automaticamente.

🎵 TikTok Events API

Pixel padrão

🔢 PIXEL ID
  1. Acesse ads.tiktok.com ↗ e faça login na conta de anunciante
  2. Menu superior → Assets (Ativos) → Events (Eventos) — ou Events Manager direto ↗
  3. Sem pixel? Clique em "Create Pixel" → "TikTok Pixel" → "Manually Install Pixel Code" → dê um nome → Create
  4. Clique no pixel desejado — o Pixel ID aparece no topo, formato CXXXXXXXXXXXXXXXX (começa com "C")
  5. Clique no ícone de copiar ao lado do ID
🔑 ACCESS TOKEN
  1. Na página do pixel, clique na aba Settings
  2. Role para baixo até a seção Events API
  3. Clique em "Generate Access Token"
  4. Copie o token completo da janela que abre — antes de fechar
⚠️ O token do TikTok pode expirar. Se as conversões pararem de chegar, volte em Settings → Events API e gere um novo.

Múltiplas contas — ttPixelMap (roteado por utm_host)

Mesmo padrão do Facebook: coloque o código no utm_host do anúncio (ex: C1_MOBILE). O Worker roteia para o Pixel TikTok correto automaticamente.

🔍 Google Ads Enhanced Conversions

Credenciais da API

Envio server-side de conversões direto para o Google Ads — mesmo princípio do Facebook CAPI. Funciona quando o visitante chegou pela busca paga (Google gera um gclid na URL).
⚠️ Requer gclid na URL do anúncio — configure o auto-tagging no Google Ads.

👤 CUSTOMER ID
  1. Acesse ads.google.com ↗ e faça login
  2. No canto superior direito aparece o número da conta no formato XXX-XXX-XXXX
  3. Cole esse número no campo Customer ID acima (com ou sem hífens)
🎯 CONVERSION ACTION ID
  1. No Google Ads, clique em MetasConversõesAções de conversão
  2. Crie uma ação do tipo "Compra" se ainda não tiver
  3. Clique na ação → em Detalhes de origem, veja a tag — o ID aparece como AW-XXXXXXXXXX/YYYYYYYYYYYY
  4. O número após a barra (YYYYYYYYYYYY) é o Conversion Action ID
  5. Alternativa: na URL ao editar a ação, o ID está no parâmetro conversionActionId=...
🔑 DEVELOPER TOKEN
  1. No Google Ads, clique em ⚙️ Ferramentas e configuraçõesAPI Center
  2. Se não houver Developer Token, clique em "Apply for access" e aguarde aprovação (normalmente imediata)
  3. Copie o token exibido — começa com letras/números, sem prefixo especial
  4. Nota: tokens novos ficam em modo TEST. Para conversões reais, solicite "Basic Access" no mesmo painel
🔐 OAUTH2 CLIENT ID + CLIENT SECRET
  1. Acesse console.cloud.google.com ↗ → crie ou selecione um projeto
  2. APIs e serviçosBiblioteca → pesquise "Google Ads API"Ativar
  3. APIs e serviçosCredenciaisCriar credenciaisID do cliente OAuth 2.0
  4. Tipo de aplicativo: Aplicativo da Web
  5. Em URIs de redirecionamento autorizados, adicione: https://developers.google.com/oauthplayground
  6. Clique em Criar — aparece o Client ID e o Client Secret. Copie os dois.
♻️ REFRESH TOKEN
  1. Acesse developers.google.com/oauthplayground ↗
  2. Clique no ícone de ⚙️ engrenagem no canto superior direito
  3. Marque "Use your own OAuth credentials"
  4. Cole o Client ID e o Client Secret que você obteve acima
  5. Feche o painel de configurações
  6. No campo Step 1 — Input your own scopes, cole: https://www.googleapis.com/auth/adwords
  7. Clique em Authorize APIs → faça login com a conta do Google Ads
  8. Clique em Exchange authorization code for tokens
  9. Copie o Refresh token — ele não expira (a menos que você o revogue)
✅ O Refresh Token é permanente. Você só precisa gerá-lo uma vez.
💰 Gastos de Anúncios — ROAS

Configure aqui para ver ROAS e ROI na aba Analytics → 💰 ROAS. Para uso próprio (suas contas), não requer aprovação de app — basta gerar os tokens.

Meta Ads (Facebook / Instagram)

  1. Acesse developers.facebook.com ↗Meus Apps → Criar App
  2. Tipo: Business → dê um nome (ex: "MinhaConta") → Criar App
  3. No dashboard do app: Adicionar produto → Marketing API → Configurar
  4. Acesse Graph API Explorer ↗ → selecione seu app
  5. Em permissões, adicione: ads_read + ads_managementGerar token de acesso
  6. Recomendado (token permanente): Business Manager → Configurações do negócio → Usuários → Usuários do sistema → Adicionar → Gerar token → marcar ads_read + ads_management
  7. O Ad Account ID: acesse Gerenciador de Anúncios ↗ — o ID está na URL como act_XXXXXXXXXX
✅ System User Token não expira. Token de usuário normal expira em 60 dias — regenere pelo Explorer.

TikTok Ads

  1. Acesse ads.tiktok.com/marketing_api/apps ↗
  2. Clique em Create App → preencha as informações → Create
  3. Na página do app: copie o App ID; depois clique em Authorization → Get Access Token
  4. Autorize com sua conta de anúncios — o token dá acesso às suas contas sem revisão
  5. O Advertiser ID: em ads.tiktok.com ↗, canto superior direito, número abaixo do nome da conta
⚠️ Token do TikTok Ads API expira. Renove periodicamente em Apps → Authorization.

Google Ads usa credenciais acima

As credenciais OAuth já estão no card "Google Ads Enhanced Conversions". Para puxar gastos de múltiplas contas, adicione os Customer IDs aqui. Deixe vazio para usar o mesmo Customer ID das conversões.

Para MCC: adicione o ID do Manager Account primeiro e os sub-IDs em seguida. Configure também o campo "Login Customer ID" se necessário.

🧾 Custos & Impostos

Estes valores são usados para calcular Lucro, ROI e Margem no Resumo. Deixe em 0 qualquer campo que não se aplique.

Taxas de plataforma de checkout (% descontada por cada venda)


Impostos

Aplicado sobre o Faturamento Líquido

Aplicado sobre os Gastos com anúncios


Outros custos

Prorateado pelo período selecionado

🔒 Segurança dos Webhooks

Secret geral

Adicione ?secret=SUA_SENHA no final de cada URL de webhook cadastrada nas plataformas.


Hotmart Hottok opcional


Kiwify Secret HMAC opcional

Progresso de setup
0 / 20

Os checkboxes ficam salvos no seu navegador.

🚀
Guia de Setup — Campaign HQ na Cloudflare
Siga os 4 blocos abaixo para colocar o sistema no ar e integrar tudo. Cada passo tem os comandos prontos para copiar — sem precisar abrir nenhum manual.
🌐 BLOCO 1 — Deploy na Cloudflare (faça uma vez)
1
Criar conta na Cloudflare (gratuito)
Acesse o site abaixo, crie sua conta e faça login. O plano gratuito dá 100 mil requisições por dia — mais do que suficiente.
dash.cloudflare.com/sign-up ↗ nodejs.org (instalar Node.js) ↗
Se você já tem conta na Cloudflare e Node.js instalado, pule para o passo 2.

2
Abrir o PowerShell na pasta do projeto
Pressione Win + R, digite powershell e tecle Enter. Depois navegue até a pasta:
cd C:\Users\Anderson\pageswirl

3
Instalar dependências e fazer login no Wrangler
Rode os dois comandos abaixo. O segundo abre o navegador — clique em Allow para autorizar.
npm install
npx wrangler@4 login
✔ Quando o navegador mostrar "You have granted authorization to Wrangler!", pode fechar e voltar ao terminal.

4
Criar os 3 bancos de dados (KV namespaces)
Rode os 6 comandos abaixo. Cada par cria o namespace principal e o de preview.
ROTATOR_KVSlugs, URLs e contagem de cliques dos rotators
CONFIG_KVGA4, Facebook CAPI, Webhook Secret e mapeamento de pixels
WEBHOOK_LOG_KVLog dos últimos 100 eventos recebidos das plataformas
npx wrangler@4 kv namespace create ROTATOR_KV
npx wrangler@4 kv namespace create ROTATOR_KV --preview
npx wrangler@4 kv namespace create CONFIG_KV
npx wrangler@4 kv namespace create CONFIG_KV --preview
npx wrangler@4 kv namespace create WEBHOOK_LOG_KV
npx wrangler@4 kv namespace create WEBHOOK_LOG_KV --preview
📋 Cada comando exibe um id no terminal. Copie e guarde os 6 IDs — você vai usá-los no próximo passo.

5
Atualizar o arquivo wrangler.toml com os IDs
Abra C:\Users\Anderson\pageswirl\wrangler.toml e substitua os 6 placeholders pelos IDs que o terminal exibiu:
# wrangler.toml — substitua os valores destacados [[kv_namespaces]] binding = "ROTATOR_KV" id = "<ID do ROTATOR_KV>" preview_id = "<preview_id do ROTATOR_KV>" [[kv_namespaces]] binding = "CONFIG_KV" id = "<ID do CONFIG_KV>" preview_id = "<preview_id do CONFIG_KV>" [[kv_namespaces]] binding = "WEBHOOK_LOG_KV" id = "<ID do WEBHOOK_LOG_KV>" preview_id = "<preview_id do WEBHOOK_LOG_KV>"
⚠️ Os valores em azul devem ser substituídos pelos IDs reais. Cada ID é uma string de 32 caracteres, ex: a1b2c3d4e5f6789012345678901234ab

6
Fazer o deploy para a Cloudflare
Execute o comando abaixo. Na primeira vez ele cria o projeto automaticamente. Você receberá uma URL como https://pageswirl.pages.dev
npx wrangler@4 pages deploy public --project-name pageswirl
✔ Anote a URL exibida — ela é o endereço do seu painel na internet.

7
Definir o ADMIN_TOKEN (senha do painel) na Cloudflare
Esta é a senha que você digita para entrar no painel. Configure diretamente no dashboard da Cloudflare:
Clique em Workers & Pages → selecione pageswirl
Vá em Settings → Environment Variables
Clique Add variable → Nome: ADMIN_TOKEN → Valor: uma senha forte
Marque Encrypt e clique Save and deploy
✔ Deploy concluído! Acesse a URL do seu projeto e faça login com o ADMIN_TOKEN que definiu.
⚙️ BLOCO 2 — Configurações no painel (aba Config)
8
Configurar GA4 — Google Analytics
Você vai precisar do Measurement ID (G-XXXXXXXXX) e do API Secret. Onde encontrar cada um:
Measurement ID: GA4 → Admin → Fluxos de dados → clique no fluxo → copie "G-XXXXXXXX"
API Secret: GA4 → Admin → Fluxos de dados → seu fluxo → "Measurement Protocol API secrets" → Criar
analytics.google.com ↗

9
Configurar Facebook CAPI — Pixel ID e Access Token
Siga os passos abaixo para encontrar os dois valores que o sistema precisa. Todo o processo leva menos de 5 minutos.
🔢 COMO OBTER O PIXEL ID
No menu lateral esquerdo, clique em Origens de dados e selecione seu Pixel. Não tem pixel? Clique em "+ Conectar origens de dados" → "Web" → "Facebook Pixel" → siga o assistente.
Clique na aba Configurações do pixel.
O Pixel ID é o número de 15–16 dígitos exibido logo abaixo do nome do pixel (ex: 123456789012345). Clique no número para copiar.
🔑 COMO OBTER O ACCESS TOKEN (CAPI)
Na mesma tela do pixel, certifique-se de estar na aba Configurações.
Role a página para baixo até encontrar a seção Conversions API.
Clique em "Gerar token de acesso manualmente" (ou "Generate Access Token").
O token começa com EAA e tem cerca de 200 caracteres. Selecione tudo e copie o token completo.
⚠️ Guarde o token em local seguro — o Facebook não exibe o mesmo token duas vezes. Se perder, gere um novo pelo mesmo caminho.
Se você usa múltiplos pixels em BMs diferentes, cadastre cada um no campo Pixel Map da aba Config com um código curto (ex: C1, C2) que vai nos UTMs como utm_host=C1_MOBILE. O Test Event Code (TEST12345) é opcional — aparece no Gerenciador de Eventos quando você clica em "Testar eventos" e serve para validar a integração sem esperar uma venda real.

10
Configurar TikTok Events API — Pixel ID e Access Token opcional
Use se você anuncia no TikTok Ads. Funciona igual ao Facebook CAPI — envio server-side de conversões para eliminar perda de rastreamento.
🔢 COMO OBTER O TIKTOK PIXEL ID
Acesse ads.tiktok.com ↗ e faça login na sua conta de anunciante.
No menu superior, clique em Assets (Ativos) → Events (Eventos). Ou acesse diretamente: Events Manager ↗.
Não tem pixel ainda? Clique em "Create Pixel" → "TikTok Pixel" → "Manually Install Pixel Code" → dê um nome → clique em "Create".
Clique no pixel desejado na lista. O Pixel ID aparece no topo da página — formato CXXXXXXXXXXXXXXXX (começa com "C", 16–18 caracteres). Clique no ícone de copiar ao lado do ID.
🔑 COMO OBTER O ACCESS TOKEN (EVENTS API)
Na página do pixel (mesmo lugar onde encontrou o ID), clique na aba Settings.
Role a página até encontrar a seção Events API.
Clique em "Generate Access Token". O token aparece em uma janela — copie antes de fechar.
Cole o token no campo Access Token na aba Config.
⚠️ O Access Token do TikTok pode expirar. Se as conversões pararem de chegar, volte em Settings → Events API e gere um novo token.

11
Configurar Google Ads Enhanced Conversions opcional
Envio server-side de conversões direto para o Google Ads — funciona somente quando o visitante chega com um gclid (gerado automaticamente ao clicar em um anúncio com auto-tagging ativo).
⚡ PRÉ-REQUISITO — ATIVAR AUTO-TAGGING
No Google Ads, clique em ⚙️ FerramentasConfigurações da conta
Seção Rastreamento → marque Auto-tagging = Ativado
Salve. A partir daí, todos os cliques nos seus anúncios receberão um ?gclid=XXX automático na URL
🔑 CREDENCIAIS NECESSÁRIAS — ONDE ENCONTRAR CADA UMA
Customer ID: número da sua conta Google Ads no topo do painel (formato 123-456-7890)
Conversion Action ID: Google Ads → Metas → Conversões → clique na ação → Detalhes de origem → código AW-XXXXXX/YYYYYY — o ID é o número após a barra
Developer Token: Google Ads → ⚙️ Ferramentas e configurações → API Center → copie o token exibido (solicite acesso se for a primeira vez)
OAuth2 Client ID + Secret: console.cloud.google.com ↗ → Ative a Google Ads API → Credenciais → Criar credenciais → OAuth 2.0 Client ID → Tipo: Aplicativo da Web → Adicione o redirect URI: https://developers.google.com/oauthplayground
Refresh Token: acesse developers.google.com/oauthplayground ↗ → ⚙️ "Use your own OAuth credentials" → cole Client ID + Secret → Scope: https://www.googleapis.com/auth/adwords → Authorize → Exchange code → copie o Refresh Token
✔ Todas as credenciais ficam na aba Config → Google Ads Enhanced Conversions. O Refresh Token não expira — faça isso só uma vez.

12
Definir o Webhook Secret (segurança)
O Webhook Secret protege o endpoint de receber requisições falsas. Crie uma senha forte e cole na aba Config (seção Segurança).
k9xZ2mP7vQ4nR1wL8jT3cA5sE6bH0yN
Este é apenas um exemplo. Crie o seu próprio — qualquer combinação de letras, números e símbolos funciona. Você vai usar esta mesma senha nas plataformas ao cadastrar os webhooks.
📄 BLOCO 3 — Scripts nas landing pages
13
Script 1 — Captura de UTMs (cole no <head> de todas as LPs)
Lê todos os parâmetros UTM + clique IDs da URL e salva no localStorage por 30 dias. Cole no <head> de cada landing page.
<script> (function(){ var KEY = 'chq_utm', DAYS = 30; var p = new URLSearchParams(window.location.search); var keys = ['utm_source','utm_medium','utm_campaign', 'utm_content','utm_term','utm_conj', 'utm_ad','utm_lp','utm_host', 'fbclid','ttclid','gclid']; var d = {}; keys.forEach(function(k){ var v = p.get(k); if(v) d[k] = v; }); if(Object.keys(d).length){ d._t = Date.now(); try{ localStorage.setItem(KEY, JSON.stringify(d)); }catch(e){} } // Expira UTMs antigos try{ var raw = localStorage.getItem(KEY); if(raw){ var e = JSON.parse(raw); if(e._t && Date.now()-e._t > DAYS*864e5) localStorage.removeItem(KEY); } }catch(e){} })(); </script>
💡 Salva por 30 dias no localStorage — os UTMs sobrevivem ao visitante fechar e reabrir o navegador.

14
Script 2 — Injeta UTMs nos botões de compra
Lê os UTMs salvos e adiciona automaticamente em todos os links de checkout. Cole antes do </body>depois do script anterior.
<script> (function(){ var KEY = 'chq_utm'; var keys = ['utm_source','utm_medium','utm_campaign', 'utm_content','utm_term','utm_conj', 'utm_ad','utm_lp','utm_host', 'fbclid','ttclid','gclid']; function getUtms(){ try{ return JSON.parse(localStorage.getItem(KEY)) || {}; }catch(e){ return {}; } } function appendUtms(a) { try { var d = getUtms(); if(!Object.keys(d).length) return; var url = new URL(a.href, window.location.href); keys.forEach(function(k){ if(d[k]) url.searchParams.set(k, d[k]); }); a.href = url.toString(); } catch(e){} } function injectAll(){ document.querySelectorAll('a[href]').forEach(appendUtms); } document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', injectAll) : injectAll(); // Cobre elementos carregados dinamicamente (page builders, SPAs) new MutationObserver(injectAll).observe(document.body||document.documentElement, {childList:true, subtree:true}); // Garante injeção no clique (última linha de defesa) document.addEventListener('click', function(e){ var a = e.target.closest('a[href]'); if(a) appendUtms(a); }, true); })(); </script>
✔ Com os dois scripts instalados, todos os UTMs (incluindo utm_lp injetado pelo rotator) chegam com a venda nos webhooks.
📌 Mapeamento Hotmart: o Hotmart repassa os UTMs via objeto tracking interno, então use utm_campaign para o nome do conjunto e utm_medium para o código da conta. O webhook mapeia automaticamente para utm_conj e utm_host. Para Kiwify e demais, use utm_conj/utm_ad/utm_host diretamente.
📡 BLOCO 4 — Registrar webhooks nas plataformas
15
Copiar as URLs e cadastrar em cada plataforma
Na aba Webhooks deste painel você encontra a URL pronta de cada plataforma. Basta copiar e colar no painel da plataforma. Onde cadastrar em cada uma:
HotmartFerramentas → Webhook → Adicionar → evento: Compra Aprovada
KiwifyConfigurações → Webhooks → Novo webhook → Order Approved
EduzzConfigurações → Notificações → Postback URL
MonetizzeFerramentas → Postback → Adicionar URL
PerfectPayConfigurações → Integrações → Webhook
BraipIntegrações → Webhook → Nova URL
TictoConfigurações → Webhooks
PaytConfigurações → Webhooks
ClickbankAccount Settings → Notifications → IPN URL
Digistore24Account → Integrations → IPN URL
O formato da URL é sempre: https://pageswirl.pages.dev/webhook/PLATAFORMA?secret=SEU_SECRET
A aba Webhooks já monta a URL certa com o seu secret preenchido.
🛠️ BLOCO 5 — Scripts extras para Landing Page
16
Script de Scroll Depth + Tempo na Página
Dispara eventos no GA4 quando o visitante scrolla 25%, 50%, 75% ou 90% da LP, e quando permanece 30s, 60s ou 120s na página. Cole antes do </body> da LP — depois do script do Google Analytics (gtag.js).
<script>
(function () {
  // ── Scroll depth + Tempo na página — Campaign HQ ──────────────
  var SCROLL_THRESHOLDS = [25, 50, 75, 90]; // % da página
  var TIME_THRESHOLDS   = [30, 60, 120];    // segundos

  var fired = {};

  function fire(name, params) {
    if (typeof gtag !== 'undefined') gtag('event', name, params);
  }

  // Scroll tracking
  function onScroll() {
    var scrolled = window.scrollY || document.documentElement.scrollTop;
    var total    = document.body.scrollHeight - window.innerHeight;
    if (total <= 0) return;
    var pct = Math.round((scrolled / total) * 100);
    SCROLL_THRESHOLDS.forEach(function (t) {
      if (!fired['s' + t] && pct >= t) {
        fired['s' + t] = true;
        fire('scroll_depth', { depth_percent: t, page: location.pathname });
      }
    });
  }
  window.addEventListener('scroll', onScroll, { passive: true });

  // Tempo na página
  TIME_THRESHOLDS.forEach(function (t) {
    setTimeout(function () {
      if (!fired['t' + t]) {
        fired['t' + t] = true;
        fire('time_on_page', { seconds: t, page: location.pathname });
      }
    }, t * 1000);
  });
})();
</script>
Os eventos aparecem no GA4 em Eventos → scroll_depth e time_on_page com o parâmetro depth_percent / seconds. Crie dimensões personalizadas no GA4 para segmentar.

17
Script Backfix — Interceptar o botão Voltar
Quando o visitante tenta sair clicando em "Voltar" no navegador, ele é redirecionado para uma página de downsell (desconto, oferta menor) em vez de sair. Substitua URL_DO_DOWNSELL pelo link da sua oferta de recuperação. Cole antes do </body>.
<script>
(function () {
  // ── Backfix — redireciona botão Voltar para downsell ──────────
  var DOWNSELL_URL = 'URL_DO_DOWNSELL'; // ← substitua aqui

  // Empurra um estado extra para o histórico
  history.pushState({ backfix: true }, '', location.href);

  window.addEventListener('popstate', function (e) {
    // Empurra de volta para manter o visitante na página
    history.pushState({ backfix: true }, '', location.href);
    // Redireciona para o downsell
    setTimeout(function () {
      location.replace(DOWNSELL_URL);
    }, 50);
  });
})();
</script>
⚠️ Não use o Backfix em páginas de checkout — pode interferir com o processo de pagamento. Use apenas na landing page principal.
🎉 BLOCO 6 — Scripts para Página de Obrigado
18
Pixel base do TikTok (cole nas LPs e na página de obrigado)
Instale o código base do TikTok Pixel no <head> de todas as páginas — LP e obrigado. Substitua SEU_TIKTOK_PIXEL_ID pelo seu Pixel ID (encontrado em TikTok Events Manager).
<!-- TikTok Pixel Base Code -->
<script>
!function(w,d,t){
  w.TiktokAnalyticsObject=t;
  var ttq=w[t]=w[t]||[];
  ttq.methods=['page','track','identify','instances','debug',
    'on','off','once','ready','alias','group',
    'enableCookie','disableCookie'];
  ttq.setAndDefer=function(t,e){
    t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}
  };
  for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);
  ttq.instance=function(t){
    for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)
      ttq.setAndDefer(e,ttq.methods[n]);
    return e
  };
  ttq.load=function(e,n){
    var i='https://analytics.tiktok.com/i18n/pixel/events.js';
    ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,
    ttq._t=ttq._t||{},ttq._t[e]=+new Date,
    ttq._u=ttq._u||{},n&&(ttq._u[e]=n);
    var o=document.createElement('script');
    o.type='text/javascript',o.async=!0,o.src=i+'?sdkid='+e+'&lib='+t;
    var a=document.getElementsByTagName('script')[0];
    a.parentNode.insertBefore(o,a)
  };
  ttq.load('SEU_TIKTOK_PIXEL_ID'); // ← substitua aqui
  ttq.page();
}(window,document,'ttq');
</script>
<!-- End TikTok Pixel Base Code -->
O Pixel ID fica no TikTok Events Manager → selecione seu pixel → aba Overview ou Settings. O Access Token para a Events API está em Settings → Generate Access Token.

19
Script de Deduplicação Facebook — Página de Obrigado
Cole este script na página de obrigado (após a compra confirmada), depois do código base do Facebook Pixel. Ele lê o order_id da URL e dispara o evento Purchase com o mesmo eventID que o servidor já enviou via CAPI — evitando contagem dupla.
<script>
(function() {
  // ── Deduplicação Facebook — Página de Obrigado ────────────────
  // Lê o ID do pedido da URL (funciona com Hotmart, Kiwify, Eduzz, etc.)
  var u = new URL(window.location.href);
  var orderId = u.searchParams.get('transaction')
             || u.searchParams.get('order_id')
             || u.searchParams.get('invoice')
             || u.searchParams.get('cod')
             || u.searchParams.get('sale_code')
             || u.searchParams.get('transaction_id')
             || 'order-' + Date.now();

  var utmAd   = sessionStorage.getItem('utm_ad')   || '';
  var utmConj = sessionStorage.getItem('utm_conj') || '';

  if (typeof fbq !== 'undefined') {
    fbq('track', 'Purchase',
      { value: 0, currency: 'BRL', utm_ad: utmAd, utm_conj: utmConj },
      { eventID: orderId }  // mesmo eventID que o servidor enviou via CAPI
    );
  }
})();
</script>
✔ O eventID = orderId é o segredo da deduplicação: o Facebook ignora o evento duplicado quando Pixel e CAPI mandam o mesmo ID. O webhook já envia o CAPI com esse ID — este script fecha o ciclo no lado do browser.

20
Script de Deduplicação TikTok — Página de Obrigado
Cole este script na página de obrigado, depois do código base do TikTok Pixel (passo 16). O eventID igual garante que o TikTok não duplique a conversão entre Pixel e Events API.
<script>
(function() {
  // ── Deduplicação TikTok — Página de Obrigado ─────────────────
  var u = new URL(window.location.href);
  var orderId = u.searchParams.get('transaction')
             || u.searchParams.get('order_id')
             || u.searchParams.get('invoice')
             || u.searchParams.get('cod')
             || u.searchParams.get('sale_code')
             || u.searchParams.get('transaction_id')
             || 'order-' + Date.now();

  if (typeof ttq !== 'undefined') {
    ttq.track('PlaceAnOrder',
      { value: '0', currency: 'BRL', order_id: orderId },
      { eventID: orderId }  // mesmo eventID que o servidor enviou via TikTok Events API
    );
  }
})();
</script>
💡 Resumo dos scripts na página de obrigado: (1) Pixel base Facebook + base TikTok no <head> → (2) Script de dedup FB → (3) Script de dedup TikTok. O servidor envia CAPI + TikTok Events API via webhook; o browser fecha com os dois dedup scripts — sem contagem dupla.
Tudo pronto!
Com os 6 blocos concluídos o sistema está 100% funcional:
🌀 Rotator distribui tráfego e injeta utm_lp automático  ·  📄 Scripts passam UTMs + fbclid + ttclid para o checkout  ·  📡 Webhooks recebem vendas e disparam GA4 + Facebook CAPI + TikTok Events API  ·  🎉 Scripts de dedup na página de obrigado eliminam contagem dupla.

Para re-deployar após qualquer mudança de código, rode:
npx wrangler@4 pages deploy public --project-name pageswirl

📊 BLOCO 7 — Looker Studio (Google Data Studio) — relatórios avançados
📊
O que é e para que serve
O Looker Studio é a ferramenta gratuita do Google para criar dashboards visuais em cima dos dados do GA4. Ele se conecta diretamente à sua propriedade GA4 e exibe os eventos que chegam via webhook — incluindo os parâmetros personalizados como utm_conj, utm_ad, utm_lp e utm_host.
O resultado: tabelas separadas — uma para conjuntos, uma para criativos, uma para LPs — com seletor de data, filtros e gráficos. Tudo 100% gratuito.
1
Registrar as dimensões personalizadas no GA4 (OBRIGATÓRIO antes de tudo)
O GA4 não exibe parâmetros personalizados automaticamente no Looker Studio. Você precisa registrá-los manualmente. Sem isso, as colunas utm_conj, utm_ad etc. não aparecem.
⚠️ Faça isso antes de criar o relatório no Looker Studio. O GA4 demora 24–48h para processar as dimensões novas. Dados anteriores ao registro não terão essas colunas preenchidas.
Como registrar:
① analytics.google.comAcesse sua conta GA4
② Admin (engrenagem)Canto inferior esquerdo
③ Definições personalizadasColuna "Propriedade" → "Definições personalizadas"
④ Criar dimensãoBotão azul "Criar dimensão personalizada"
Crie uma dimensão para cada linha abaixo:
Nome da dimensão (você escolhe)
Nome do parâmetro EXATO
Escopo
Conjunto de anúncio
utm_conj
Evento
Criativo / Anúncio
utm_ad
Evento
Landing Page
utm_lp
Evento
Conta de anúncio
utm_host
Evento
Plataforma de venda
platform
Evento
Produto
product_name
Evento
✅ Ao salvar cada dimensão, o GA4 confirma. Aguarde 24–48h antes de verificar no Looker Studio.
2
Acessar o Looker Studio e criar a fonte de dados
Use a mesma conta Google que tem acesso à sua propriedade GA4.
② CriarBotão "+ Criar" → "Relatório"
③ Fonte de dadosJanela "Adicionar dados" → clique em "Google Analytics"
④ SelecionarEscolha sua conta GA4 → sua propriedade → o fluxo web → clique "Adicionar"
⑤ ConfirmarClique "Adicionar ao relatório" — o relatório abre em branco
💡 Se pedir permissão para acessar o GA4, autorize. O Looker Studio nunca altera os dados — só lê.
3
Adicionar o controle de período (seletor de data)
Este controle permite filtrar o relatório inteiro por qualquer período — hoje, esta semana, este mês, mês passado, range personalizado. É o equivalente ao seletor de data do GA4.
① MenuBarra superior → "Inserir" → "Controle de intervalo de datas"
② PosicionarArraste para o topo do relatório
③ PadrãoNo painel direito, defina o período padrão: "Últimos 28 dias" ou "Este mês"
✅ Agora qualquer pessoa que abrir o relatório pode mudar o período clicando no seletor.
4
Adicionar os cards de resumo (scorecards)
São os números grandes no topo — igual ao painel interno. Mostre: total de vendas, receita total e ticket médio.
① Inserir"Inserir" → "Scorecard" (clique 3 vezes para criar 3 cards)
② Card 1Métrica: Transações · Filtro: nome do evento = purchase
③ Card 2Métrica: Receita do evento (ou "Revenue")
④ Card 3Métrica: Valor médio do pedido (Average purchase revenue)
💡 Para configurar o filtro "evento = purchase": com o scorecard selecionado, painel direito → aba "Dados" → role até "Filtros" → "+ Adicionar filtro" → Dimensão: "Nome do evento", Condição: Igual a, Valor: purchase
5
Criar a tabela "Por Conjunto de anúncio" (utm_conj)
Esta tabela mostra cada conjunto numa linha separada com receita, vendas e ticket médio. Nenhuma campanha fica misturada com outra.
① Inserir"Inserir" → "Tabela"
② DimensãoPainel direito → "Dimensão" → procure "Conjunto de anúncio" (o nome que você deu ao utm_conj)
③ MétricasAdicione: Receita do evento · Transações · Valor médio do pedido
④ OrdenarClassificar por: "Receita do evento" → decrescente
⑤ FiltrarFiltros → Nome do evento = purchase
⑥ LinhasMáximo de linhas: 50 (ou mais)
✅ Resultado: cada linha = um conjunto. Colunas: "CONJ-MAIO-1", "CONJ-FESTA-2"... com receita de cada um separado.
6
Repetir para as outras dimensões (uma tabela por dimensão)
Copie a tabela do Passo 5 e troque apenas a dimensão. Cada tabela fica numa seção separada do relatório — não se misturam.
Tabela
Dimensão a usar
O que cada linha representa
Por Criativo
Criativo / Anúncio
Cada vídeo/imagem que você anunciou
Por LP
Landing Page
Qual versão de página converteu mais
Por Conta
Conta de anúncio
Qual BM / conta de tráfego performou melhor
Por Fonte
Origem da sessão
Facebook vs TikTok vs Google
Por Plataforma
Plataforma de venda
Hotmart vs Kiwify vs Eduzz etc.
💡 Copiar tabela: clique na tabela existente → Ctrl+C → Ctrl+V → arraste para outra área → troque a dimensão no painel direito. Tudo mais (métricas, filtro, ordenação) é herdado.
7
Adicionar filtros interativos (dropdown por campanha)
Permite clicar num dropdown e filtrar o relatório inteiro por um valor específico — ex: ver só o conjunto "CONJ-MAIO-1" em todas as tabelas ao mesmo tempo.
① Inserir"Inserir" → "Controle" → "Caixa de lista suspensa"
② DimensãoSelecione: Conjunto de anúncio (utm_conj)
③ RepitaCrie mais dropdowns para utm_ad, utm_lp, utm_host
④ PosicioneColoque os 4 dropdowns em linha no topo, abaixo do seletor de data
✅ Resultado: você seleciona "CONJ-FESTA-1" no dropdown e todas as tabelas e cards filtram instantaneamente mostrando só aquele conjunto.
8
Adicionar gráfico de evolução temporal (vendas por dia)
Mostra a curva de vendas dia a dia dentro do período selecionado — igual ao gráfico principal do GA4.
① Inserir"Inserir" → "Gráfico de séries temporais"
② DimensãoData (já vem por padrão)
③ MétricaReceita do evento + Transações (dois eixos)
④ FiltroNome do evento = purchase
9
Salvar e compartilhar o relatório
O relatório fica na sua conta do Google. Você pode acessar de qualquer dispositivo ou compartilhar com um sócio/gestor de tráfego.
SalvarCtrl+S ou clique "Salvar" — fica em lookerstudio.google.com/u/0/reporting
CompartilharÍcone de compartilhamento (pessoa+) → "Qualquer pessoa com o link pode visualizar"
Editar acessoPara permitir que outros editem: mude "visualizador" para "editor" por e-mail
⚠️ "Qualquer pessoa com o link pode visualizar" significa que quem tiver o link vê os dados — não exige login. Use com cuidado se os dados forem sigilosos.
📐 Como o relatório vai ficar — layout sugerido
Organizando os elementos na ordem abaixo, você terá um relatório profissional com uma página:
Linha 1 — Controles: [Seletor de data]   [▼ Conjunto]   [▼ Criativo]   [▼ LP]   [▼ Conta]
Linha 2 — Scorecards: [💰 Receita total]   [🛒 Nº de vendas]   [📦 Ticket médio]   [↩️ Estornos]
Linha 3 — Gráfico: [📈 Receita por dia — gráfico de área]
Linha 4 — Tabelas lado a lado: [Tabela: Por Conjunto]    [Tabela: Por Criativo]
Linha 5 — Tabelas lado a lado: [Tabela: Por LP]    [Tabela: Por Conta]
Como funciona o filtro cruzado: quando você clica numa linha de qualquer tabela (ex: "CONJ-FESTA-1"), todas as outras tabelas e scorecards da página filtram automaticamente para mostrar só aquele conjunto — incluindo os criativos, LPs e contas que estavam rodando naquela campanha. Este comportamento é nativo do Looker Studio (não precisa configurar nada extra).
⚠️ Dados históricos: o Looker Studio só mostra dados a partir do momento em que você registrou as dimensões personalizadas no GA4. Eventos anteriores ao registro aparecem com os campos utm_conj, utm_ad, etc. em branco. Registre as dimensões antes de começar a trafegar.
Resumo do fluxo completo: Webhook recebe venda → envia para GA4 via Measurement Protocol → GA4 armazena com parâmetros personalizados → Looker Studio lê e exibe nas tabelas separadas. Completamente automático após a configuração inicial.