cdp-edge 1.2.2 → 1.4.0

package/templates/scenarios/behavior-engine.js

@@ -46,6 +46,7 @@ const BehaviorEngine = {
 
   // 0.1 A/B Testing (Mode 1 - Edge Sync)
   setupABTesting() {
+    // Busca variante no Cookie ou URL (Modo 1)
     const getCookie = (name) => {
       const value = `; ${document.cookie}`;
       const parts = value.split(`; ${name}=`);
@@ -54,9 +55,10 @@ const BehaviorEngine = {
 
     const urlParams = new URLSearchParams(window.location.search);
     this.state.abVariant = urlParams.get('cdp_variant') || getCookie('cdp_ab_variant') || 'original';
-
+    
     console.log(`[CDP Edge] A/B Variant Detected: ${this.state.abVariant}`);
-
+    
+    // Intercepta o cdpTrack.track para injetar a variante globalmente
     const originalTrack = cdpTrack.track;
     cdpTrack.track = (eventName, eventParams = {}) => {
       const enrichedParams = {
@@ -77,6 +79,7 @@ const BehaviorEngine = {
     this.state.userScore = Math.min(100, Math.max(0, this.state.userScore + points));
     console.log(`[CDP Edge] Score Update: +${points} (${reason}) | Total: ${this.state.userScore}`);
 
+    // Gatilhos de Plataforma
     if (this.state.userScore >= this.config.scoreThresholds.highIntent && !this.state.firedScoreEvents.has('highIntent')) {
       this.state.firedScoreEvents.add('highIntent');
       cdpTrack.track('High_Intent_Lead', { score: this.state.userScore, meta_intensity: 'high' });
@@ -91,18 +94,20 @@ const BehaviorEngine = {
     document.addEventListener('click', (e) => {
       const now = Date.now();
       this.state.clickHistory.push(now);
+      
+      // Limpa histórico antigo
       this.state.clickHistory = this.state.clickHistory.filter(t => now - t < this.config.rageClickTime);
-
+      
       if (this.state.clickHistory.length >= this.config.rageClickThreshold) {
         cdpTrack.track('rage_click', {
           element_id: e.target.id || '',
           element_class: e.target.className || '',
           x: e.pageX,
           y: e.pageY,
-          meta_intensity: 'low'
+          meta_intensity: 'low' // Envia sinal leve para Meta
         });
         this.addScore(-10, 'rage_click');
-        this.state.clickHistory = [];
+        this.state.clickHistory = []; // Reseta após detecção
       }
     });
   },
@@ -111,17 +116,17 @@ const BehaviorEngine = {
   setupScroll() {
     const markers = [25, 50, 75, 90];
     const fired = new Set();
-
+    
     window.addEventListener('scroll', () => {
       const scrollPct = Math.round((window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100);
-
+      
       markers.forEach(m => {
         if (scrollPct >= m && !fired.has(m)) {
           fired.add(m);
           this.addScore(m === 25 ? 5 : (m === 50 ? 5 : 10), `scroll_${m}%`);
           cdpTrack.track('scroll_depth', {
             percent: m,
-            meta_intensity: m >= 50 ? 'medium' : 'low'
+            meta_intensity: m >= 50 ? 'medium' : 'low' // Envia como sinal mais forte após 50%
           });
         }
       });
@@ -131,7 +136,7 @@ const BehaviorEngine = {
   // 2. Tab Visibility (VSL Focus)
   setupVisibility() {
     document.addEventListener('visibilitychange', () => {
-      const status = document.visibilityState;
+      const status = document.visibilityState; // 'visible' ou 'hidden'
       cdpTrack.track('tab_visibility_change', {
         status: status,
         time_since_start: Math.floor((Date.now() - this.state.startTime) / 1000),
@@ -143,6 +148,8 @@ const BehaviorEngine = {
   // 3. Click Heatmap (D1 Only)
   setupHeatmap() {
     document.addEventListener('click', (e) => {
+      // Enviamos apenas para o servidor/D1 para não poluir o pixel do cliente
+      // sendServerEvent é o método interno que pula o despacho para Meta/TikTok
       if (typeof cdpTrack.sendServerEvent === 'function') {
         cdpTrack.sendServerEvent('click_heatmap', null, {
           x: e.pageX,
@@ -177,18 +184,24 @@ const BehaviorEngine = {
       const isVimeo = src.includes('vimeo.com/video');
 
       if (isYT || isVimeo) {
+        // Observer de progresso (via postMessage para evitar dependência de SDK pesado)
         window.addEventListener('message', (event) => {
           try {
             const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+            
+            // Lógica YouTube
             if (isYT && data.event === 'infoDelivery' && data.info && data.info.currentTime) {
               this.handleVideoProgress(iframe, data.info.currentTime, data.info.duration, fired, 'YouTube');
             }
+            
+            // Lógica Vimeo
             if (isVimeo && data.event === 'timeupdate') {
               this.handleVideoProgress(iframe, data.data.seconds, data.data.duration, fired, 'Vimeo');
             }
           } catch (e) { /* ignore non-json messages */ }
         });
-
+        
+        // Ativa o JS API se for YouTube
         if (isYT && !src.includes('enablejsapi=1')) {
           const url = new URL(src);
           url.searchParams.set('enablejsapi', '1');
@@ -244,9 +257,10 @@ const BehaviorEngine = {
 
   // 6.1 Form Abandonment — saiu da página após interagir com formulário sem submeter
   setupFormAbandonment() {
-    const formInteracted = new Set();
+    const formInteracted = new Set(); // campos que receberam foco
     let formSubmitted = false;
 
+    // Marcar campo como interagido no focus
     document.addEventListener('focusin', (e) => {
       const el = e.target;
       if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT') {
@@ -255,10 +269,12 @@ const BehaviorEngine = {
       }
     }, true);
 
+    // Marcar submit realizado (qualquer formulário)
     document.addEventListener('submit', () => {
       formSubmitted = true;
     }, true);
 
+    // Detectar abandono via visibilitychange (tab hidden / fechando)
     document.addEventListener('visibilitychange', () => {
       if (document.visibilityState === 'hidden' && formInteracted.size > 0 && !formSubmitted) {
         this.addScore(-5, 'form_abandonment');
@@ -271,8 +287,10 @@ const BehaviorEngine = {
       }
     });
 
+    // Fallback: beforeunload
     window.addEventListener('beforeunload', () => {
       if (formInteracted.size > 0 && !formSubmitted) {
+        // Usar sendBeacon para garantir entrega mesmo na saída
         if (navigator.sendBeacon && typeof cdpTrack !== 'undefined') {
           const data = JSON.stringify({
             eventName: 'form_abandonment',
@@ -289,26 +307,31 @@ const BehaviorEngine = {
 
   // 6.2 Exit Intent — mouse saindo pelo topo da viewport
   setupExitIntent() {
-    let exitFired = false;
+    let exitFired = false; // disparar apenas uma vez por sessão
 
     document.addEventListener('mousemove', (e) => {
+      // Threshold: mouse a menos de 20px do topo da viewport
       if (e.clientY < 20 && !exitFired) {
         exitFired = true;
-        this.addScore(15, 'exit_intent');
+        this.addScore(15, 'exit_intent'); // sinal positivo: ainda está aqui
         cdpTrack.track('exit_intent', {
           mouse_y: e.clientY,
           time_on_page: Math.floor((Date.now() - this.state.startTime) / 1000),
           user_score: this.state.userScore,
-          meta_intensity: 'high',
+          meta_intensity: 'high', // Alta intenção — usuário está prestes a sair
         });
+
+        // Resetar após 30s para redetectar se usuário continuar
         setTimeout(() => { exitFired = false; }, 30000);
       }
     }, { passive: true });
 
+    // Mobile: detectar via visibilitychange (sem mouse)
     let mobileExitFired = false;
     document.addEventListener('visibilitychange', () => {
       if (document.visibilityState === 'hidden' && !mobileExitFired) {
         const timeOnPage = Math.floor((Date.now() - this.state.startTime) / 1000);
+        // Só dispara se usuário ficou tempo suficiente (não é bounce imediato)
         if (timeOnPage > 5) {
           mobileExitFired = true;
           cdpTrack.track('exit_intent_mobile', {
@@ -327,9 +350,9 @@ const BehaviorEngine = {
       const selectedText = window.getSelection().toString();
       if (selectedText.length > 0) {
         this.addScore(20, 'text_copy');
-        cdpTrack.track('content_copy', {
+        cdpTrack.track('content_copy', { 
           text_length: selectedText.length,
-          meta_intensity: 'medium'
+          meta_intensity: 'medium' 
         });
       }
     });
@@ -342,16 +365,16 @@ const BehaviorEngine = {
       if (link && link.href) {
         const url = link.href;
         const isExternal = !url.includes(window.location.hostname);
-        const isWhitelisted = url.includes('wa.me') ||
-                             url.includes('hotmart.com') ||
-                             url.includes('kiwify.com') ||
+        const isWhitelisted = url.includes('wa.me') || 
+                             url.includes('hotmart.com') || 
+                             url.includes('kiwify.com') || 
                              url.includes('checkout');
-
+        
         if (isExternal && isWhitelisted) {
           this.addScore(100, 'outbound_conversion_intent');
-          cdpTrack.track('outbound_click', {
+          cdpTrack.track('outbound_click', { 
             destination: url,
-            meta_intensity: 'high'
+            meta_intensity: 'high' 
           });
         }
       }

package/docs/installation.md

@@ -1,155 +0,0 @@
-# CDP Edge — Instalação em Projetos de Clientes
-
-Como integrar o CDP Edge em qualquer projeto para que Claude Code, VS Code, Cursor e outras IDEs com IA o reconheçam automaticamente.
-
----
-
-## Estrutura recomendada
-
-```
-meu-projeto-cliente/          ← abrir esta pasta no Claude Code / VS Code
-├── CLAUDE.md                 ← ⭐ faz o Claude Code ativar o CDP Edge automaticamente
-├── .cursorrules              ← (opcional) para Cursor IDE
-├── cdp-edge/                 ← CDP Edge instalado aqui
-│   ├── extracted-skill/
-│   ├── server-edge-tracker/
-│   ├── templates/
-│   └── docs/
-├── src/                      ← código do projeto do cliente
-└── ...
-```
-
----
-
-## Passo 1 — Instalar o CDP Edge na pasta do projeto
-
-```bash
-# Dentro da pasta do projeto do cliente:
-cd meu-projeto-cliente
-
-# Opção A — clonar o CDP Edge como subpasta
-git clone https://github.com/ricardosoli777/CDP-Edge-Premium cdp-edge
-
-# Opção B — copiar manualmente
-# Copiar a pasta CDP-Edge inteira e renomear para cdp-edge/
-```
-
----
-
-## Passo 2 — Criar o CLAUDE.md na raiz do projeto
-
-Copiar o template de ativação:
-
-```bash
-cp cdp-edge/templates/install/CLAUDE.md ./CLAUDE.md
-```
-
-Editar o `CLAUDE.md` e substituir `[NOME DO PROJETO]` pelo nome real do projeto.
-
-**Por que isso funciona:**
-O Claude Code lê o `CLAUDE.md` da raiz do diretório aberto automaticamente. Quando encontra a instrução de leitura do `master-orchestrator.md`, ativa o sistema imediatamente na abertura da sessão.
-
----
-
-## Passo 3 — Abrir o projeto no Claude Code
-
-```bash
-# Na pasta do projeto (não dentro do cdp-edge):
-claude .
-```
-
-O Claude Code vai:
-1. Ler o `CLAUDE.md` da raiz
-2. Encontrar a instrução de ativação do CDP Edge
-3. Carregar o `master-orchestrator.md`
-4. Exibir a mensagem de boas-vindas automaticamente
-
----
-
-## Para VS Code com extensão Claude
-
-O mesmo mecanismo funciona. O `CLAUDE.md` é lido pela extensão Claude Code no VS Code quando você abre a pasta do projeto.
-
-```bash
-code meu-projeto-cliente/
-```
-
----
-
-## Para Cursor IDE
-
-Criar adicionalmente um `.cursorrules` na raiz:
-
-```bash
-cp cdp-edge/templates/install/CLAUDE.md .cursorrules
-```
-
-O Cursor lê `.cursorrules` automaticamente e aplica as instruções ao agente AI.
-
----
-
-## Para qualquer outra IDE com AI
-
-Qualquer IDE que suporte arquivos de instrução (`.aidioms`, `system-prompt.md`, etc.) pode usar o mesmo conteúdo do `CLAUDE.md` adaptado para o formato da IDE.
-
----
-
-## Verificar se funcionou
-
-Ao abrir o projeto no Claude Code, você deve ver imediatamente:
-
-```
-👋 Olá! Bem-vindo ao CDP Edge — Quantum Tracking.
-
-Sou o seu Orquestrador de Rastreamento. Vou configurar toda a
-infraestrutura de tracking server-side para o seu projeto...
-```
-
-Se não aparecer automaticamente, digitar:
-
-```
-/cdp
-```
-
-ou simplesmente:
-
-```
-ative o master orchestrator do cdp edge
-```
-
----
-
-## Se o CDP Edge estiver em um caminho diferente
-
-Editar o `CLAUDE.md` na raiz e ajustar o path:
-
-```markdown
-<!-- Padrão: -->
-Leia o arquivo: `cdp-edge/extracted-skill/tracking-events-generator/agents/master-orchestrator.md`
-
-<!-- Se instalado em outro lugar: -->
-Leia o arquivo: `ferramentas/cdp/extracted-skill/tracking-events-generator/agents/master-orchestrator.md`
-```
-
----
-
-## Estrutura de múltiplos projetos (workspace compartilhado)
-
-Se você trabalha com vários clientes e quer uma instalação única do CDP Edge:
-
-```
-workspace/
-├── cdp-edge/                 ← instalação única compartilhada
-├── cliente-1/
-│   ├── CLAUDE.md             ← aponta para ../cdp-edge/...
-│   └── src/
-├── cliente-2/
-│   ├── CLAUDE.md             ← aponta para ../cdp-edge/...
-│   └── src/
-```
-
-No `CLAUDE.md` de cada cliente, usar path relativo:
-
-```markdown
-Leia o arquivo: `../cdp-edge/extracted-skill/tracking-events-generator/agents/master-orchestrator.md`
-```

package/docs/quick-start.md

@@ -1,185 +0,0 @@
-# CDP Edge — Quick Start
-> Do zero ao primeiro evento em produção.
-
----
-
-## Pré-requisitos
-
-| Ferramenta | Instalar |
-|---|---|
-| Node.js 18+ | nodejs.org |
-| Wrangler CLI | `npm install -g wrangler` |
-| Conta Cloudflare | cloudflare.com (plano gratuito suficiente) |
-| Conta Meta (Pixel + token CAPI) | business.facebook.com |
-
----
-
-## 1. Autenticar no Cloudflare
-
-```bash
-wrangler login
-```
-
----
-
-## 2. Criar o banco D1
-
-```bash
-wrangler d1 create cdp-edge-db
-```
-
-Copie o `database_id` retornado e cole no `wrangler.toml`:
-
-```toml
-[[d1_databases]]
-binding      = "DB"
-database_name = "cdp-edge-db"
-database_id  = "COLE_O_ID_AQUI"
-```
-
----
-
-## 3. Aplicar o schema
-
-```bash
-cd server-edge-tracker
-
-wrangler d1 execute cdp-edge-db --file=schema.sql --remote
-wrangler d1 execute cdp-edge-db --file=migrate-v2.sql --remote
-wrangler d1 execute cdp-edge-db --file=migrate-v3.sql --remote
-wrangler d1 execute cdp-edge-db --file=migrate-v4.sql --remote
-wrangler d1 execute cdp-edge-db --file=migrate-v5.sql --remote
-wrangler d1 execute cdp-edge-db --file=migrate-v6.sql --remote
-```
-
----
-
-## 4. Configurar secrets
-
-```bash
-wrangler secret put META_ACCESS_TOKEN
-wrangler secret put GA4_API_SECRET
-wrangler secret put TIKTOK_ACCESS_TOKEN
-```
-
-Para WhatsApp CTWA (opcional):
-```bash
-wrangler secret put WA_WEBHOOK_VERIFY_TOKEN
-wrangler secret put WHATSAPP_TOKEN
-wrangler secret put WHATSAPP_PHONE_NUMBER_ID
-```
-
----
-
-## 5. Atualizar variáveis públicas no wrangler.toml
-
-```toml
-[vars]
-META_PIXEL_ID      = "SEU_PIXEL_ID"
-GA4_MEASUREMENT_ID = "G-XXXXXXXXXX"
-TIKTOK_PIXEL_ID    = "CXXXXXXXXXXXXXXX"
-SITE_DOMAIN        = "seudominio.com.br"
-```
-
----
-
-## 6. Deploy
-
-```bash
-wrangler deploy
-```
-
-O Worker ficará disponível em:
-```
-https://server-edge-tracker.SEU-USUARIO.workers.dev
-```
-
----
-
-## 7. Testar o Worker
-
-```bash
-# Health check
-curl https://server-edge-tracker.SEU-USUARIO.workers.dev/health
-
-# Evento de teste
-curl -X POST https://server-edge-tracker.SEU-USUARIO.workers.dev/track \
-  -H "Content-Type: application/json" \
-  -d '{
-    "event": "PageView",
-    "url": "https://seudominio.com.br/",
-    "email": "teste@exemplo.com"
-  }'
-```
-
-Resposta esperada: `{"success":true}`
-
----
-
-## 8. Instalar o SDK no site
-
-```html
-<!-- No <head> de todas as páginas -->
-<script>
-  window.CDP_CONFIG = {
-    endpoint: 'https://server-edge-tracker.SEU-USUARIO.workers.dev/track',
-    pixelId: 'SEU_PIXEL_ID'
-  };
-</script>
-<script src="/js/cdpTrack.js" type="module" async></script>
-```
-
-O SDK inicializa automaticamente e dispara `PageView` ao carregar.
-
----
-
-## 9. Verificar no Meta Events Manager
-
-```
-Meta Business Suite
-  → Gerenciador de Eventos
-  → Seu Pixel
-  → Atividade de Teste
-  → Filtrar por "Servidor"
-```
-
-Você deve ver o `PageView` chegando com `action_source: website`.
-
----
-
-## 10. (Opcional) Conectar domínio próprio
-
-Para máxima eficácia (cookie first-party no domínio do cliente):
-
-```
-Cloudflare Dashboard → DNS → Add record
-  Type:   CNAME
-  Name:   track
-  Target: server-edge-tracker.SEU-USUARIO.workers.dev
-  Proxy:  ✅ (nuvem laranja)
-```
-
-Adicionar ao `wrangler.toml`:
-```toml
-[[routes]]
-pattern   = "track.seudominio.com.br/*"
-zone_name = "seudominio.com.br"
-```
-
-```bash
-wrangler deploy
-```
-
-Ver detalhes: `agents/domain-setup-agent.md`
-
----
-
-## Próximos passos
-
-| O que fazer | Onde está |
-|---|---|
-| Configurar WhatsApp CTWA | `agents/whatsapp-ctwa-setup-agent.md` |
-| Ativar R2 audit log | `agents/r2-setup-agent.md` |
-| Configurar gateways de pagamento | `agents/webhook-agent.md` |
-| Ver todos os eventos disponíveis | `docs/events-reference.md` |
-| Ver API do SDK browser | `docs/sdk-reference.md` |