@beworke/pixel 0.1.0-rc.13 → 0.1.0-rc.15

package/dist/events/index.cjs.js

@@ -1,3 +1,3 @@
 /* Pixel v2 — SDK de analytics e conversão */
-"use strict";var c=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var h=(r,e)=>{for(var n in e)c(r,n,{get:e[n],enumerable:!0})},v=(r,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of g(e))!E.call(r,s)&&s!==n&&c(r,s,{get:()=>e[s],enumerable:!(a=y(e,s))||a.enumerable});return r};var C=r=>v(c({},"__esModule",{value:!0}),r);var S={};h(S,{BaseEventBuilder:()=>o});module.exports=C(S);function i(r){return r?Object.values(r).some(e=>typeof e=="string"&&e.trim().length>0):!1}var o=class{constructor(e,n,a,s){this.metadataService=e,this.attribution=n??null,this.urlContext=a??null,this.customerIdentity=s??null}build(e){let n=this.metadataService.getMetadata(),a=this.attribution?.getSnapshot(),s=a!==void 0&&Object.keys(a).some(f=>{let u=a[f];return u!=null&&u!==""}),t=this.urlContext?.isEnabled()?this.urlContext.getSnapshot():null,d=t!==null&&Object.keys(t.queryParams).length>0,l=t!==null&&(t.urlContext.managed&&Object.keys(t.urlContext.managed).length>0||t.urlContext.forwarded&&Object.keys(t.urlContext.forwarded).length>0||t.urlContext.source&&Object.keys(t.urlContext.source).length>0),p=this.customerIdentity?.getSnapshot()??null,m=e.customer??p;return{...e,timestamp:Date.now(),path:n.path,url:n.url,hostname:n.hostname,language:n.language,timezone:n.timezone,...s?{identifiers:a}:{},...d?{queryParams:{...t.queryParams}}:{},...l?{urlContext:{...t.urlContext.managed?{managed:{...t.urlContext.managed}}:{},...t.urlContext.forwarded?{forwarded:{...t.urlContext.forwarded}}:{},...t.urlContext.source?{source:{...t.urlContext.source}}:{}}}:{},...i(m)?{customer:{...m}}:{}}}};0&&(module.exports={BaseEventBuilder});
+"use strict";var u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var h=(r,e)=>{for(var n in e)u(r,n,{get:e[n],enumerable:!0})},_=(r,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of g(e))!y.call(r,a)&&a!==n&&u(r,a,{get:()=>e[a],enumerable:!(s=E(e,a))||s.enumerable});return r};var x=r=>_(u({},"__esModule",{value:!0}),r);var S={};h(S,{BaseEventBuilder:()=>i});module.exports=x(S);function o(r){return r?Object.values(r).some(e=>typeof e=="string"&&e.trim().length>0):!1}var i=class{constructor(e,n,s,a){this.metadataService=e,this.attribution=n??null,this.urlContext=s??null,this.customerIdentity=a??null}build(e){let n=this.metadataService.getMetadata(),s=this.attribution?.getSnapshot(),a=s!==void 0&&Object.keys(s).some(f=>{let d=s[f];return d!=null&&d!==""}),t=this.urlContext?.isEnabled()?this.urlContext.getSnapshot():null,l=t!==null&&Object.keys(t.queryParams).length>0,m=t!==null&&(t.urlContext.managed&&Object.keys(t.urlContext.managed).length>0||t.urlContext.forwarded&&Object.keys(t.urlContext.forwarded).length>0||t.urlContext.source&&Object.keys(t.urlContext.source).length>0),p=this.customerIdentity?.getSnapshot()??null,c=e.customer??p;return{...e,timestamp:Date.now(),path:n.path,url:n.url,hostname:n.hostname,language:n.language,timezone:n.timezone,...a?{identifiers:s}:{},...l?{queryParams:{...t.queryParams}}:{},...m?{urlContext:{...t.urlContext.managed?{managed:{...t.urlContext.managed}}:{},...t.urlContext.forwarded?{forwarded:{...t.urlContext.forwarded}}:{},...t.urlContext.source?{source:{...t.urlContext.source}}:{}}}:{},...o(c)?{customer:{...c}}:{}}}};0&&(module.exports={BaseEventBuilder});
 //# sourceMappingURL=index.cjs.js.map

package/dist/events/index.esm.js

@@ -1,3 +1,3 @@
 /* Pixel v2 — SDK de analytics e conversão */
-function a(o){return o?Object.values(o).some(t=>typeof t=="string"&&t.trim().length>0):!1}var s=class{constructor(t,n,r,i){this.metadataService=t,this.attribution=n??null,this.urlContext=r??null,this.customerIdentity=i??null}build(t){let n=this.metadataService.getMetadata(),r=this.attribution?.getSnapshot(),i=r!==void 0&&Object.keys(r).some(p=>{let u=r[p];return u!=null&&u!==""}),e=this.urlContext?.isEnabled()?this.urlContext.getSnapshot():null,m=e!==null&&Object.keys(e.queryParams).length>0,d=e!==null&&(e.urlContext.managed&&Object.keys(e.urlContext.managed).length>0||e.urlContext.forwarded&&Object.keys(e.urlContext.forwarded).length>0||e.urlContext.source&&Object.keys(e.urlContext.source).length>0),l=this.customerIdentity?.getSnapshot()??null,c=t.customer??l;return{...t,timestamp:Date.now(),path:n.path,url:n.url,hostname:n.hostname,language:n.language,timezone:n.timezone,...i?{identifiers:r}:{},...m?{queryParams:{...e.queryParams}}:{},...d?{urlContext:{...e.urlContext.managed?{managed:{...e.urlContext.managed}}:{},...e.urlContext.forwarded?{forwarded:{...e.urlContext.forwarded}}:{},...e.urlContext.source?{source:{...e.urlContext.source}}:{}}}:{},...a(c)?{customer:{...c}}:{}}}};export{s as BaseEventBuilder};
+function s(i){return i?Object.values(i).some(t=>typeof t=="string"&&t.trim().length>0):!1}var a=class{constructor(t,n,r,o){this.metadataService=t,this.attribution=n??null,this.urlContext=r??null,this.customerIdentity=o??null}build(t){let n=this.metadataService.getMetadata(),r=this.attribution?.getSnapshot(),o=r!==void 0&&Object.keys(r).some(p=>{let d=r[p];return d!=null&&d!==""}),e=this.urlContext?.isEnabled()?this.urlContext.getSnapshot():null,c=e!==null&&Object.keys(e.queryParams).length>0,l=e!==null&&(e.urlContext.managed&&Object.keys(e.urlContext.managed).length>0||e.urlContext.forwarded&&Object.keys(e.urlContext.forwarded).length>0||e.urlContext.source&&Object.keys(e.urlContext.source).length>0),m=this.customerIdentity?.getSnapshot()??null,u=t.customer??m;return{...t,timestamp:Date.now(),path:n.path,url:n.url,hostname:n.hostname,language:n.language,timezone:n.timezone,...o?{identifiers:r}:{},...c?{queryParams:{...e.queryParams}}:{},...l?{urlContext:{...e.urlContext.managed?{managed:{...e.urlContext.managed}}:{},...e.urlContext.forwarded?{forwarded:{...e.urlContext.forwarded}}:{},...e.urlContext.source?{source:{...e.urlContext.source}}:{}}}:{},...s(u)?{customer:{...u}}:{}}}};export{a as BaseEventBuilder};
 //# sourceMappingURL=index.esm.js.map

package/dist/examples/html-script/README.md

@@ -21,6 +21,17 @@ Os HTMLs referenciam o IIFE em:
 
 Após o build, abra os `.html` no navegador (servidor estático local recomendado).
 
+## Customer
+
+Snapshot automático do form em todos os eventos. Exemplos isolados:
+
+```text
+customer/example-customer-defaults.html
+customer/example-customer-extra-fields.html
+customer/example-customer-css.html
+customer/example-customer-events.html
+```
+
 ## AutoTrack — source `link`
 
 Nova source do Core: observa o **destino** de um `<a href>` (não a URL da página).

package/dist/examples/html-script/customer/README.md

@@ -0,0 +1,29 @@
+# Pixel — Customer (cenários isolados)
+
+Cada HTML valida **um** comportamento. Abra um de cada vez.
+
+O observer lê o form no `input`/`change` e grava o snapshot. O próximo evento
+leva `customer` no payload (e em `data.customer`).
+
+| # | Arquivo | O que valida |
+|---|---------|--------------|
+| 1 | [`example-customer-defaults.html`](./example-customer-defaults.html) | Names/ids padrão (`email`, `phone`, `first_name`, `cep`…) |
+| 2 | [`example-customer-extra-fields.html`](./example-customer-extra-fields.html) | `commerce.customer.fields` com name/id extras (defaults continuam) |
+| 3 | [`example-customer-css.html`](./example-customer-css.html) | Extras por CSS (`#contato-email`, `.campo-telefone`, `[data-cep]`) |
+| 4 | [`example-customer-events.html`](./example-customer-events.html) | PAGE_VIEW vazio → depois ATC / pay / HEARTBEAT com customer |
+
+## Campos do snapshot
+
+`email`, `phone`, `name`, `firstName`, `lastName`, `address`, `address2`, `city`, `state`, `postalCode`, `country`.
+
+CEP no payload é **`postalCode`**. No DOM ainda aceita `cep`, `zip`, `zipcode`, etc.
+
+## Como abrir
+
+1. Na raiz: `pnpm --filter @beworke/pixel build`
+2. Abra o HTML (live server na raiz do monorepo)
+3. Script: `../../../packages/pixel/dist/browser/pixel.global.js`
+
+## Ordem sugerida
+
+`defaults → extra name/id → CSS → eventos`

package/dist/examples/html-script/customer/example-customer-css.html

@@ -0,0 +1,383 @@
+<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pixel — Customer CSS selectors</title>
+    <style>
+:root {
+  --bg: #f8fafc; --card: #fff; --border: #e2e8f0; --text: #0f172a;
+  --muted: #64748b; --accent: #0f766e; --accent-soft: #ccfbf1;
+}
+* { 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: 980px; margin: 0 auto; padding: 1.5rem; }
+h1 { font-size: 1.5rem; 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.7rem; font-size: 0.78rem;
+}
+.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,.03);
+}
+.hint {
+  background: var(--accent-soft); border: 1px solid #99f6e4; border-radius: 10px;
+  padding: 0.85rem 1rem; font-size: 0.9rem; margin-bottom: 1rem;
+}
+.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: 260px; 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>Customer — CSS <span class="pill" id="init-pill">offline</span></h1>
+      <p class="sub">
+        Inputs sem name padrão. O extrator acha por seletor CSS extra.
+      </p>
+      <div class="nav">
+        <a href="example-customer-defaults.html">1. Defaults</a>
+        <a href="example-customer-extra-fields.html">2. Extra name/id</a>
+        <a href="example-customer-css.html" class="active">3. CSS</a>
+        <a href="example-customer-events.html">4. Eventos</a>
+      </div>
+      <div class="hint">
+        <code>email: '#contato-email'</code>,
+        <code>phone: '.campo-telefone'</code>,
+        <code>name: '#nome-cliente'</code>,
+        <code>postalCode: '[data-cep]'</code>.
+        Os <code>name</code> do form são opacos (<code>x_mail</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-fill" type="button">Preencher demo</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>Form só com CSS</h2>
+            <div class="ctx">
+              ATC quando <code>#contato-email</code> e
+              <code>#campo-telefone</code> estão preenchidos.
+            </div>
+            <form id="customer-form">
+              <div class="row">
+                <div>
+                  <label for="contato-email">#contato-email</label>
+                  <input id="contato-email" name="x_mail" type="text" />
+                </div>
+                <div>
+                  <label for="campo-telefone">.campo-telefone</label>
+                  <input id="campo-telefone" class="campo-telefone" name="x_phone" type="text" />
+                </div>
+              </div>
+              <div class="row">
+                <div>
+                  <label for="nome-cliente">#nome-cliente</label>
+                  <input id="nome-cliente" name="x_name" type="text" />
+                </div>
+                <div>
+                  <label for="cep-attr">[data-cep]</label>
+                  <input id="cep-attr" name="x_cep" type="text" data-cep />
+                </div>
+              </div>
+            </form>
+          </div>
+          <div class="card">
+            <h2>Checklist</h2>
+            <ul class="checklist">
+              <li>[ ] Sem extras no config → estes names não viram customer</li>
+              <li>[ ] Com CSS extras → email/phone/name/postalCode no snapshot</li>
+              <li>[ ] Email + phone via CSS → <code>ADD_TO_CART</code> com customer</li>
+            </ul>
+          </div>
+        </div>
+        <div>
+          <div class="card">
+            <h2>Customer snapshot</h2>
+            <pre id="customer-snap">null</pre>
+          </div>
+          <div class="card">
+            <h2>Event counts</h2>
+            <div class="status" id="event-counts">Nenhum evento ainda</div>
+          </div>
+          <div class="card">
+            <h2>Last event.customer</h2>
+            <pre id="last-customer">null</pre>
+          </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="../../../browser/pixel.global.js"></script>
+    <script>
+      const PIXEL_ID = 'pix_7315610';
+      const API_ENDPOINT =
+        'https://micro-service-pixel-production-4826.up.railway.app';
+
+      const els = {
+        logs: document.getElementById('logs'),
+        last: document.getElementById('last-event'),
+        lastCustomer: document.getElementById('last-customer'),
+        customer: document.getElementById('customer-snap'),
+        counts: document.getElementById('event-counts'),
+        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 disabledDetector() {
+        return { enabled: false, sources: [] };
+      }
+
+      function buildSettings() {
+        return {
+          identity: { pixelId: PIXEL_ID },
+          app: { source: 'custom', environment: 'development', debug: true },
+          transport: {
+            enabled: true,
+            sender: { mode: 'internal', baseUrl: API_ENDPOINT },
+          },
+          commerce: {
+            enabled: true,
+            currency: 'BRL',
+            catalog: {
+              products: [
+                { id: 'main_offer', name: 'Oferta Principal', type: 'main', price: 197, currency: 'BRL', quantity: 1 },
+              ],
+            },
+            cart: {
+              mode: 'single_product',
+              initialItems: [{ productId: 'main_offer', quantity: 1 }],
+            },
+            customer: {
+              fields: {
+                email: '#contato-email',
+                phone: '.campo-telefone',
+                name: '#nome-cliente',
+                postalCode: '[data-cep]',
+              },
+            },
+          },
+          modules: {
+            core: {
+              pageView: { enabled: false, trackInitialPageView: false, spa: false },
+            },
+            behavior: { enabled: false },
+            conversion: {
+              enabled: true,
+              auto: {
+                enabled: true,
+                detectors: {
+                  lead: disabledDetector(),
+                  purchase: disabledDetector(),
+                  removeFromCart: disabledDetector(),
+                  initiateCheckout: disabledDetector(),
+                  addPaymentInfo: disabledDetector(),
+                  search: disabledDetector(),
+                  viewContent: disabledDetector(),
+                  addToCart: {
+                    enabled: true,
+                    sources: [
+                      {
+                        name: 'customer-form',
+                        type: 'form',
+                        selectorForm: {
+                          fields: ['contato-email', 'campo-telefone'],
+                          mode: 'all',
+                          formSelector: '#customer-form',
+                          trigger: 'auto',
+                          debounceMs: 300,
+                          fireOnce: true,
+                        },
+                        selector: ['#customer-form'],
+                        selectorType: 'css',
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+          },
+        };
+      }
+
+      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 eventCustomer(event) {
+        if (event && event.customer) return event.customer;
+        if (event && event.data && event.data.customer) return event.data.customer;
+        return null;
+      }
+
+      function renderCustomer() {
+        const services = pixel && pixel.getDebugServices ? pixel.getDebugServices() : null;
+        const snap =
+          services && services.customerIdentity
+            ? services.customerIdentity.getSnapshot()
+            : null;
+        els.customer.textContent = snap ? JSON.stringify(snap, null, 2) : 'null';
+      }
+
+      function renderDebug() {
+        els.runtime.textContent =
+          'initialized: ' +
+          (pixel ? pixel.isInitialized() : false) +
+          '\ninit count: ' +
+          initCount +
+          '\ndestroy count: ' +
+          destroyCount +
+          '\npixelId: ' +
+          PIXEL_ID +
+          '\nscenario: customer CSS';
+        els.pill.textContent =
+          pixel && pixel.isInitialized() ? 'ready' : 'offline';
+        els.pill.className =
+          'pill' + (pixel && pixel.isInitialized() ? ' ok' : '');
+        renderCustomer();
+      }
+
+      function onEvent(event) {
+        counts[event.type] = (counts[event.type] || 0) + 1;
+        renderCounts();
+        els.last.textContent = JSON.stringify(event, null, 2);
+        const customer = eventCustomer(event);
+        els.lastCustomer.textContent = customer
+          ? JSON.stringify(customer, null, 2)
+          : 'null';
+        appendLog(event.type + ' customer=' + JSON.stringify(customer));
+        renderDebug();
+      }
+
+      async function boot() {
+        if (unsubscribe) { unsubscribe(); unsubscribe = null; }
+        if (pixel) {
+          await pixel.destroy();
+          destroyCount += 1;
+          pixel = null;
+        }
+        pixel = await Pixel.create(buildSettings());
+        initCount += 1;
+        const services = pixel.getDebugServices();
+        if (services && services.dispatcher) {
+          unsubscribe = services.dispatcher.subscribe(onEvent);
+        }
+        appendLog('Pixel initialized — customer CSS');
+        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';
+        els.lastCustomer.textContent = 'null';
+        Object.keys(counts).forEach(function (k) { delete counts[k]; });
+        renderCounts();
+      };
+      document.getElementById('btn-fill').onclick = function () {
+        document.getElementById('contato-email').value = 'css@exemplo.com';
+        document.getElementById('campo-telefone').value = '11977776666';
+        document.getElementById('nome-cliente').value = 'Rita CSS';
+        document.getElementById('cep-attr').value = '01311-000';
+        document.getElementById('customer-form').querySelectorAll('input').forEach(function (input) {
+          input.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+      };
+
+      document.getElementById('customer-form').addEventListener('input', function () {
+        setTimeout(renderCustomer, 250);
+      });
+
+      boot();
+    </script>
+  </body>
+</html>