@beworke/pixel 0.1.0-rc.1

package/dist/examples/html-script/example-basic.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 Playground</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        margin: 2rem;
+        max-width: 820px;
+      }
+
+      h2 {
+        font-size: 1rem;
+        margin: 1.5rem 0 0.5rem;
+      }
+
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        margin-bottom: 1rem;
+      }
+
+      button {
+        padding: 0.5rem 1rem;
+        cursor: pointer;
+      }
+
+      #state {
+        background: #f4f4f5;
+        border: 1px solid #e4e4e7;
+        border-radius: 8px;
+        padding: 1rem;
+        margin-bottom: 1rem;
+        white-space: pre-wrap;
+        font-family: ui-monospace, monospace;
+        font-size: 13px;
+      }
+
+      #logs {
+        background: #18181b;
+        color: #fafafa;
+        border-radius: 8px;
+        padding: 1rem;
+        min-height: 200px;
+        overflow: auto;
+        font-family: ui-monospace, monospace;
+        font-size: 12px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Pixel v2 Playground</h1>
+
+    <h2>Lifecycle</h2>
+    <div class="actions">
+      <button id="reinit" type="button">Reinitialize Pixel</button>
+      <button id="destroy" type="button">Destroy Pixel</button>
+    </div>
+
+    <h2>SPA Navigation</h2>
+    <div class="actions">
+      <button id="pushState" type="button">PushState</button>
+      <button id="replaceState" type="button">ReplaceState</button>
+      <button id="back" type="button">Back</button>
+      <button id="forward" type="button">Forward</button>
+      <button id="hash" type="button">Hash Change</button>
+    </div>
+
+    <h2>Session</h2>
+    <div class="actions">
+      <button id="expireSession" type="button">Simulate Session Expiry</button>
+      <button id="trackPageView" type="button">Manual PageView</button>
+    </div>
+
+    <div id="state">Aguardando inicialização...</div>
+    <pre id="logs"></pre>
+
+    <script src="../../dist/v2/global.global.js"></script>
+    <script>
+      const { Pixel, DEFAULT_PIXEL_CONFIG, resolveStorageAdapterName } =
+        window.PixelV2;
+
+      const logsEl = document.getElementById('logs');
+      const stateEl = document.getElementById('state');
+
+      let pixel = null;
+      let pixelConfig = null;
+      let unsubscribe = null;
+      let lastEvent = '-';
+      let navCounter = 0;
+
+      function appendLog(message) {
+        const line = '[' + new Date().toISOString() + '] ' + message;
+        logsEl.textContent = line + '\n' + logsEl.textContent;
+      }
+
+      function formatTimestamp(value) {
+        if (!value) return '-';
+        return new Date(value).toISOString();
+      }
+
+      function renderState() {
+        const services = pixel ? pixel.getDebugServices() : null;
+        const initialized = pixel ? pixel.isInitialized() : false;
+        const metadata = services ? services.browserMetadata.getMetadata() : {};
+
+        if (!services || !pixelConfig) {
+          stateEl.textContent =
+            'Runtime:\n' +
+            (initialized ? 'Initialized' : 'Not initialized') +
+            '\n\nCurrent URL:\n' +
+            (metadata.url || '-') +
+            '\n\nCurrent Path:\n' +
+            (metadata.path || '-');
+          return;
+        }
+
+        const persistence = pixelConfig.storage.persistence || {};
+        const listenerCount = services.dispatcher.getListenerCount();
+        const ttlMs = pixelConfig.modules.core.session.ttlMs;
+        const expired = services.session.isExpired(ttlMs);
+        const lastActivity = services.session.getLastActivityAt();
+
+        stateEl.textContent =
+          'Runtime:\n' +
+          (initialized ? 'Initialized' : 'Not initialized') +
+          '\n\nCurrent URL:\n' +
+          (metadata.url || '-') +
+          '\n\nCurrent Path:\n' +
+          (metadata.path || '-') +
+          '\n\nHostname:\n' +
+          (metadata.hostname || '-') +
+          '\n\nLanguage:\n' +
+          (metadata.language || '-') +
+          '\n\nTimezone:\n' +
+          (metadata.timezone || '-') +
+          '\n\nStorage:\n' +
+          resolveStorageAdapterName(persistence.visitor) +
+          '\n\nVisitor Persistence:\n' +
+          (persistence.visitor || 'memory') +
+          '\n\nSession Persistence:\n' +
+          (persistence.session || 'memory') +
+          '\n\nFingerprint Persistence:\n' +
+          (persistence.attribution || 'memory') +
+          '\n\nVisitor:\n' +
+          (services.visitor.getVisitorId() || '-') +
+          '\n\nSession:\n' +
+          (services.session.getSessionId() || '-') +
+          '\n\nSession Status:\n' +
+          (expired ? 'Expired' : 'Active') +
+          '\n\nLast Activity:\n' +
+          formatTimestamp(lastActivity) +
+          '\n\nFingerprint:\n' +
+          (services.fingerprint.getFingerprint() || '-') +
+          '\n\nDispatcher:\n' +
+          listenerCount +
+          ' listener' +
+          (listenerCount === 1 ? '' : 's') +
+          '\n\nLast Event:\n' +
+          lastEvent;
+      }
+
+      function syncLastEvent(services) {
+        const dispatched = services.dispatcher.getLastEvent();
+        if (dispatched) {
+          lastEvent = JSON.stringify(dispatched, null, 2);
+        }
+      }
+
+      function subscribeDispatcher(services) {
+        if (unsubscribe) {
+          unsubscribe();
+          unsubscribe = null;
+        }
+
+        unsubscribe = services.dispatcher.subscribe(function (event) {
+          lastEvent = JSON.stringify(event, null, 2);
+          appendLog('Dispatcher: ' + event.type);
+          renderState();
+        });
+
+        syncLastEvent(services);
+      }
+
+      async function initPixel() {
+        if (pixel) {
+          await pixel.destroy();
+          pixel = null;
+        }
+
+        pixelConfig = {
+          ...DEFAULT_PIXEL_CONFIG,
+          app: {
+            ...DEFAULT_PIXEL_CONFIG.app,
+            debug: true,
+          },
+          identity: {
+            ...DEFAULT_PIXEL_CONFIG.identity,
+            pixelId: 'playground-pixel',
+          },
+          storage: {
+            ...DEFAULT_PIXEL_CONFIG.storage,
+            persistence: {
+              visitor: 'localStorage',
+              session: 'sessionStorage',
+              attribution: 'localStorage',
+            },
+          },
+          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: true,
+                dedupeMs: 2000,
+              },
+              session: {
+                ...DEFAULT_PIXEL_CONFIG.modules.core.session,
+                enabled: true,
+                ttlMs: 10800000,
+                renewOnActivity: true,
+              },
+            },
+          },
+        };
+
+        pixel = new Pixel(pixelConfig);
+        await pixel.init();
+
+        const services = pixel.getDebugServices();
+        if (services) {
+          subscribeDispatcher(services);
+        }
+
+        appendLog('Pixel initialized');
+        renderState();
+      }
+
+      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();
+          pixel = null;
+
+          if (unsubscribe) {
+            unsubscribe();
+            unsubscribe = null;
+          }
+
+          lastEvent = '-';
+          appendLog('Pixel destroyed');
+          renderState();
+        });
+
+      document
+        .getElementById('pushState')
+        .addEventListener('click', function () {
+          navCounter += 1;
+          const path = '/checkout/step-' + navCounter;
+          history.pushState({}, '', path);
+          appendLog('Navigation: pushState -> ' + path);
+          renderState();
+        });
+
+      document
+        .getElementById('replaceState')
+        .addEventListener('click', function () {
+          const path = '/checkout/replaced-' + Date.now();
+          history.replaceState({}, '', path);
+          appendLog('Navigation: replaceState -> ' + path);
+          renderState();
+        });
+
+      document.getElementById('back').addEventListener('click', function () {
+        history.back();
+        appendLog('Navigation: back');
+        setTimeout(renderState, 50);
+      });
+
+      document.getElementById('forward').addEventListener('click', function () {
+        history.forward();
+        appendLog('Navigation: forward');
+        setTimeout(renderState, 50);
+      });
+
+      document.getElementById('hash').addEventListener('click', function () {
+        location.hash = 'section-' + Date.now();
+        appendLog('Navigation: hashchange');
+        renderState();
+      });
+
+      document
+        .getElementById('expireSession')
+        .addEventListener('click', function () {
+          const services = pixel ? pixel.getDebugServices() : null;
+          if (!services) return;
+
+          const data = services.session.getSessionData();
+          if (!data) {
+            appendLog('No session data to expire');
+            return;
+          }
+
+          const expiredData = {
+            ...data,
+            lastActivityAt:
+              Date.now() - pixelConfig.modules.core.session.ttlMs - 1000,
+          };
+
+          const sessionKey =
+            pixelConfig.storage.prefix +
+            ':' +
+            pixelConfig.storage.namespace +
+            ':session';
+
+          sessionStorage.setItem(sessionKey, JSON.stringify(expiredData));
+          appendLog('Session backdated beyond TTL');
+          renderState();
+        });
+
+      document
+        .getElementById('trackPageView')
+        .addEventListener('click', function () {
+          appendLog('Triggering PAGE_VIEW via navigation pushState');
+          navCounter += 1;
+          history.pushState({}, '', '/manual-' + navCounter);
+          renderState();
+        });
+
+      initPixel().catch(function (error) {
+        appendLog('Bootstrap error: ' + String(error));
+      });
+    </script>
+  </body>
+</html>