@beworke/pixel 0.1.0-rc.1

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

@@ -0,0 +1,435 @@
+<!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 Playground</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        margin: 0;
+        padding: 2rem;
+        max-width: 960px;
+      }
+
+      .hint {
+        background: #eff6ff;
+        border: 1px solid #bfdbfe;
+        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;
+      }
+
+      #rage-target {
+        background: #fef3c7;
+        border: 2px dashed #f59e0b;
+        padding: 1rem;
+        margin: 1rem 0;
+        user-select: none;
+      }
+
+      #scroll-spacer {
+        height: 2400px;
+        background: linear-gradient(#f4f4f5, #e4e4e7);
+        margin-top: 2rem;
+        padding: 1rem;
+      }
+
+      .panels {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+        margin: 1rem 0;
+      }
+
+      @media (max-width: 700px) {
+        .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;
+      }
+
+      #logs {
+        background: #18181b;
+        color: #fafafa;
+        min-height: 200px;
+        overflow: auto;
+        margin-top: 1rem;
+        border-radius: 8px;
+        padding: 1rem;
+        font-family: ui-monospace, monospace;
+        font-size: 12px;
+      }
+
+      .exit-zone {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 8px;
+        background: #fecaca;
+        font-size: 11px;
+        text-align: center;
+        line-height: 8px;
+        color: #7f1d1d;
+        z-index: 10;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="exit-zone" title="Mova o mouse para o topo para EXIT_INTENT">
+      exit intent zone
+    </div>
+
+    <h1>Pixel v2 — Behavior Tracking</h1>
+
+    <div class="hint">
+      SCROLL (thresholds + debounce), PAGE_CLICK, RAGE_CLICK (3 cliques / 500ms +
+      cooldown), VISIBILITY_CHANGE, USER_IDLE / USER_ACTIVE (5s), EXIT_INTENT.
+      Abra o console para ver cada evento.
+    </div>
+
+    <div class="actions">
+      <button id="reinit" type="button">Reinitialize</button>
+      <button id="destroy" type="button">Destroy</button>
+      <button id="scroll-bottom" type="button">Scroll to bottom</button>
+    </div>
+
+    <div id="rage-target">
+      Clique 3x rapidamente aqui para gerar <strong>RAGE_CLICK</strong>
+    </div>
+
+    <div class="panels">
+      <div class="panel">
+        <h3>Event Counts</h3>
+        <pre id="event-counts">Nenhum evento ainda</pre>
+      </div>
+      <div class="panel">
+        <h3>Runtime Debug</h3>
+        <pre id="runtime-debug">Aguardando...</pre>
+      </div>
+      <div class="panel" style="grid-column: 1 / -1">
+        <h3>Behavior State</h3>
+        <pre id="behavior-state">Aguardando eventos...</pre>
+      </div>
+    </div>
+
+    <pre id="logs"></pre>
+
+    <div id="scroll-spacer">Role a página para gerar eventos SCROLL</div>
+
+    <script src="../../dist/v2/global.global.js"></script>
+    <script>
+      const { Pixel, DEFAULT_PIXEL_CONFIG } = window.PixelV2;
+
+      const logsEl = document.getElementById('logs');
+      const eventCountsEl = document.getElementById('event-counts');
+      const runtimeDebugEl = document.getElementById('runtime-debug');
+      const behaviorStateEl = document.getElementById('behavior-state');
+
+      let pixel = null;
+      let unsubscribe = null;
+      let initCount = 0;
+      let destroyCount = 0;
+
+      const counts = {};
+      const behaviorState = {
+        scroll: { maxPercent: 0, events: 0, velocity: 0 },
+        click: { clicks: 0, rageClicks: 0 },
+        visibility: { visible: true, hiddenAt: null },
+        idle: { isIdle: false, lastActiveAt: null },
+        exitIntent: { triggered: false },
+      };
+
+      function appendLog(message) {
+        const line = '[' + new Date().toISOString() + '] ' + message;
+        logsEl.textContent = line + '\n' + logsEl.textContent;
+      }
+
+      function bump(type) {
+        counts[type] = (counts[type] || 0) + 1;
+        renderEventCounts();
+      }
+
+      function applyBehaviorState(event) {
+        switch (event.type) {
+          case 'SCROLL':
+            behaviorState.scroll.maxPercent = event.maxScrollPercent || 0;
+            behaviorState.scroll.events = event.scrollEvents || 0;
+            behaviorState.scroll.velocity = event.scrollVelocityAvg || 0;
+            break;
+          case 'PAGE_CLICK':
+            behaviorState.click.clicks = event.clickCount || 0;
+            behaviorState.click.rageClicks = event.rageClickCount || 0;
+            break;
+          case 'RAGE_CLICK':
+            behaviorState.click.rageClicks =
+              (behaviorState.click.rageClicks || 0) + 1;
+            break;
+          case 'VISIBILITY_CHANGE':
+            behaviorState.visibility.visible = event.isVisible;
+            behaviorState.visibility.hiddenAt = event.hiddenAt;
+            break;
+          case 'USER_IDLE':
+            behaviorState.idle.isIdle = true;
+            break;
+          case 'USER_ACTIVE':
+            behaviorState.idle.isIdle = false;
+            behaviorState.idle.lastActiveAt = event.activeAt;
+            break;
+          case 'EXIT_INTENT':
+            behaviorState.exitIntent.triggered = true;
+            break;
+        }
+        renderBehaviorState();
+      }
+
+      function renderEventCounts() {
+        const lines = Object.keys(counts)
+          .sort()
+          .map(function (type) {
+            return type + ': ' + counts[type];
+          });
+        eventCountsEl.textContent =
+          lines.length > 0 ? lines.join('\n') : 'Nenhum evento ainda';
+      }
+
+      function renderBehaviorState() {
+        behaviorStateEl.textContent =
+          'Scroll\n' +
+          '- max %: ' +
+          behaviorState.scroll.maxPercent +
+          '\n' +
+          '- events: ' +
+          behaviorState.scroll.events +
+          '\n' +
+          '- velocity: ' +
+          behaviorState.scroll.velocity.toFixed(2) +
+          '\n\n' +
+          'Click\n' +
+          '- clicks: ' +
+          behaviorState.click.clicks +
+          '\n' +
+          '- rage clicks: ' +
+          behaviorState.click.rageClicks +
+          '\n\n' +
+          'Visibility\n' +
+          '- visible: ' +
+          behaviorState.visibility.visible +
+          '\n' +
+          '- hiddenAt: ' +
+          (behaviorState.visibility.hiddenAt || '-') +
+          '\n\n' +
+          'Idle\n' +
+          '- idle: ' +
+          behaviorState.idle.isIdle +
+          '\n' +
+          '- last active: ' +
+          (behaviorState.idle.lastActiveAt || '-') +
+          '\n\n' +
+          'Exit Intent\n' +
+          '- triggered: ' +
+          behaviorState.exitIntent.triggered;
+      }
+
+      function renderRuntimeDebug() {
+        const services = pixel ? pixel.getDebugServices() : null;
+        const initialized = pixel ? pixel.isInitialized() : false;
+        const listenerCount = services
+          ? services.dispatcher.getListenerCount()
+          : 0;
+
+        runtimeDebugEl.textContent =
+          'initialized: ' +
+          initialized +
+          '\n' +
+          'init count: ' +
+          initCount +
+          '\n' +
+          'destroy count: ' +
+          destroyCount +
+          '\n' +
+          'dispatcher listeners: ' +
+          listenerCount +
+          '\n' +
+          'trackers: scroll, click, visibility, idle, exitIntent';
+      }
+
+      function behaviorConfig() {
+        return {
+          ...DEFAULT_PIXEL_CONFIG,
+          app: { ...DEFAULT_PIXEL_CONFIG.app, debug: true },
+          identity: {
+            ...DEFAULT_PIXEL_CONFIG.identity,
+            pixelId: 'behavior-playground',
+          },
+          modules: {
+            ...DEFAULT_PIXEL_CONFIG.modules,
+            core: {
+              ...DEFAULT_PIXEL_CONFIG.modules.core,
+              enabled: true,
+              pageView: {
+                ...DEFAULT_PIXEL_CONFIG.modules.core.pageView,
+                enabled: true,
+                trackInitialPageView: true,
+                spa: false,
+              },
+              session: {
+                ...DEFAULT_PIXEL_CONFIG.modules.core.session,
+                enabled: true,
+              },
+            },
+            behavior: {
+              enabled: true,
+              trackers: {
+                scroll: {
+                  enabled: true,
+                  thresholds: [25, 50, 75, 100],
+                  debounceMs: 100,
+                },
+                click: {
+                  enabled: true,
+                  rageClick: {
+                    enabled: true,
+                    threshold: 3,
+                    windowMs: 500,
+                  },
+                },
+                idle: {
+                  enabled: true,
+                  thresholdMs: 5000,
+                },
+                visibility: { enabled: true },
+                exitIntent: { enabled: true },
+                viewport: {
+                  enabled: false,
+                  selector: '',
+                  selectorType: 'attribute',
+                  visibilityThreshold: 0.5,
+                },
+                heartbeat: {
+                  enabled: false,
+                  intervalMs: 5000,
+                  hiddenIntervalMs: 30000,
+                },
+                engagement: {
+                  enabled: false,
+                  weights: { scroll: 0.3, click: 0.3, time: 0.25 },
+                  thresholds: { low: 30, medium: 70 },
+                },
+              },
+            },
+          },
+        };
+      }
+
+      async function initPixel() {
+        if (pixel) {
+          await pixel.destroy();
+          destroyCount += 1;
+          pixel = null;
+        }
+
+        if (unsubscribe) {
+          unsubscribe();
+          unsubscribe = null;
+        }
+
+        Object.keys(counts).forEach(function (key) {
+          delete counts[key];
+        });
+        behaviorState.scroll = { maxPercent: 0, events: 0, velocity: 0 };
+        behaviorState.click = { clicks: 0, rageClicks: 0 };
+        behaviorState.visibility = { visible: true, hiddenAt: null };
+        behaviorState.idle = { isIdle: false, lastActiveAt: null };
+        behaviorState.exitIntent = { triggered: false };
+
+        pixel = new Pixel(behaviorConfig());
+        await pixel.init();
+        initCount += 1;
+
+        const services = pixel.getDebugServices();
+        if (services) {
+          unsubscribe = services.dispatcher.subscribe(function (event) {
+            bump(event.type);
+            applyBehaviorState(event);
+            appendLog('Dispatcher: ' + event.type);
+            console.log('[Pixel v2 Behavior]', event.type, event);
+            renderRuntimeDebug();
+          });
+        }
+
+        appendLog('Pixel behavior playground initialized');
+        renderEventCounts();
+        renderBehaviorState();
+        renderRuntimeDebug();
+      }
+
+      document.getElementById('reinit').addEventListener('click', function () {
+        initPixel().catch(function (error) {
+          appendLog('Init error: ' + String(error));
+        });
+      });
+
+      document
+        .getElementById('destroy')
+        .addEventListener('click', async function () {
+          if (!pixel) return;
+          await pixel.destroy();
+          destroyCount += 1;
+          pixel = null;
+          if (unsubscribe) {
+            unsubscribe();
+            unsubscribe = null;
+          }
+          appendLog('Pixel destroyed');
+          renderRuntimeDebug();
+        });
+
+      document
+        .getElementById('scroll-bottom')
+        .addEventListener('click', function () {
+          window.scrollTo({
+            top: document.body.scrollHeight,
+            behavior: 'smooth',
+          });
+        });
+
+      initPixel().catch(function (error) {
+        appendLog('Bootstrap error: ' + String(error));
+      });
+    </script>
+  </body>
+</html>