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

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

@@ -0,0 +1,350 @@
+<!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 Heartbeat (Etapa 17)</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;
+      }
+      .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: 220px;
+        max-height: 360px;
+        overflow: auto;
+        margin-top: 1rem;
+        border-radius: 8px;
+        padding: 1rem;
+        font-family: ui-monospace, monospace;
+        font-size: 12px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Behavior Heartbeat Runtime</h1>
+    <p class="hint">
+      Etapa 17 — dados fictícios. Heartbeat mede presença e emite
+      <code>BEHAVIOR_HEARTBEAT</code> via Dispatcher (não chama Transport
+      diretamente). Intervalo de demo: 3s · <code>fireImmediately: true</code>.
+    </p>
+
+    <div class="actions">
+      <button type="button" id="btn-init">Init</button>
+      <button type="button" id="btn-snapshot">Get 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-hidden">Simulate Hidden</button>
+      <button type="button" id="btn-visible">Simulate Visible</button>
+      <button type="button" id="btn-destroy">Destroy</button>
+      <button type="button" id="btn-reinit">Reinit</button>
+      <button type="button" id="btn-clear">Clear log</button>
+    </div>
+
+    <div class="panels">
+      <div class="panel">
+        <h3>Heartbeat counters</h3>
+        <pre id="counters">—</pre>
+      </div>
+      <div class="panel">
+        <h3>Debug snapshot.behavior.heartbeat</h3>
+        <pre id="hb-snap">—</pre>
+      </div>
+    </div>
+
+    <div id="logs"></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 hbSnapEl = document.getElementById('hb-snap');
+
+        let pixel = null;
+        let unsubscribe = null;
+        const counts = {
+          BEHAVIOR_HEARTBEAT: 0,
+          USER_IDLE: 0,
+          USER_ACTIVE: 0,
+          VISIBILITY_CHANGE: 0,
+          other: 0,
+        };
+
+        function log(msg, data) {
+          const line = document.createElement('div');
+          const ts = new Date().toISOString().slice(11, 23);
+          line.textContent =
+            '[' +
+            ts +
+            '] ' +
+            msg +
+            (data !== undefined ? ' ' + JSON.stringify(data) : '');
+          logsEl.prepend(line);
+        }
+
+        function refreshCounters() {
+          countersEl.textContent = JSON.stringify(counts, null, 2);
+        }
+
+        function refreshHbSnap() {
+          if (!pixel) {
+            hbSnapEl.textContent = 'null (no pixel)';
+            return;
+          }
+          const snap = pixel.getDebugSnapshot();
+          hbSnapEl.textContent = JSON.stringify(
+            snap.behavior && snap.behavior.heartbeat,
+            null,
+            2
+          );
+        }
+
+        function buildConfig() {
+          return {
+            ...DEFAULT_PIXEL_CONFIG,
+            identity: {
+              ...DEFAULT_PIXEL_CONFIG.identity,
+              pixelId: 'heartbeat-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: {
+                  enabled: true,
+                  intervalMs: 15000,
+                  hiddenIntervalMs: 60000,
+                  emitWhenHidden: true,
+                  emitWhenIdle: true,
+                  includeSnapshot: true,
+                  fireImmediately: true,
+                },
+                trackers: {
+                  ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers,
+                  idle: {
+                    enabled: true,
+                    thresholdMs: 4000,
+                  },
+                  visibility: { enabled: true },
+                  scroll: {
+                    ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers.scroll,
+                    enabled: false,
+                  },
+                  click: {
+                    ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers.click,
+                    enabled: false,
+                  },
+                  exitIntent: {
+                    ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers
+                      .exitIntent,
+                    enabled: false,
+                  },
+                },
+              },
+            },
+          };
+        }
+
+        function wireDispatcher() {
+          if (!pixel || unsubscribe) return;
+          const services = pixel.getDebugServices && pixel.getDebugServices();
+          if (!services || !services.dispatcher) {
+            log('dispatcher unavailable — use snapshot counters');
+            return;
+          }
+          unsubscribe = services.dispatcher.subscribe(function (event) {
+            const t = event && event.type;
+            if (Object.prototype.hasOwnProperty.call(counts, t)) {
+              counts[t] += 1;
+            } else {
+              counts.other += 1;
+            }
+            log('event', {
+              type: t,
+              sequence: event.sequence,
+              active: event.active,
+              idle: event.idle,
+              visible: event.visible,
+              elapsedMs: event.elapsedMs,
+            });
+            refreshCounters();
+            refreshHbSnap();
+          });
+        }
+
+        async function doInit() {
+          if (pixel && pixel.isInitialized()) {
+            log('already initialized');
+            return;
+          }
+          pixel = new Pixel(buildConfig());
+          await pixel.init();
+          wireDispatcher();
+          log('init ok');
+          refreshHbSnap();
+          refreshCounters();
+        }
+
+        async function doDestroy() {
+          if (!pixel) return;
+          if (unsubscribe) {
+            unsubscribe();
+            unsubscribe = null;
+          }
+          await pixel.destroy();
+          log('destroy ok');
+          refreshHbSnap();
+        }
+
+        document.getElementById('btn-init').onclick = function () {
+          doInit();
+        };
+        document.getElementById('btn-snapshot').onclick = function () {
+          if (!pixel) {
+            log('no pixel');
+            return;
+          }
+          const snap = pixel.getDebugSnapshot();
+          log('snapshot', snap.behavior);
+          refreshHbSnap();
+        };
+        document.getElementById('btn-activity').onclick = function () {
+          window.dispatchEvent(new Event('mousemove'));
+          log('simulate activity (mousemove)');
+        };
+        document.getElementById('btn-idle').onclick = function () {
+          log(
+            'simulate idle — aguarde thresholdMs do IdleTracker (4s sem atividade)'
+          );
+        };
+        document.getElementById('btn-hidden').onclick = function () {
+          try {
+            Object.defineProperty(document, 'visibilityState', {
+              configurable: true,
+              get: function () {
+                return 'hidden';
+              },
+            });
+            document.dispatchEvent(new Event('visibilitychange'));
+            log('simulate hidden');
+          } catch (err) {
+            log('simulate hidden failed', String(err));
+          }
+          refreshHbSnap();
+        };
+        document.getElementById('btn-visible').onclick = function () {
+          try {
+            Object.defineProperty(document, 'visibilityState', {
+              configurable: true,
+              get: function () {
+                return 'visible';
+              },
+            });
+            document.dispatchEvent(new Event('visibilitychange'));
+            log('simulate visible');
+          } catch (err) {
+            log('simulate visible failed', String(err));
+          }
+          refreshHbSnap();
+        };
+        document.getElementById('btn-destroy').onclick = function () {
+          doDestroy();
+        };
+        document.getElementById('btn-reinit').onclick = async function () {
+          await doDestroy();
+          await doInit();
+          log('reinit ok');
+        };
+        document.getElementById('btn-clear').onclick = function () {
+          logsEl.textContent = '';
+        };
+
+        refreshCounters();
+        log('ready — clique Init (requer dist/v2/global.global.js)');
+      })();
+    </script>
+  </body>
+</html>