@beworke/pixel 0.1.0-rc.1

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

@@ -0,0 +1,479 @@
+<!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 — Conversion Playground</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;
+        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;
+      }
+
+      .auto-zone {
+        border: 2px dashed #86efac;
+        padding: 1rem;
+        margin: 1rem 0;
+        border-radius: 8px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Pixel v2 — Conversion Tracking</h1>
+
+    <div class="hint">
+      Manual tracks via API pública + auto detectors (selector, text, url,
+      checkout). Eventos publicados somente no Dispatcher — sem envio à API.
+    </div>
+
+    <div class="actions">
+      <button id="reinit" type="button">Reinitialize</button>
+      <button id="destroy" type="button">Destroy</button>
+    </div>
+
+    <h2>Manual Tracks</h2>
+    <div class="actions">
+      <button id="btn-purchase" type="button">purchase()</button>
+      <button id="btn-lead" type="button">lead()</button>
+      <button id="btn-cart" type="button">addToCart()</button>
+      <button id="btn-remove" type="button">removeFromCart()</button>
+      <button id="btn-checkout" type="button">initiateCheckout()</button>
+      <button id="btn-payment" type="button">addPaymentInfo()</button>
+      <button id="btn-view" type="button">viewContent()</button>
+      <button id="btn-search" type="button">search()</button>
+    </div>
+
+    <div class="auto-zone">
+      <strong>Auto detectors</strong>
+      <div class="actions">
+        <button data-track="purchase" type="button">data-track=purchase</button>
+        <button type="button">Finalizar Compra</button>
+        <button id="btn-url" type="button">Simulate thank-you URL</button>
+      </div>
+    </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">
+        <h3>Dedupe State</h3>
+        <pre id="dedupe-state">Nenhuma chave deduplicada</pre>
+      </div>
+      <div class="panel">
+        <h3>Active Detectors</h3>
+        <pre id="detector-state">Nenhum detector ativo</pre>
+      </div>
+      <div class="panel">
+        <h3>Detector Status</h3>
+        <pre id="detector-status">Aguardando init...</pre>
+      </div>
+      <div class="panel" style="grid-column: 1 / -1">
+        <h3>Conversion State</h3>
+        <pre id="conversion-state">Aguardando eventos...</pre>
+      </div>
+    </div>
+
+    <pre id="logs"></pre>
+
+    <script src="../../dist/v2/global.global.js"></script>
+    <script>
+      const { Pixel, DEFAULT_PIXEL_CONFIG } = window.PixelV2;
+
+      const API_ENDPOINT =
+        'https://micro-service-pixel-production-4826.up.railway.app';
+      const PIXEL_ID = 'pix_7315610';
+
+      const logsEl = document.getElementById('logs');
+      const eventCountsEl = document.getElementById('event-counts');
+      const runtimeDebugEl = document.getElementById('runtime-debug');
+      const conversionStateEl = document.getElementById('conversion-state');
+      const dedupeStateEl = document.getElementById('dedupe-state');
+      const detectorStateEl = document.getElementById('detector-state');
+      const detectorStatusEl = document.getElementById('detector-status');
+
+      let pixel = null;
+      let unsubscribe = null;
+      let initCount = 0;
+      let destroyCount = 0;
+      const counts = {};
+      const lastEvents = {};
+
+      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 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 renderConversionState() {
+        const lines = Object.keys(lastEvents)
+          .sort()
+          .map(function (type) {
+            return type + ':\n' + JSON.stringify(lastEvents[type], null, 2);
+          });
+        conversionStateEl.textContent =
+          lines.length > 0 ? lines.join('\n\n') : 'Aguardando eventos...';
+      }
+
+      function renderDetectorState() {
+        const detectors =
+          pixel && pixel.getDebugActiveDetectors
+            ? pixel.getDebugActiveDetectors()
+            : [];
+        detectorStateEl.textContent =
+          detectors.length > 0
+            ? 'active (' + detectors.length + '):\n' + detectors.join('\n')
+            : 'Nenhum detector ativo';
+        detectorStatusEl.textContent =
+          'engine active: ' +
+          (pixel && pixel.isInitialized ? pixel.isInitialized() : false) +
+          '\nauto.enabled: true\nrules.enabled: true';
+      }
+
+      function renderDedupeState() {
+        const keys =
+          pixel && pixel.getDebugDedupeKeys ? pixel.getDebugDedupeKeys() : [];
+        dedupeStateEl.textContent =
+          keys.length > 0
+            ? 'keys (' + keys.length + '):\n' + keys.join('\n')
+            : 'Nenhuma chave deduplicada';
+      }
+
+      function renderRuntimeDebug() {
+        const services = pixel ? pixel.getDebugServices() : null;
+        runtimeDebugEl.textContent =
+          'initialized: ' +
+          (pixel ? pixel.isInitialized() : false) +
+          '\ninit count: ' +
+          initCount +
+          '\ndestroy count: ' +
+          destroyCount +
+          '\ndispatcher listeners: ' +
+          (services ? services.dispatcher.getListenerCount() : 0);
+      }
+
+      function conversionConfig() {
+        const cfg = {
+          senderMode: 'http',
+          timeoutMs: 10000,
+          maxAttempts: 4,
+          batchSize: 3,
+        };
+        const useHttp = cfg.senderMode === 'http';
+        return {
+          ...DEFAULT_PIXEL_CONFIG,
+          app: { ...DEFAULT_PIXEL_CONFIG.app, debug: true },
+          identity: {
+            ...DEFAULT_PIXEL_CONFIG.identity,
+            pixelId: PIXEL_ID,
+          },
+          transport: {
+            ...DEFAULT_PIXEL_CONFIG.transport,
+            apiEndpoint: API_ENDPOINT,
+            timeoutMs: cfg.timeoutMs,
+          },
+          modules: {
+            ...DEFAULT_PIXEL_CONFIG.modules,
+            core: { ...DEFAULT_PIXEL_CONFIG.modules.core, enabled: false },
+            behavior: {
+              ...DEFAULT_PIXEL_CONFIG.modules.behavior,
+              enabled: false,
+            },
+            conversion: {
+              enabled: true,
+              manual: {
+                pageView: { enabled: false },
+                purchase: { enabled: true },
+                lead: { enabled: true },
+                addToCart: { enabled: true },
+                removeFromCart: { enabled: true },
+                initiateCheckout: { enabled: true },
+                addPaymentInfo: { enabled: true },
+                search: { enabled: true },
+                viewContent: { enabled: true },
+              },
+              auto: {
+                enabled: true,
+                detectors:
+                  DEFAULT_PIXEL_CONFIG.modules.conversion.auto.detectors,
+              },
+              rules: {
+                enabled: true,
+                selectors: ['[data-track]'],
+                texts: [
+                  'Comprar',
+                  'Comprar Agora',
+                  'Finalizar Compra',
+                  'Checkout',
+                ],
+                urlPatterns: [
+                  'thank-you',
+                  'purchase',
+                  'success',
+                  'order',
+                  'checkout',
+                ],
+                checkout: { enabled: true },
+                card: { enabled: false },
+              },
+            },
+            transport: {
+              enabled: true,
+              mockSender: { enabled: false },
+              sender: { mode: 'http' },
+              persistence: { enabled: true },
+              replay: { enabled: true },
+              ordering: { enabled: true },
+              coordination: { enabled: true },
+              circuitBreaker: {
+                enabled: true,
+                failureThreshold: 5,
+                resetTimeoutMs: 30000,
+                halfOpenMaxAttempts: 2,
+              },
+              backpressure: {
+                enabled: true,
+                maxQueueSize: 500,
+                policy: 'drop_oldest',
+                sampleRate: 0.5,
+              },
+              deadLetter: { enabled: true, maxEntries: 200 },
+              compression: { enabled: true, strategy: 'identity' },
+              retry: {
+                enabled: true,
+                maxAttempts: cfg.maxAttempts,
+                baseDelayMs: 500,
+                maxDelayMs: 4000,
+                multiplier: 2,
+              },
+              batch: {
+                enabled: true,
+                batchSize: cfg.batchSize,
+                flushIntervalMs: 2000,
+                maxWaitMs: 5000,
+              },
+              timeout: { enabled: true, timeoutMs: cfg.timeoutMs },
+              offline: { enabled: true },
+              flush: {
+                enabled: true,
+                flushIntervalMs: 2000,
+                flushOnDestroy: true,
+                prepareUnloadHooks: true,
+              },
+            },
+          },
+        };
+      }
+
+      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];
+        });
+        Object.keys(lastEvents).forEach(function (key) {
+          delete lastEvents[key];
+        });
+
+        pixel = new Pixel(conversionConfig());
+        await pixel.init();
+        initCount += 1;
+
+        const services = pixel.getDebugServices();
+        if (services) {
+          unsubscribe = services.dispatcher.subscribe(function (event) {
+            bump(event.type);
+            lastEvents[event.type] = event;
+            appendLog('Dispatcher: ' + event.type);
+            console.log('[Pixel v2 Conversion]', event.type, event);
+            renderConversionState();
+            renderRuntimeDebug();
+            renderDedupeState();
+            renderDetectorState();
+          });
+        }
+
+        appendLog('Conversion playground initialized');
+        renderEventCounts();
+        renderConversionState();
+        renderRuntimeDebug();
+        renderDedupeState();
+        renderDetectorState();
+      }
+
+      document.getElementById('reinit').addEventListener('click', function () {
+        initPixel().catch(function (e) {
+          appendLog('Init error: ' + String(e));
+        });
+      });
+
+      document
+        .getElementById('destroy')
+        .addEventListener('click', async function () {
+          if (!pixel) return;
+          await pixel.destroy();
+          destroyCount += 1;
+          pixel = null;
+          if (unsubscribe) unsubscribe();
+          appendLog('Pixel destroyed');
+          renderRuntimeDebug();
+          renderDedupeState();
+          renderDetectorState();
+        });
+
+      document
+        .getElementById('btn-purchase')
+        .addEventListener('click', function () {
+          pixel?.purchase({
+            value: 199.9,
+            currency: 'BRL',
+            orderId: 'ORD-' + Date.now(),
+          });
+        });
+      document
+        .getElementById('btn-lead')
+        .addEventListener('click', function () {
+          pixel?.lead({ email: 'lead@example.com', name: 'Lead Test' });
+        });
+      document
+        .getElementById('btn-cart')
+        .addEventListener('click', function () {
+          pixel?.addToCart({
+            productId: 'sku-1',
+            productName: 'Produto',
+            quantity: 1,
+            price: 49,
+          });
+        });
+      document
+        .getElementById('btn-remove')
+        .addEventListener('click', function () {
+          pixel?.removeFromCart({ productId: 'sku-1', quantity: 1 });
+        });
+      document
+        .getElementById('btn-checkout')
+        .addEventListener('click', function () {
+          pixel?.initiateCheckout({ value: 149, currency: 'BRL' });
+        });
+      document
+        .getElementById('btn-payment')
+        .addEventListener('click', function () {
+          pixel?.addPaymentInfo({ paymentMethod: 'CREDIT_CARD' });
+        });
+      document
+        .getElementById('btn-view')
+        .addEventListener('click', function () {
+          pixel?.viewContent({ contentId: 'page-home', contentType: 'page' });
+        });
+      document
+        .getElementById('btn-search')
+        .addEventListener('click', function () {
+          pixel?.search({ query: 'tenis corrida' });
+        });
+      document.getElementById('btn-url').addEventListener('click', function () {
+        history.pushState({}, '', '/thank-you?order=123');
+        appendLog('URL changed to /thank-you');
+      });
+
+      initPixel().catch(function (e) {
+        appendLog('Bootstrap error: ' + String(e));
+      });
+    </script>
+  </body>
+</html>