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

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

@@ -0,0 +1,397 @@
+<!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 Viewport (Etapa 18)</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        margin: 0;
+        padding: 2rem;
+        max-width: 960px;
+      }
+      .hint {
+        background: #ecfdf5;
+        border: 1px solid #a7f3d0;
+        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;
+      }
+      .panels {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+      }
+      @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: 220px;
+        max-height: 360px;
+        overflow: auto;
+        margin-top: 1rem;
+        border-radius: 8px;
+        padding: 1rem;
+        font-family: ui-monospace, monospace;
+        font-size: 12px;
+      }
+      .section {
+        min-height: 70vh;
+        padding: 2rem;
+        margin: 1rem 0;
+        border-radius: 12px;
+      }
+      #hero {
+        background: #dbeafe;
+      }
+      #pricing {
+        background: #fef3c7;
+      }
+      #checkout-cta {
+        background: #dcfce7;
+      }
+      .card {
+        display: inline-block;
+        width: 160px;
+        height: 100px;
+        margin: 0.5rem;
+        background: #e0e7ff;
+        border-radius: 8px;
+        text-align: center;
+        line-height: 100px;
+      }
+      #dynamic-zone {
+        min-height: 40vh;
+        padding: 1rem;
+        border: 2px dashed #a1a1aa;
+        border-radius: 8px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Behavior Viewport Runtime</h1>
+    <p class="hint">
+      Etapa 18 — dados fictícios. Emite <code>VIEWPORT_ENTER</code> /
+      <code>VIEWPORT_EXIT</code> via Dispatcher. Playground dedicado;
+      example-behavior.html mantém viewport desligado.
+    </p>
+
+    <div class="actions">
+      <button type="button" id="btn-init">Init</button>
+      <button type="button" id="btn-snapshot">Get Debug Snapshot</button>
+      <button type="button" id="btn-add">Add Dynamic Target</button>
+      <button type="button" id="btn-remove">Remove Dynamic Target</button>
+      <button type="button" id="btn-scroll">Scroll to Pricing</button>
+      <button type="button" id="btn-destroy">Destroy</button>
+      <button type="button" id="btn-reinit">Reinit</button>
+      <button type="button" id="btn-clear">Clear Logs</button>
+    </div>
+
+    <div class="panels">
+      <div class="panel">
+        <h3>Event Counts</h3>
+        <pre id="counts">—</pre>
+      </div>
+      <div class="panel">
+        <h3>behavior.viewport</h3>
+        <pre id="vp-snap">—</pre>
+      </div>
+    </div>
+
+    <div id="logs"></div>
+
+    <section id="hero" class="section" data-vp="hero">
+      <h2>Hero</h2>
+      <p>Alvo: hero</p>
+    </section>
+    <section id="pricing" class="section" data-vp="pricing">
+      <h2>Pricing</h2>
+      <p>Alvo: pricing</p>
+      <div class="card" data-vp-card>Card A</div>
+      <div class="card" data-vp-card>Card B</div>
+      <div class="card" data-vp-card>Card C</div>
+    </section>
+    <section id="checkout-cta" class="section" data-vp="checkout">
+      <h2>Checkout CTA</h2>
+      <button type="button">Comprar (fictício)</button>
+    </section>
+    <div id="dynamic-zone">
+      <p>Zona dinâmica</p>
+    </div>
+
+    <script src="../../../dist/v2/global.global.js"></script>
+    <script>
+      (function () {
+        const { Pixel, DEFAULT_PIXEL_CONFIG } = window.PixelV2;
+        const logsEl = document.getElementById('logs');
+        const countsEl = document.getElementById('counts');
+        const snapEl = document.getElementById('vp-snap');
+        let pixel = null;
+        let unsubscribe = null;
+        let dynCounter = 0;
+        const counts = { VIEWPORT_ENTER: 0, VIEWPORT_EXIT: 0, other: 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 refresh() {
+          countsEl.textContent = JSON.stringify(counts, null, 2);
+          if (!pixel) {
+            snapEl.textContent = 'null';
+            return;
+          }
+          const snap = pixel.getDebugSnapshot();
+          snapEl.textContent = JSON.stringify(
+            {
+              configuredTrackers: snap.behavior.configuredTrackers,
+              configuredEngines: snap.behavior.configuredEngines,
+              viewport: snap.behavior.viewport,
+            },
+            null,
+            2
+          );
+        }
+
+        function buildConfig() {
+          return {
+            ...DEFAULT_PIXEL_CONFIG,
+            identity: {
+              ...DEFAULT_PIXEL_CONFIG.identity,
+              pixelId: 'viewport-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: false,
+                },
+                trackers: {
+                  ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers,
+                  scroll: {
+                    ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers.scroll,
+                    enabled: false,
+                  },
+                  click: {
+                    ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers.click,
+                    enabled: false,
+                  },
+                  idle: {
+                    ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers.idle,
+                    enabled: false,
+                  },
+                  visibility: { enabled: false },
+                  exitIntent: { enabled: false },
+                  viewport: {
+                    enabled: true,
+                    rootMargin: '0px',
+                    observeMutations: true,
+                    mutationDebounceMs: 100,
+                    maxObservedElements: 500,
+                    targets: [
+                      {
+                        key: 'hero',
+                        selector: '#hero',
+                        enterThreshold: 0.4,
+                        exitThreshold: 0.1,
+                        minVisibleMs: 0,
+                        trackExit: true,
+                        once: false,
+                      },
+                      {
+                        key: 'pricing',
+                        selector: '#pricing',
+                        enterThreshold: 0.5,
+                        exitThreshold: 0.2,
+                        minVisibleMs: 200,
+                        trackExit: true,
+                      },
+                      {
+                        key: 'checkout',
+                        selector: '#checkout-cta',
+                        enterThreshold: 0.5,
+                        trackExit: true,
+                        once: true,
+                      },
+                      {
+                        key: 'cards',
+                        selector: '[data-vp-card]',
+                        enterThreshold: 0.5,
+                        exitThreshold: 0,
+                        once: false,
+                      },
+                      {
+                        key: 'dynamic',
+                        selector: '[data-vp-dynamic]',
+                        enterThreshold: 0.3,
+                        trackExit: true,
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+          };
+        }
+
+        function wire() {
+          if (!pixel || unsubscribe) return;
+          const services = pixel.getDebugServices && pixel.getDebugServices();
+          if (!services || !services.dispatcher) return;
+          unsubscribe = services.dispatcher.subscribe(function (event) {
+            const t = event.type;
+            if (t === 'VIEWPORT_ENTER' || t === 'VIEWPORT_EXIT') {
+              counts[t] += 1;
+              log(t, {
+                key: event.key,
+                elementId: event.elementId,
+                ratio: event.visibilityRatio,
+                reason: event.reason,
+              });
+            } else {
+              counts.other += 1;
+            }
+            refresh();
+          });
+        }
+
+        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;
+          if (unsubscribe) {
+            unsubscribe();
+            unsubscribe = null;
+          }
+          await pixel.destroy();
+          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-scroll').onclick = function () {
+          document.getElementById('pricing').scrollIntoView({
+            behavior: 'smooth',
+          });
+        };
+        document.getElementById('btn-add').onclick = function () {
+          dynCounter += 1;
+          const el = document.createElement('div');
+          el.className = 'section';
+          el.setAttribute('data-vp-dynamic', '1');
+          el.style.background = '#fce7f3';
+          el.style.minHeight = '50vh';
+          el.textContent = 'Dynamic target #' + dynCounter;
+          document.getElementById('dynamic-zone').appendChild(el);
+          log('added dynamic', { n: dynCounter });
+        };
+        document.getElementById('btn-remove').onclick = function () {
+          const zone = document.getElementById('dynamic-zone');
+          const last = zone.querySelector('[data-vp-dynamic]:last-of-type');
+          if (last) {
+            last.remove();
+            log('removed dynamic');
+          }
+        };
+        document.getElementById('btn-clear').onclick = function () {
+          logsEl.textContent = '';
+        };
+
+        refresh();
+        log('ready — clique Init (requer dist/v2/global.global.js)');
+      })();
+    </script>
+  </body>
+</html>

package/dist/examples/html-script/{example-behavior.html → behavior/example-behavior.html}

@@ -116,8 +116,8 @@
     <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.
+      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>
 
@@ -150,7 +150,7 @@
 
     <div id="scroll-spacer">Role a página para gerar eventos SCROLL</div>
 
-    <script src="../../dist/v2/global.global.js"></script>
+    <script src="../../../dist/v2/global.global.js"></script>
     <script>
       const { Pixel, DEFAULT_PIXEL_CONFIG } = window.PixelV2;
 
@@ -284,7 +284,7 @@
           'dispatcher listeners: ' +
           listenerCount +
           '\n' +
-          'trackers: scroll, click, visibility, idle, exitIntent';
+          'trackers: scroll, click, visibility, idle, exitIntent · viewport → example-behavior-viewport.html';
       }
 
       function behaviorConfig() {
@@ -313,6 +313,20 @@
             },
             behavior: {
               enabled: true,
+              heartbeat: {
+                enabled: false,
+                intervalMs: 15000,
+                hiddenIntervalMs: 60000,
+                emitWhenHidden: false,
+                emitWhenIdle: true,
+                includeSnapshot: true,
+                fireImmediately: false,
+              },
+              engagement: {
+                enabled: false,
+                weights: { scroll: 0.3, click: 0.3, time: 0.25 },
+                thresholds: { low: 30, medium: 70 },
+              },
               trackers: {
                 scroll: {
                   enabled: true,
@@ -335,19 +349,11 @@
                 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 },
+                  targets: [],
+                  rootMargin: '0px',
+                  observeMutations: true,
+                  mutationDebounceMs: 100,
+                  maxObservedElements: 500,
                 },
               },
             },