@beworke/pixel 0.1.0-rc.1 → 0.1.0-rc.6

package/dist/examples/html-script/behavior/example-behavior-engagement.html

@@ -0,0 +1,489 @@
+<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pixel v2 — Behavior Engagement (Etapa 19)</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        margin: 0;
+        padding: 2rem;
+        max-width: 1000px;
+      }
+      .hint {
+        background: #eef2ff;
+        border: 1px solid #c7d2fe;
+        border-radius: 8px;
+        padding: 1rem;
+        margin-bottom: 1rem;
+        font-size: 14px;
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        margin: 1rem 0;
+      }
+      button {
+        padding: 0.5rem 1rem;
+        cursor: pointer;
+      }
+      .score-card {
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+        padding: 1.25rem;
+        border-radius: 12px;
+        background: #f4f4f5;
+        border: 1px solid #e4e4e7;
+        margin-bottom: 1rem;
+      }
+      #score {
+        font-size: 3rem;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+      }
+      #level {
+        font-size: 1.25rem;
+        font-weight: 600;
+        padding: 0.25rem 0.75rem;
+        border-radius: 999px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+      .level-low {
+        background: #fee2e2;
+        color: #991b1b;
+      }
+      .level-medium {
+        background: #fef3c7;
+        color: #92400e;
+      }
+      .level-high {
+        background: #dcfce7;
+        color: #166534;
+      }
+      .panels {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+      }
+      @media (max-width: 760px) {
+        .panels {
+          grid-template-columns: 1fr;
+        }
+      }
+      .panel {
+        font-family: ui-monospace, monospace;
+        font-size: 12px;
+        border-radius: 8px;
+        padding: 1rem;
+        background: #f4f4f5;
+        border: 1px solid #e4e4e7;
+      }
+      .panel h3 {
+        margin: 0 0 0.75rem;
+        font-size: 13px;
+        font-family: system-ui, sans-serif;
+      }
+      .panel pre {
+        margin: 0;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+      #logs {
+        background: #18181b;
+        color: #fafafa;
+        min-height: 200px;
+        max-height: 340px;
+        overflow: auto;
+        margin-top: 1rem;
+        border-radius: 8px;
+        padding: 1rem;
+        font-family: ui-monospace, monospace;
+        font-size: 12px;
+      }
+      .zone {
+        min-height: 80vh;
+        margin: 1rem 0;
+        padding: 2rem;
+        border-radius: 12px;
+        background: #ecfeff;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Behavior Engagement Runtime</h1>
+    <p class="hint">
+      Etapa 19 — score determinístico 0..100 a partir dos sinais internos do
+      <code>BehaviorSignalBus</code>. Emite <code>ENGAGEMENT_UPDATE</code> e
+      <code>ENGAGEMENT_SUMMARY</code> via Dispatcher. Dados fictícios.
+      <br /><br />
+      <strong>Roteiro de validação manual (Hardening 19.1):</strong>
+      1. Init &rarr; 2. Simulate activity &rarr; 3. Evaluate &rarr; 4. Destroy
+      &rarr; 5. Confirmar <code>ENGAGEMENT_SUMMARY</code> no log e no contador
+      &rarr; 6. Reinit &rarr; 7. Repetir. O summary da geração anterior deve
+      aparecer e o novo listener não deve duplicar.
+    </p>
+
+    <div class="actions">
+      <button type="button" id="btn-init">Init</button>
+      <button type="button" id="btn-destroy">Destroy</button>
+      <button type="button" id="btn-reinit">Reinit</button>
+      <button type="button" id="btn-snapshot">Snapshot</button>
+      <button type="button" id="btn-activity">Simulate activity</button>
+      <button type="button" id="btn-idle">Simulate idle</button>
+      <button type="button" id="btn-scroll">Scroll</button>
+      <button type="button" id="btn-viewport">Add viewport target</button>
+      <button type="button" id="btn-evaluate">Evaluate now</button>
+      <button type="button" id="btn-clear">Clear</button>
+    </div>
+
+    <div class="score-card">
+      <div id="score">0</div>
+      <div id="level" class="level-low">low</div>
+      <div>
+        <div>peak: <span id="peak">0</span></div>
+        <div>avg: <span id="avg">0</span></div>
+        <div>updates: <span id="updates">0</span></div>
+      </div>
+    </div>
+
+    <div class="panels">
+      <div class="panel">
+        <h3>Components / Signal counts</h3>
+        <pre id="counters">—</pre>
+      </div>
+      <div class="panel">
+        <h3>behavior.engagement (diagnostics)</h3>
+        <pre id="diag">—</pre>
+      </div>
+    </div>
+
+    <div id="logs"></div>
+
+    <section id="hero" class="zone" data-vp="hero">
+      <h2>Hero</h2>
+      <p>Role a página para acionar scroll / viewport.</p>
+    </section>
+    <section id="cta" class="zone" style="background: #fef9c3" data-vp="cta">
+      <h2>CTA</h2>
+      <button type="button">Clique fictício</button>
+    </section>
+    <div id="dynamic-zone"></div>
+
+    <script src="../../../dist/v2/global.global.js"></script>
+    <script>
+      (function () {
+        const { Pixel, DEFAULT_PIXEL_CONFIG } = window.PixelV2;
+        const logsEl = document.getElementById('logs');
+        const countersEl = document.getElementById('counters');
+        const diagEl = document.getElementById('diag');
+        const scoreEl = document.getElementById('score');
+        const levelEl = document.getElementById('level');
+        const peakEl = document.getElementById('peak');
+        const avgEl = document.getElementById('avg');
+        const updatesEl = document.getElementById('updates');
+
+        let pixel = null;
+        let unsubscribe = null;
+        let dynCounter = 0;
+        let lastEngagementSnapshot = null;
+        let lastSummary = null;
+        const counts = { ENGAGEMENT_UPDATE: 0, ENGAGEMENT_SUMMARY: 0 };
+
+        function log(msg, data) {
+          const line = document.createElement('div');
+          line.textContent =
+            '[' +
+            new Date().toISOString().slice(11, 23) +
+            '] ' +
+            msg +
+            (data !== undefined ? ' ' + JSON.stringify(data) : '');
+          logsEl.prepend(line);
+        }
+
+        function captureSnapshot() {
+          if (!pixel || !pixel.isInitialized || !pixel.isInitialized()) return null;
+          try {
+            const snap = pixel.getDebugSnapshot();
+            const e = snap && snap.behavior && snap.behavior.engagement;
+            if (!e) return null;
+            lastEngagementSnapshot = {
+              engagement: e,
+              health: snap.health ? snap.health.status : 'unknown',
+            };
+          } catch (err) {
+            // runtime pode estar indisponível após destroy — guard silencioso.
+          }
+          return lastEngagementSnapshot;
+        }
+
+        function renderFrom(state, destroyed) {
+          if (!state) {
+            diagEl.textContent = destroyed
+              ? 'runtime destroyed — sem snapshot anterior'
+              : 'null';
+            return;
+          }
+          const e = state.engagement;
+          scoreEl.textContent = String(e.score);
+          levelEl.textContent = e.level;
+          levelEl.className = 'level-' + e.level;
+          peakEl.textContent = String(e.peakScore);
+          avgEl.textContent = String(e.averageScore);
+          updatesEl.textContent = String(e.emittedUpdateCount);
+          countersEl.textContent = JSON.stringify(
+            {
+              eventCounts: counts,
+              signalCounts: e.signalCounts,
+              lastSummary: lastSummary,
+            },
+            null,
+            2
+          );
+          diagEl.textContent = JSON.stringify(
+            {
+              runtime: destroyed ? 'destroyed' : 'active',
+              enabled: e.enabled,
+              running: e.running,
+              evaluationIntervalMs: e.evaluationIntervalMs,
+              evaluationCount: e.evaluationCount,
+              emittedUpdateCount: e.emittedUpdateCount,
+              emittedSummaryCount: e.emittedSummaryCount,
+              lastDriftMs: e.lastDriftMs,
+              hasError: e.hasError,
+              health: state.health,
+            },
+            null,
+            2
+          );
+        }
+
+        function refresh() {
+          const live = captureSnapshot();
+          if (live) {
+            renderFrom(live, false);
+          } else {
+            // Sem runtime ativo: preserva o último estado conhecido.
+            renderFrom(lastEngagementSnapshot, true);
+          }
+        }
+
+        function buildConfig() {
+          return {
+            ...DEFAULT_PIXEL_CONFIG,
+            identity: {
+              ...DEFAULT_PIXEL_CONFIG.identity,
+              pixelId: 'engagement-demo',
+            },
+            modules: {
+              ...DEFAULT_PIXEL_CONFIG.modules,
+              core: {
+                ...DEFAULT_PIXEL_CONFIG.modules.core,
+                enabled: true,
+                pageView: {
+                  ...DEFAULT_PIXEL_CONFIG.modules.core.pageView,
+                  enabled: false,
+                  trackInitialPageView: false,
+                  spa: false,
+                },
+                session: {
+                  ...DEFAULT_PIXEL_CONFIG.modules.core.session,
+                  enabled: false,
+                },
+              },
+              privacy: {
+                ...DEFAULT_PIXEL_CONFIG.modules.privacy,
+                enabled: false,
+              },
+              conversion: {
+                ...DEFAULT_PIXEL_CONFIG.modules.conversion,
+                enabled: false,
+              },
+              integrations: {
+                ...DEFAULT_PIXEL_CONFIG.modules.integrations,
+                enabled: false,
+              },
+              transport: {
+                ...DEFAULT_PIXEL_CONFIG.modules.transport,
+                enabled: false,
+              },
+              behavior: {
+                ...DEFAULT_PIXEL_CONFIG.modules.behavior,
+                enabled: true,
+                heartbeat: {
+                  ...DEFAULT_PIXEL_CONFIG.modules.behavior.heartbeat,
+                  enabled: true,
+                  intervalMs: 2000,
+                },
+                engagement: {
+                  ...DEFAULT_PIXEL_CONFIG.modules.behavior.engagement,
+                  enabled: true,
+                  evaluationIntervalMs: 2000,
+                  emitOnChange: true,
+                  minScoreDelta: 3,
+                  emitSummaryOnDestroy: true,
+                },
+                trackers: {
+                  ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers,
+                  scroll: {
+                    ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers.scroll,
+                    enabled: true,
+                  },
+                  click: {
+                    ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers.click,
+                    enabled: true,
+                  },
+                  visibility: { enabled: true },
+                  idle: {
+                    ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers.idle,
+                    enabled: true,
+                    thresholdMs: 3000,
+                  },
+                  exitIntent: { enabled: false },
+                  viewport: {
+                    enabled: true,
+                    rootMargin: '0px',
+                    observeMutations: true,
+                    mutationDebounceMs: 100,
+                    maxObservedElements: 500,
+                    targets: [
+                      { key: 'hero', selector: '#hero', enterThreshold: 0.4 },
+                      { key: 'cta', selector: '#cta', enterThreshold: 0.4 },
+                      {
+                        key: 'dynamic',
+                        selector: '[data-vp-dynamic]',
+                        enterThreshold: 0.3,
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+          };
+        }
+
+        function wire() {
+          if (!pixel || unsubscribe) return;
+          const services = pixel.getDebugServices && pixel.getDebugServices();
+          if (!services || !services.dispatcher) return;
+          unsubscribe = services.dispatcher.subscribe(function (event) {
+            if (event.type === 'ENGAGEMENT_UPDATE') {
+              counts.ENGAGEMENT_UPDATE += 1;
+              log('ENGAGEMENT_UPDATE', {
+                score: event.score,
+                delta: event.delta,
+                level: event.level,
+                reason: event.reason,
+              });
+              refresh();
+            } else if (event.type === 'ENGAGEMENT_SUMMARY') {
+              counts.ENGAGEMENT_SUMMARY += 1;
+              lastSummary = {
+                score: event.score,
+                peakScore: event.peakScore,
+                averageScore: event.averageScore,
+                level: event.level,
+              };
+              // Summary chega durante destroy(): captura o snapshot ainda vivo
+              // antes de o runtime ser finalizado, para preservar o painel.
+              captureSnapshot();
+              log('ENGAGEMENT_SUMMARY', lastSummary);
+            }
+          });
+        }
+
+        async function doInit() {
+          if (pixel && pixel.isInitialized()) {
+            log('already initialized');
+            return;
+          }
+          pixel = new Pixel(buildConfig());
+          await pixel.init();
+          wire();
+          log('init ok');
+          refresh();
+        }
+
+        async function doDestroy() {
+          if (!pixel) return;
+
+          // Preserva o estado antes do destroy (o summary é emitido durante ele).
+          captureSnapshot();
+
+          // ORDEM CRÍTICA: destroy() emite ENGAGEMENT_SUMMARY. O listener precisa
+          // continuar ativo durante o destroy; só removemos depois.
+          await pixel.destroy();
+
+          if (unsubscribe) {
+            unsubscribe();
+            unsubscribe = null;
+          }
+
+          pixel = null;
+          log('destroy ok');
+          refresh();
+        }
+
+        document.getElementById('btn-init').onclick = doInit;
+        document.getElementById('btn-destroy').onclick = doDestroy;
+        document.getElementById('btn-reinit').onclick = async function () {
+          await doDestroy();
+          await doInit();
+        };
+        document.getElementById('btn-snapshot').onclick = function () {
+          refresh();
+          log('snapshot refreshed');
+        };
+        document.getElementById('btn-activity').onclick = function () {
+          if (!pixel) return;
+          pixel.debugPublishBehaviorSignal('ACTIVITY', { at: Date.now() });
+          for (let i = 0; i < 3; i += 1) {
+            pixel.debugPublishBehaviorSignal('CLICK', {});
+          }
+          pixel.debugPublishBehaviorSignal('SCROLL', { maxScrollPercent: 100 });
+          pixel.evaluateEngagement();
+          log('simulated activity');
+          refresh();
+        };
+        document.getElementById('btn-idle').onclick = function () {
+          if (!pixel) return;
+          pixel.debugPublishBehaviorSignal('IDLE', { idleSince: Date.now() });
+          pixel.evaluateEngagement();
+          log('simulated idle');
+          refresh();
+        };
+        document.getElementById('btn-scroll').onclick = function () {
+          document.getElementById('cta').scrollIntoView({ behavior: 'smooth' });
+        };
+        document.getElementById('btn-viewport').onclick = function () {
+          dynCounter += 1;
+          const el = document.createElement('div');
+          el.className = 'zone';
+          el.style.background = '#fce7f3';
+          el.setAttribute('data-vp-dynamic', '1');
+          el.textContent = 'Dynamic viewport target #' + dynCounter;
+          document.getElementById('dynamic-zone').appendChild(el);
+          log('added viewport target', { n: dynCounter });
+        };
+        document.getElementById('btn-evaluate').onclick = function () {
+          if (!pixel) return;
+          pixel.evaluateEngagement();
+          log('manual evaluation');
+          refresh();
+        };
+        document.getElementById('btn-clear').onclick = function () {
+          logsEl.textContent = '';
+          counts.ENGAGEMENT_UPDATE = 0;
+          counts.ENGAGEMENT_SUMMARY = 0;
+          refresh();
+        };
+
+        refresh();
+        log('ready — clique Init (requer dist/v2/global.global.js)');
+      })();
+    </script>
+  </body>
+</html>