@beworke/pixel 0.1.0-rc.1

package/dist/examples/html-script/lead/example-lead-trigger-attribute.html

@@ -0,0 +1,594 @@
+<!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 — LEAD por atributo data-track</title>
+    <style>
+      :root {
+        --bg: #f8fafc;
+        --card: #fff;
+        --border: #e2e8f0;
+        --text: #0f172a;
+        --muted: #64748b;
+        --accent: #0f766e;
+        --accent-soft: #ccfbf1;
+        --warn: #9a3412;
+        --warn-soft: #ffedd5;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        font-family: 'Segoe UI', system-ui, sans-serif;
+        background:
+          radial-gradient(circle at top left, #ecfeff 0%, transparent 40%),
+          linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+        color: var(--text);
+        line-height: 1.45;
+      }
+      .wrap {
+        max-width: 960px;
+        margin: 0 auto;
+        padding: 1.5rem;
+      }
+      h1 {
+        font-size: 1.55rem;
+        margin: 0 0 0.35rem;
+        letter-spacing: -0.02em;
+      }
+      h2 {
+        font-size: 1.05rem;
+        margin: 0 0 0.75rem;
+      }
+      .sub {
+        color: var(--muted);
+        margin: 0 0 1rem;
+        font-size: 0.92rem;
+      }
+      .nav {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.4rem;
+        margin-bottom: 1rem;
+      }
+      .nav a {
+        text-decoration: none;
+        border: 1px solid var(--border);
+        background: #fff;
+        color: var(--text);
+        border-radius: 999px;
+        padding: 0.3rem 0.75rem;
+        font-size: 0.82rem;
+      }
+      .nav a.active {
+        background: var(--accent);
+        border-color: var(--accent);
+        color: #fff;
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: 1.15fr 0.85fr;
+        gap: 1rem;
+      }
+      @media (max-width: 860px) {
+        .grid {
+          grid-template-columns: 1fr;
+        }
+      }
+      .card {
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 1rem;
+        margin-bottom: 1rem;
+        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
+      }
+      .hint {
+        background: var(--accent-soft);
+        border: 1px solid #99f6e4;
+        border-radius: 10px;
+        padding: 0.85rem 1rem;
+        font-size: 0.9rem;
+        margin-bottom: 1rem;
+      }
+      .hint.warn {
+        background: var(--warn-soft);
+        border-color: #fdba74;
+        color: var(--warn);
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        margin-top: 0.75rem;
+      }
+      button {
+        appearance: none;
+        border: 1px solid var(--border);
+        background: #fff;
+        color: var(--text);
+        border-radius: 8px;
+        padding: 0.5rem 0.85rem;
+        cursor: pointer;
+        font: inherit;
+      }
+      button.primary {
+        background: var(--accent);
+        border-color: var(--accent);
+        color: #fff;
+      }
+      button.danger {
+        background: #7f1d1d;
+        border-color: #7f1d1d;
+        color: #fff;
+      }
+      label {
+        display: block;
+        font-size: 0.8rem;
+        color: var(--muted);
+        margin-bottom: 0.25rem;
+      }
+      input {
+        width: 100%;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        padding: 0.55rem 0.7rem;
+        font: inherit;
+        background: #fff;
+      }
+      .row {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0.75rem;
+      }
+      @media (max-width: 560px) {
+        .row {
+          grid-template-columns: 1fr;
+        }
+      }
+      .status,
+      pre {
+        background: #0f172a;
+        color: #e2e8f0;
+        border-radius: 8px;
+        padding: 0.75rem;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        font-size: 0.78rem;
+        white-space: pre-wrap;
+        word-break: break-word;
+        max-height: 280px;
+        overflow: auto;
+      }
+      .pill {
+        display: inline-block;
+        border-radius: 999px;
+        padding: 0.15rem 0.55rem;
+        font-size: 0.72rem;
+        background: #e2e8f0;
+        color: #334155;
+        margin-left: 0.35rem;
+      }
+      .pill.ok {
+        background: #bbf7d0;
+        color: #166534;
+      }
+      .checklist {
+        margin: 0;
+        padding-left: 1.1rem;
+        font-size: 0.88rem;
+        color: var(--muted);
+      }
+      .checklist li {
+        margin: 0.35rem 0;
+      }
+      .ctx {
+        border-left: 3px solid var(--accent);
+        padding-left: 0.75rem;
+        margin-bottom: 0.85rem;
+        color: var(--muted);
+        font-size: 0.88rem;
+      }
+      code {
+        font-size: 0.85em;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="wrap">
+      <h1>LEAD — selector · data-track</h1>
+      <p class="sub">
+        Cenário isolado de trigger para validação do Pixel v2.
+        <span class="pill" id="init-pill">offline</span>
+      </p>
+      <div class="nav">
+        <a href="example-lead-trigger-click.html" class=""
+          >1. Click · Newsletter</a
+        >
+        <a href="example-lead-trigger-auto.html" class="">2. Auto · Checkout</a>
+        <a href="example-lead-trigger-attribute.html" class="active"
+          >3. Atributo · data-track</a
+        >
+      </div>
+      <div class="hint">
+        <strong>Contexto:</strong> cenário padrão por atributo — sem
+        <code>selectorForm</code>. O
+        <code>ConfiguredSelectorDetector</code> escuta clique em
+        <code>[data-track="lead"]</code> e extrai email/phone do
+        <code>&lt;form&gt;</code> mais próximo via
+        <code>CustomerExtractor</code>.
+      </div>
+
+      <div class="card">
+        <h2>Lifecycle</h2>
+        <div class="actions">
+          <button id="btn-reinit" class="primary" type="button">
+            Reinitialize
+          </button>
+          <button id="btn-destroy" class="danger" type="button">Destroy</button>
+          <button id="btn-clear" type="button">Clear logs</button>
+        </div>
+        <div class="status" id="runtime-status">Aguardando init...</div>
+      </div>
+
+      <div class="grid">
+        <div>
+          <div class="card">
+            <h2>
+              Lead por atributo <span class="pill">data-track="lead"</span>
+            </h2>
+            <div class="ctx">
+              Botão marcado com atributo padrão. Sem condição de formulário no
+              detector — o clique no seletor dispara; o payload vem do form pai.
+            </div>
+            <form id="attr-lead-form">
+              <div class="row">
+                <div>
+                  <label for="attr-email">Email</label>
+                  <input
+                    id="attr-email"
+                    name="email"
+                    type="email"
+                    placeholder="lead@test.com"
+                  />
+                </div>
+                <div>
+                  <label for="attr-phone">Phone</label>
+                  <input
+                    id="attr-phone"
+                    name="phone"
+                    type="tel"
+                    placeholder="11977776666"
+                  />
+                </div>
+              </div>
+              <div class="actions">
+                <button type="button" class="primary" data-track="lead">
+                  Enviar interesse
+                </button>
+                <button type="button" id="btn-empty-click">
+                  Clique sem data-track
+                </button>
+              </div>
+            </form>
+            <p class="sub">
+              Clique em <em>Enviar interesse</em> com pelo menos email
+              <em>ou</em> phone (extractor). Clique no botão sem atributo → não
+              dispara.
+            </p>
+          </div>
+          <div class="card">
+            <h2>Checklist</h2>
+            <ul class="checklist">
+              <li>[ ] Clique sem <code>data-track</code> → não dispara</li>
+              <li>
+                [ ] Clique com form vazio → não dispara (sem email/phone/name)
+              </li>
+              <li>
+                [ ] Email preenchido + clique no botão → <code>LEAD</code>
+              </li>
+              <li>[ ] Detector ativo: <code>ConfiguredSelector(LEAD)</code></li>
+              <li>[ ] Payload traz dados extraídos do form</li>
+            </ul>
+          </div>
+        </div>
+        <div>
+          <div class="card">
+            <h2>Event counts</h2>
+            <div class="status" id="event-counts">Nenhum evento ainda</div>
+          </div>
+          <div class="card">
+            <h2>Active detectors</h2>
+            <div class="status" id="detectors">—</div>
+          </div>
+          <div class="card">
+            <h2>Last event JSON</h2>
+            <pre id="last-event">null</pre>
+          </div>
+          <div class="card">
+            <h2>Event log</h2>
+            <pre id="logs">Aguardando eventos...</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <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 els = {
+        logs: document.getElementById('logs'),
+        last: document.getElementById('last-event'),
+        counts: document.getElementById('event-counts'),
+        detectors: document.getElementById('detectors'),
+        runtime: document.getElementById('runtime-status'),
+        pill: document.getElementById('init-pill'),
+      };
+
+      let pixel = null;
+      let unsubscribe = null;
+      let initCount = 0;
+      let destroyCount = 0;
+      const counts = {};
+
+      function leadDetectorConfig() {
+        return {
+          enabled: true,
+          selector: ['[data-track="lead"]'],
+          selectorType: 'css',
+        };
+      }
+
+      function buildConfig() {
+        const base = DEFAULT_PIXEL_CONFIG;
+        return {
+          ...base,
+          app: {
+            ...base.app,
+            source: 'custom',
+            environment: 'development',
+            debug: true,
+          },
+          transport: {
+            ...DEFAULT_PIXEL_CONFIG.transport,
+            apiEndpoint: API_ENDPOINT,
+            timeoutMs: 10000,
+          },
+          identity: { ...base.identity, pixelId: PIXEL_ID },
+          modules: {
+            ...base.modules,
+            core: {
+              ...base.modules.core,
+              enabled: false,
+              pageView: {
+                ...base.modules.core.pageView,
+                enabled: false,
+                trackInitialPageView: false,
+                spa: false,
+              },
+            },
+            behavior: { ...base.modules.behavior, enabled: false },
+            privacy: { ...base.modules.privacy, 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: 4,
+                baseDelayMs: 500,
+                maxDelayMs: 4000,
+                multiplier: 2,
+              },
+              batch: {
+                enabled: true,
+                batchSize: 10,
+                flushIntervalMs: 2000,
+                maxWaitMs: 5000,
+              },
+              timeout: { enabled: true, timeoutMs: 10000 },
+              offline: { enabled: true },
+              flush: {
+                enabled: true,
+                flushIntervalMs: 2000,
+                flushOnDestroy: true,
+                prepareUnloadHooks: true,
+              },
+            },
+            integrations: { ...base.modules.integrations, enabled: false },
+            conversion: {
+              enabled: true,
+              commerce: {
+                currency: 'BRL',
+                catalog: { products: [] },
+                checkout: {
+                  mode: 'single_product',
+                  selectedItems: [],
+                  calculateValueFrom: 'selected_items',
+                  allowDynamicItems: true,
+                },
+                mappings: {
+                  attributes: {
+                    productId: ['data-product-id'],
+                    productName: ['data-product-name'],
+                    price: ['data-product-price'],
+                    quantity: ['data-quantity'],
+                    currency: ['data-currency'],
+                  },
+                  fields: {
+                    email: ['email', 'customerEmail'],
+                    phone: ['phone', 'telefone', 'customerPhone'],
+                    productId: ['productId'],
+                    productName: ['productName'],
+                    price: ['price'],
+                    quantity: ['quantity'],
+                    currency: ['currency'],
+                  },
+                },
+              },
+              manual: {
+                pageView: { enabled: false },
+                purchase: { enabled: false },
+                lead: { enabled: true },
+                addToCart: { enabled: false },
+                removeFromCart: { enabled: false },
+                initiateCheckout: { enabled: false },
+                addPaymentInfo: { enabled: false },
+                search: { enabled: false },
+                viewContent: { enabled: false },
+              },
+              auto: {
+                enabled: true,
+                detectors: {
+                  lead: leadDetectorConfig(),
+                  purchase: { enabled: false },
+                  addToCart: { enabled: false },
+                  removeFromCart: { enabled: false },
+                  initiateCheckout: { enabled: false },
+                  addPaymentInfo: { enabled: false },
+                  search: { enabled: false },
+                  viewContent: { enabled: false },
+                },
+              },
+              rules: {
+                enabled: false,
+                selectors: [],
+                texts: [],
+                urlPatterns: [],
+                checkout: { enabled: false },
+                card: { enabled: false },
+              },
+            },
+          },
+        };
+      }
+
+      function appendLog(message) {
+        const line = '[' + new Date().toISOString() + '] ' + message;
+        const prev = els.logs.textContent;
+        els.logs.textContent =
+          prev === 'Aguardando eventos...' ? line : line + '\n' + prev;
+      }
+
+      function renderCounts() {
+        const lines = Object.keys(counts)
+          .sort()
+          .map(function (type) {
+            return type + ': ' + counts[type];
+          });
+        els.counts.textContent =
+          lines.length > 0 ? lines.join('\n') : 'Nenhum evento ainda';
+      }
+
+      function renderDebug() {
+        const detectors =
+          pixel && pixel.getDebugActiveDetectors
+            ? pixel.getDebugActiveDetectors()
+            : [];
+        els.detectors.textContent =
+          detectors.length > 0 ? detectors.join('\n') : 'Nenhum detector ativo';
+        els.runtime.textContent =
+          'initialized: ' +
+          (pixel ? pixel.isInitialized() : false) +
+          '\ninit count: ' +
+          initCount +
+          '\ndestroy count: ' +
+          destroyCount +
+          '\npixelId: ' +
+          PIXEL_ID +
+          '\nscenario: selector · data-track';
+        els.pill.textContent =
+          pixel && pixel.isInitialized() ? 'ready' : 'offline';
+        els.pill.className =
+          'pill' + (pixel && pixel.isInitialized() ? ' ok' : '');
+      }
+
+      function onEvent(event) {
+        counts[event.type] = (counts[event.type] || 0) + 1;
+        renderCounts();
+        els.last.textContent = JSON.stringify(event, null, 2);
+        appendLog(event.type + ' ' + JSON.stringify(event.data || {}));
+        renderDebug();
+      }
+
+      async function boot() {
+        if (unsubscribe) {
+          unsubscribe();
+          unsubscribe = null;
+        }
+        if (pixel) {
+          await pixel.destroy();
+          destroyCount += 1;
+          pixel = null;
+        }
+        pixel = new Pixel(buildConfig());
+        await pixel.init();
+        initCount += 1;
+        const services = pixel.getDebugServices();
+        if (services && services.dispatcher) {
+          unsubscribe = services.dispatcher.subscribe(onEvent);
+        }
+        appendLog('Pixel initialized — selector · data-track');
+        renderDebug();
+      }
+
+      async function destroyPixel() {
+        if (unsubscribe) {
+          unsubscribe();
+          unsubscribe = null;
+        }
+        if (pixel) {
+          await pixel.destroy();
+          destroyCount += 1;
+          pixel = null;
+        }
+        appendLog('Pixel destroyed');
+        renderDebug();
+      }
+
+      document.getElementById('btn-reinit').onclick = function () {
+        boot();
+      };
+      document.getElementById('btn-destroy').onclick = function () {
+        destroyPixel();
+      };
+      document.getElementById('btn-clear').onclick = function () {
+        els.logs.textContent = 'Aguardando eventos...';
+        els.last.textContent = 'null';
+        Object.keys(counts).forEach(function (k) {
+          delete counts[k];
+        });
+        renderCounts();
+      };
+
+      document.getElementById('btn-empty-click').onclick = function () {
+        appendLog('(playground) clique sem data-track — esperado: nenhum LEAD');
+      };
+
+      boot();
+    </script>
+  </body>
+</html>