@beworke/pixel 0.1.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (123) hide show
  1. package/CHANGELOG.md +194 -0
  2. package/README.md +163 -0
  3. package/RELEASE_CANDIDATE.md +256 -0
  4. package/dist/PixelLogger-B21lEjep.d.mts +8 -0
  5. package/dist/PixelLogger-B21lEjep.d.ts +8 -0
  6. package/dist/StorageFactory-BhpbB6Jj.d.mts +8 -0
  7. package/dist/StorageFactory-CAkJJqVD.d.ts +8 -0
  8. package/dist/config/index.cjs.js +3 -0
  9. package/dist/config/index.cjs.js.map +1 -0
  10. package/dist/config/index.d.mts +19 -0
  11. package/dist/config/index.d.ts +19 -0
  12. package/dist/config/index.esm.js +3 -0
  13. package/dist/config/index.esm.js.map +1 -0
  14. package/dist/events/index.cjs.js +3 -0
  15. package/dist/events/index.cjs.js.map +1 -0
  16. package/dist/events/index.d.mts +1 -0
  17. package/dist/events/index.d.ts +1 -0
  18. package/dist/events/index.esm.js +3 -0
  19. package/dist/events/index.esm.js.map +1 -0
  20. package/dist/examples/html-script/README.md +71 -0
  21. package/dist/examples/html-script/RELEASE_CANDIDATE.md +121 -0
  22. package/dist/examples/html-script/add-payment-info/README.md +46 -0
  23. package/dist/examples/html-script/add-payment-info/example-add-payment-info-card-autocomplete.html +494 -0
  24. package/dist/examples/html-script/add-payment-info/example-add-payment-info-card-disabled.html +478 -0
  25. package/dist/examples/html-script/add-payment-info/example-add-payment-info-card-fields.html +486 -0
  26. package/dist/examples/html-script/add-payment-info/example-add-payment-info-data-track.html +479 -0
  27. package/dist/examples/html-script/add-payment-info/example-add-payment-info-dedupe.html +492 -0
  28. package/dist/examples/html-script/add-payment-info/example-add-payment-info-manual.html +495 -0
  29. package/dist/examples/html-script/add-payment-info/example-add-payment-info-rules-card.html +469 -0
  30. package/dist/examples/html-script/add-payment-info/example-add-payment-info-security.html +489 -0
  31. package/dist/examples/html-script/add-to-cart/README.md +36 -0
  32. package/dist/examples/html-script/add-to-cart/example-add-to-cart-attribute.html +517 -0
  33. package/dist/examples/html-script/add-to-cart/example-add-to-cart-auto.html +512 -0
  34. package/dist/examples/html-script/add-to-cart/example-add-to-cart-click.html +519 -0
  35. package/dist/examples/html-script/add-to-cart/example-add-to-cart-dedupe.html +514 -0
  36. package/dist/examples/html-script/add-to-cart/example-add-to-cart-manual.html +517 -0
  37. package/dist/examples/html-script/add-to-cart/example-add-to-cart-order-bump.html +527 -0
  38. package/dist/examples/html-script/add-to-cart/example-add-to-cart-text.html +524 -0
  39. package/dist/examples/html-script/example-basic.html +350 -0
  40. package/dist/examples/html-script/example-behavior.html +435 -0
  41. package/dist/examples/html-script/example-conversion.html +479 -0
  42. package/dist/examples/html-script/example-integration.html +709 -0
  43. package/dist/examples/html-script/example-transport.html +748 -0
  44. package/dist/examples/html-script/initiate-checkout/README.md +38 -0
  45. package/dist/examples/html-script/initiate-checkout/example-initiate-checkout-attribute.html +485 -0
  46. package/dist/examples/html-script/initiate-checkout/example-initiate-checkout-auto.html +491 -0
  47. package/dist/examples/html-script/initiate-checkout/example-initiate-checkout-click.html +493 -0
  48. package/dist/examples/html-script/initiate-checkout/example-initiate-checkout-manual.html +494 -0
  49. package/dist/examples/html-script/initiate-checkout/example-initiate-checkout-snapshot.html +497 -0
  50. package/dist/examples/html-script/initiate-checkout/example-initiate-checkout-submit.html +502 -0
  51. package/dist/examples/html-script/initiate-checkout/example-initiate-checkout-text.html +496 -0
  52. package/dist/examples/html-script/lead/README.md +25 -0
  53. package/dist/examples/html-script/lead/example-lead-trigger-attribute.html +594 -0
  54. package/dist/examples/html-script/lead/example-lead-trigger-auto.html +431 -0
  55. package/dist/examples/html-script/lead/example-lead-trigger-click.html +587 -0
  56. package/dist/examples/html-script/release-candidate.html +726 -0
  57. package/dist/examples/html-script/remove-from-cart/README.md +36 -0
  58. package/dist/examples/html-script/remove-from-cart/example-remove-from-cart-attribute.html +532 -0
  59. package/dist/examples/html-script/remove-from-cart/example-remove-from-cart-css.html +524 -0
  60. package/dist/examples/html-script/remove-from-cart/example-remove-from-cart-dedupe.html +540 -0
  61. package/dist/examples/html-script/remove-from-cart/example-remove-from-cart-manual.html +533 -0
  62. package/dist/examples/html-script/remove-from-cart/example-remove-from-cart-multi.html +557 -0
  63. package/dist/examples/html-script/remove-from-cart/example-remove-from-cart-state.html +539 -0
  64. package/dist/examples/html-script/remove-from-cart/example-remove-from-cart-text.html +524 -0
  65. package/dist/examples/html-script/search/README.md +41 -0
  66. package/dist/examples/html-script/search/example-search-attribute.html +454 -0
  67. package/dist/examples/html-script/search/example-search-button-sync.html +455 -0
  68. package/dist/examples/html-script/search/example-search-dedupe.html +466 -0
  69. package/dist/examples/html-script/search/example-search-input.html +456 -0
  70. package/dist/examples/html-script/search/example-search-manual.html +473 -0
  71. package/dist/examples/html-script/search/example-search-submit.html +450 -0
  72. package/dist/examples/html-script/search/example-search-text.html +441 -0
  73. package/dist/examples/html-script/view-content/README.md +48 -0
  74. package/dist/examples/html-script/view-content/example-view-content-attribute.html +488 -0
  75. package/dist/examples/html-script/view-content/example-view-content-css.html +467 -0
  76. package/dist/examples/html-script/view-content/example-view-content-dedupe.html +485 -0
  77. package/dist/examples/html-script/view-content/example-view-content-empty.html +469 -0
  78. package/dist/examples/html-script/view-content/example-view-content-manual.html +496 -0
  79. package/dist/examples/html-script/view-content/example-view-content-product-card.html +478 -0
  80. package/dist/examples/html-script/view-content/example-view-content-text.html +473 -0
  81. package/dist/examples/release-candidate/README.md +14 -0
  82. package/dist/examples/v2/README.md +33 -0
  83. package/dist/index-DUfFzniE.d.mts +274 -0
  84. package/dist/index-DUfFzniE.d.ts +274 -0
  85. package/dist/index.cjs.js +3 -0
  86. package/dist/index.cjs.js.map +1 -0
  87. package/dist/index.d.mts +364 -0
  88. package/dist/index.d.ts +364 -0
  89. package/dist/index.esm.js +3 -0
  90. package/dist/index.esm.js.map +1 -0
  91. package/dist/logger/index.cjs.js +3 -0
  92. package/dist/logger/index.cjs.js.map +1 -0
  93. package/dist/logger/index.d.mts +12 -0
  94. package/dist/logger/index.d.ts +12 -0
  95. package/dist/logger/index.esm.js +3 -0
  96. package/dist/logger/index.esm.js.map +1 -0
  97. package/dist/pixel-CbeF25mD.d.mts +555 -0
  98. package/dist/pixel-CbeF25mD.d.ts +555 -0
  99. package/dist/pixel-default-config-1VgLFOiL.d.mts +5 -0
  100. package/dist/pixel-default-config-Bxb-Vdd8.d.ts +5 -0
  101. package/dist/runtime/index.cjs.js +3 -0
  102. package/dist/runtime/index.cjs.js.map +1 -0
  103. package/dist/runtime/index.d.mts +48 -0
  104. package/dist/runtime/index.d.ts +48 -0
  105. package/dist/runtime/index.esm.js +3 -0
  106. package/dist/runtime/index.esm.js.map +1 -0
  107. package/dist/services/index.cjs.js +3 -0
  108. package/dist/services/index.cjs.js.map +1 -0
  109. package/dist/services/index.d.mts +169 -0
  110. package/dist/services/index.d.ts +169 -0
  111. package/dist/services/index.esm.js +3 -0
  112. package/dist/services/index.esm.js.map +1 -0
  113. package/dist/types-CTpRvFKZ.d.ts +71 -0
  114. package/dist/types-DGlBdsAy.d.mts +71 -0
  115. package/dist/v2/global.global.js +3 -0
  116. package/dist/v2/global.global.js.map +1 -0
  117. package/dist/v2/index.cjs.js +3 -0
  118. package/dist/v2/index.cjs.js.map +1 -0
  119. package/dist/v2/index.d.mts +7 -0
  120. package/dist/v2/index.d.ts +7 -0
  121. package/dist/v2/index.esm.js +3 -0
  122. package/dist/v2/index.esm.js.map +1 -0
  123. package/package.json +101 -0
@@ -0,0 +1,496 @@
1
+ <!doctype html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Pixel v2 — INITIATE_CHECKOUT text selector</title>
7
+ <style>
8
+ :root {
9
+ --bg: #f8fafc; --card: #fff; --border: #e2e8f0; --text: #0f172a;
10
+ --muted: #64748b; --accent: #0f766e; --accent-soft: #ccfbf1;
11
+ --warn: #9a3412; --warn-soft: #ffedd5;
12
+ }
13
+ * { box-sizing: border-box; }
14
+ body {
15
+ margin: 0;
16
+ font-family: "Segoe UI", system-ui, sans-serif;
17
+ background:
18
+ radial-gradient(circle at top left, #ecfeff 0%, transparent 40%),
19
+ linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
20
+ color: var(--text); line-height: 1.45;
21
+ }
22
+ .wrap { max-width: 980px; margin: 0 auto; padding: 1.5rem; }
23
+ h1 { font-size: 1.5rem; margin: 0 0 0.35rem; letter-spacing: -0.02em; }
24
+ h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }
25
+ .sub { color: var(--muted); margin: 0 0 1rem; font-size: 0.92rem; }
26
+ .nav { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
27
+ .nav a {
28
+ text-decoration: none; border: 1px solid var(--border); background: #fff;
29
+ color: var(--text); border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.78rem;
30
+ }
31
+ .nav a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
32
+ .grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1rem; }
33
+ @media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
34
+ .card {
35
+ background: var(--card); border: 1px solid var(--border); border-radius: 12px;
36
+ padding: 1rem; margin-bottom: 1rem; box-shadow: 0 1px 0 rgba(15,23,42,.03);
37
+ }
38
+ .hint {
39
+ background: var(--accent-soft); border: 1px solid #99f6e4; border-radius: 10px;
40
+ padding: 0.85rem 1rem; font-size: 0.9rem; margin-bottom: 1rem;
41
+ }
42
+ .hint.warn { background: var(--warn-soft); border-color: #fdba74; color: var(--warn); }
43
+ .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
44
+ button {
45
+ appearance: none; border: 1px solid var(--border); background: #fff; color: var(--text);
46
+ border-radius: 8px; padding: 0.5rem 0.85rem; cursor: pointer; font: inherit;
47
+ }
48
+ button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
49
+ button.danger { background: #7f1d1d; border-color: #7f1d1d; color: #fff; }
50
+ button:disabled { opacity: 0.55; cursor: not-allowed; }
51
+ label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.25rem; }
52
+ input {
53
+ width: 100%; border: 1px solid var(--border); border-radius: 8px;
54
+ padding: 0.55rem 0.7rem; font: inherit; background: #fff;
55
+ }
56
+ .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
57
+ @media (max-width: 560px) { .row { grid-template-columns: 1fr; } }
58
+ .status, pre {
59
+ background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 0.75rem;
60
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
61
+ font-size: 0.78rem; white-space: pre-wrap; word-break: break-word;
62
+ max-height: 260px; overflow: auto;
63
+ }
64
+ .pill {
65
+ display: inline-block; border-radius: 999px; padding: 0.15rem 0.55rem;
66
+ font-size: 0.72rem; background: #e2e8f0; color: #334155; margin-left: 0.35rem;
67
+ }
68
+ .pill.ok { background: #bbf7d0; color: #166534; }
69
+ .checklist { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; color: var(--muted); }
70
+ .checklist li { margin: 0.35rem 0; }
71
+ .ctx {
72
+ border-left: 3px solid var(--accent); padding-left: 0.75rem; margin-bottom: 0.85rem;
73
+ color: var(--muted); font-size: 0.88rem;
74
+ }
75
+ .product {
76
+ border: 1px dashed var(--border); border-radius: 10px; padding: 0.75rem; margin: 0.5rem 0;
77
+ }
78
+ .product strong { display: block; margin-bottom: 0.2rem; }
79
+ code { font-size: 0.85em; }
80
+ </style>
81
+ </head>
82
+ <body>
83
+ <div class="wrap">
84
+ <h1>INITIATE_CHECKOUT — text:Finalizar compra</h1>
85
+ <p class="sub">
86
+ Cenário isolado para validação do Pixel v2.
87
+ <span class="pill" id="init-pill">offline</span>
88
+ </p>
89
+ <div class="nav"><a href="example-initiate-checkout-attribute.html" class="">1. Atributo</a>
90
+ <a href="example-initiate-checkout-click.html" class="">2. Click+Form</a>
91
+ <a href="example-initiate-checkout-submit.html" class="">3. Submit</a>
92
+ <a href="example-initiate-checkout-auto.html" class="">4. Auto+Form</a>
93
+ <a href="example-initiate-checkout-text.html" class="active">5. Text</a>
94
+ <a href="example-initiate-checkout-manual.html" class="">6. Manual API</a>
95
+ <a href="example-initiate-checkout-snapshot.html" class="">7. Snapshot/value</a></div>
96
+ <div class="hint"><strong>Contexto:</strong> CTA sem <code>data-track</code>, match por
97
+ <code>text:Finalizar compra</code> + gate de formulário.</div>
98
+
99
+ <div class="card">
100
+ <h2>Lifecycle</h2>
101
+ <div class="actions">
102
+ <button id="btn-reinit" class="primary" type="button">Reinitialize</button>
103
+ <button id="btn-destroy" class="danger" type="button">Destroy</button>
104
+ <button id="btn-clear" type="button">Clear logs</button>
105
+ </div>
106
+ <div class="status" id="runtime-status">Aguardando init...</div>
107
+ </div>
108
+
109
+ <div class="grid">
110
+ <div>
111
+ <div class="card">
112
+ <h2>CTA por texto <span class="pill">text: + selectorForm</span></h2>
113
+ <div class="ctx">Botão só com label — sem data-track.</div>
114
+ <form id="buy-form">
115
+ <div class="row">
116
+ <div>
117
+ <label for="tx-email">Email</label>
118
+ <input id="tx-email" name="email" type="email" placeholder="text@test.com" />
119
+ </div>
120
+ <div>
121
+ <label for="tx-phone">Phone</label>
122
+ <input id="tx-phone" name="phone" type="tel" placeholder="11955554444" />
123
+ </div>
124
+ </div>
125
+ <div class="actions">
126
+ <button type="button" class="primary">Finalizar compra</button>
127
+ <button type="button" id="btn-other-text">Comprar depois</button>
128
+ </div>
129
+ </form>
130
+ </div>
131
+ <div class="card">
132
+ <h2>Checklist</h2>
133
+ <ul class="checklist">
134
+ <li>[ ] Form incompleto + Finalizar → não dispara</li>
135
+ <li>[ ] Form ok + Finalizar → dispara</li>
136
+ <li>[ ] “Comprar depois” → não dispara</li>
137
+ </ul>
138
+ </div>
139
+ </div>
140
+ <div>
141
+ <div class="card">
142
+ <h2>Event counts</h2>
143
+ <div class="status" id="event-counts">Nenhum evento ainda</div>
144
+ </div>
145
+ <div class="card">
146
+ <h2>Checkout snapshot (último evento)</h2>
147
+ <div class="status" id="checkout-snapshot">null</div>
148
+ </div>
149
+ <div class="card">
150
+ <h2>Active detectors</h2>
151
+ <div class="status" id="detectors">—</div>
152
+ </div>
153
+
154
+ <div class="card">
155
+ <h2>Last event JSON</h2>
156
+ <pre id="last-event">null</pre>
157
+ </div>
158
+ <div class="card">
159
+ <h2>Event log</h2>
160
+ <pre id="logs">Aguardando eventos...</pre>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <script src="../../../dist/v2/global.global.js"></script>
167
+ <script>
168
+ const { Pixel, DEFAULT_PIXEL_CONFIG } = window.PixelV2;
169
+ const API_ENDPOINT =
170
+ 'https://micro-service-pixel-production-4826.up.railway.app';
171
+ const PIXEL_ID = 'pix_7315610';
172
+
173
+ const els = {
174
+ logs: document.getElementById('logs'),
175
+ last: document.getElementById('last-event'),
176
+ counts: document.getElementById('event-counts'),
177
+ snapshot: document.getElementById('checkout-snapshot'),
178
+ detectors: document.getElementById('detectors'),
179
+ dedupe: document.getElementById('dedupe-keys'),
180
+ runtime: document.getElementById('runtime-status'),
181
+ pill: document.getElementById('init-pill'),
182
+ };
183
+
184
+ let pixel = null;
185
+ let unsubscribe = null;
186
+ let initCount = 0;
187
+ let destroyCount = 0;
188
+ const counts = {};
189
+
190
+ function initiateCheckoutDetectorConfig() {
191
+ return {
192
+ enabled: true,
193
+ selector: [
194
+ 'text:Finalizar compra',
195
+ { type: 'text', value: 'Finalizar compra' },
196
+ ],
197
+ selectorType: 'css',
198
+ selectorForm: {
199
+ fields: ['email', 'phone'],
200
+ mode: 'all',
201
+ formSelector: '#buy-form',
202
+ trigger: 'click',
203
+ debounceMs: 0,
204
+ fireOnce: false,
205
+ },
206
+ };
207
+ }
208
+
209
+ function buildConfig() {
210
+ const base = DEFAULT_PIXEL_CONFIG;
211
+ return {
212
+ ...base,
213
+ app: {
214
+ ...base.app,
215
+ source: 'custom',
216
+ environment: 'development',
217
+ debug: true,
218
+ },
219
+ transport: {
220
+ ...DEFAULT_PIXEL_CONFIG.transport,
221
+ apiEndpoint: API_ENDPOINT,
222
+ timeoutMs: 10000,
223
+ },
224
+ identity: { ...base.identity, pixelId: PIXEL_ID },
225
+ modules: {
226
+ ...base.modules,
227
+ core: {
228
+ ...base.modules.core,
229
+ enabled: false,
230
+ pageView: {
231
+ ...base.modules.core.pageView,
232
+ enabled: false,
233
+ trackInitialPageView: false,
234
+ spa: false,
235
+ },
236
+ },
237
+ behavior: { ...base.modules.behavior, enabled: false },
238
+ privacy: { ...base.modules.privacy, enabled: false },
239
+ transport: {
240
+ enabled: true,
241
+ mockSender: { enabled: false },
242
+ sender: { mode: 'http' },
243
+ persistence: { enabled: true },
244
+ replay: { enabled: true },
245
+ ordering: { enabled: true },
246
+ coordination: { enabled: true },
247
+ circuitBreaker: {
248
+ enabled: true,
249
+ failureThreshold: 5,
250
+ resetTimeoutMs: 30000,
251
+ halfOpenMaxAttempts: 2,
252
+ },
253
+ backpressure: {
254
+ enabled: true,
255
+ maxQueueSize: 500,
256
+ policy: 'drop_oldest',
257
+ sampleRate: 0.5,
258
+ },
259
+ deadLetter: { enabled: true, maxEntries: 200 },
260
+ compression: { enabled: true, strategy: 'identity' },
261
+ retry: {
262
+ enabled: true,
263
+ maxAttempts: 4,
264
+ baseDelayMs: 500,
265
+ maxDelayMs: 4000,
266
+ multiplier: 2,
267
+ },
268
+ batch: {
269
+ enabled: true,
270
+ batchSize: 10,
271
+ flushIntervalMs: 2000,
272
+ maxWaitMs: 5000,
273
+ },
274
+ timeout: { enabled: true, timeoutMs: 10000 },
275
+ offline: { enabled: true },
276
+ flush: {
277
+ enabled: true,
278
+ flushIntervalMs: 2000,
279
+ flushOnDestroy: true,
280
+ prepareUnloadHooks: true,
281
+ },
282
+ },
283
+ integrations: { ...base.modules.integrations, enabled: false },
284
+ conversion: {
285
+ enabled: true,
286
+ commerce: {
287
+ currency: 'BRL',
288
+ catalog: { products: [
289
+ {
290
+ id: 'main_offer',
291
+ name: 'Oferta Principal',
292
+ type: 'main',
293
+ price: 197,
294
+ currency: 'BRL',
295
+ quantity: 1,
296
+ },
297
+ {
298
+ id: 'order_bump_01',
299
+ name: 'Order Bump Especial',
300
+ type: 'order_bump',
301
+ price: 47,
302
+ currency: 'BRL',
303
+ quantity: 1,
304
+ },
305
+ {
306
+ id: 'upsell_01',
307
+ name: 'Upsell 01',
308
+ type: 'upsell',
309
+ price: 97,
310
+ currency: 'BRL',
311
+ quantity: 1,
312
+ },
313
+ ] },
314
+ checkout: {
315
+ mode: 'single_product',
316
+ selectedItems: [{ productId: "main_offer", quantity: 1 }],
317
+ calculateValueFrom: 'selected_items',
318
+ allowDynamicItems: true,
319
+ },
320
+ mappings: {
321
+ attributes: {
322
+ productId: ['data-product-id', 'data-sku', 'data-offer-id'],
323
+ productName: ['data-product-name', 'data-name'],
324
+ price: ['data-product-price', 'data-price'],
325
+ quantity: ['data-quantity', 'data-qty'],
326
+ currency: ['data-currency'],
327
+ },
328
+ fields: {
329
+ productId: ['productId', 'product_id', 'offerId', 'sku'],
330
+ productName: ['productName', 'product_name'],
331
+ price: ['price', 'amount'],
332
+ quantity: ['quantity', 'qty'],
333
+ currency: ['currency'],
334
+ email: ['email', 'customerEmail'],
335
+ phone: ['phone', 'telefone', 'customerPhone'],
336
+ },
337
+ },
338
+ },
339
+ manual: {
340
+ pageView: { enabled: false },
341
+ purchase: { enabled: false },
342
+ lead: { enabled: false },
343
+ addToCart: { enabled: false },
344
+ removeFromCart: { enabled: false },
345
+ initiateCheckout: { enabled: true },
346
+ addPaymentInfo: { enabled: false },
347
+ search: { enabled: false },
348
+ viewContent: { enabled: false },
349
+ },
350
+ auto: {
351
+ enabled: true,
352
+ detectors: {
353
+ lead: { enabled: false },
354
+ purchase: { enabled: false },
355
+ addToCart: { enabled: false },
356
+ removeFromCart: { enabled: false },
357
+ initiateCheckout: initiateCheckoutDetectorConfig(),
358
+ addPaymentInfo: { enabled: false },
359
+ search: { enabled: false },
360
+ viewContent: { enabled: false },
361
+ },
362
+ },
363
+ rules: {
364
+ enabled: false,
365
+ selectors: [],
366
+ texts: [],
367
+ urlPatterns: [],
368
+ checkout: { enabled: false },
369
+ card: { enabled: false },
370
+ },
371
+ },
372
+ },
373
+ };
374
+ }
375
+
376
+ function appendLog(message) {
377
+ const line = '[' + new Date().toISOString() + '] ' + message;
378
+ const prev = els.logs.textContent;
379
+ els.logs.textContent =
380
+ prev === 'Aguardando eventos...' ? line : line + '\n' + prev;
381
+ }
382
+
383
+ function renderCounts() {
384
+ const lines = Object.keys(counts)
385
+ .sort()
386
+ .map(function (type) { return type + ': ' + counts[type]; });
387
+ els.counts.textContent =
388
+ lines.length > 0 ? lines.join('\n') : 'Nenhum evento ainda';
389
+ }
390
+
391
+ function renderSnapshot(event) {
392
+ if (!els.snapshot) return;
393
+ if (!event || event.type !== 'INITIATE_CHECKOUT') {
394
+ els.snapshot.textContent = 'null';
395
+ return;
396
+ }
397
+ var d = event.data || {};
398
+ els.snapshot.textContent = JSON.stringify(
399
+ {
400
+ value: d.value,
401
+ currency: d.currency,
402
+ numItems: d.numItems,
403
+ items: d.items,
404
+ },
405
+ null,
406
+ 2
407
+ );
408
+ }
409
+
410
+ function renderDebug() {
411
+ const detectors =
412
+ pixel && pixel.getDebugActiveDetectors
413
+ ? pixel.getDebugActiveDetectors()
414
+ : [];
415
+ els.detectors.textContent =
416
+ detectors.length > 0 ? detectors.join('\n') : 'Nenhum detector ativo';
417
+ if (els.dedupe) {
418
+ const keys =
419
+ pixel && pixel.getDebugDedupeKeys ? pixel.getDebugDedupeKeys() : [];
420
+ els.dedupe.textContent =
421
+ keys.length > 0 ? keys.join('\n') : 'Nenhuma chave';
422
+ }
423
+ els.runtime.textContent =
424
+ 'initialized: ' +
425
+ (pixel ? pixel.isInitialized() : false) +
426
+ '\ninit count: ' +
427
+ initCount +
428
+ '\ndestroy count: ' +
429
+ destroyCount +
430
+ '\npixelId: ' +
431
+ PIXEL_ID +
432
+ '\nscenario: text:Finalizar compra';
433
+ els.pill.textContent =
434
+ pixel && pixel.isInitialized() ? 'ready' : 'offline';
435
+ els.pill.className =
436
+ 'pill' + (pixel && pixel.isInitialized() ? ' ok' : '');
437
+ }
438
+
439
+ function onEvent(event) {
440
+ counts[event.type] = (counts[event.type] || 0) + 1;
441
+ renderCounts();
442
+ renderSnapshot(event);
443
+ els.last.textContent = JSON.stringify(event, null, 2);
444
+ appendLog(event.type + ' ' + JSON.stringify(event.data || {}));
445
+ renderDebug();
446
+ }
447
+
448
+ async function boot() {
449
+ if (unsubscribe) { unsubscribe(); unsubscribe = null; }
450
+ if (pixel) {
451
+ await pixel.destroy();
452
+ destroyCount += 1;
453
+ pixel = null;
454
+ }
455
+ pixel = new Pixel(buildConfig());
456
+ await pixel.init();
457
+ initCount += 1;
458
+ const services = pixel.getDebugServices();
459
+ if (services && services.dispatcher) {
460
+ unsubscribe = services.dispatcher.subscribe(onEvent);
461
+ }
462
+ appendLog('Pixel initialized — text:Finalizar compra');
463
+ renderDebug();
464
+ }
465
+
466
+ async function destroyPixel() {
467
+ if (unsubscribe) { unsubscribe(); unsubscribe = null; }
468
+ if (pixel) {
469
+ await pixel.destroy();
470
+ destroyCount += 1;
471
+ pixel = null;
472
+ }
473
+ appendLog('Pixel destroyed');
474
+ renderDebug();
475
+ }
476
+
477
+ document.getElementById('btn-reinit').onclick = function () { boot(); };
478
+ document.getElementById('btn-destroy').onclick = function () { destroyPixel(); };
479
+ document.getElementById('btn-clear').onclick = function () {
480
+ els.logs.textContent = 'Aguardando eventos...';
481
+ els.last.textContent = 'null';
482
+ if (els.snapshot) els.snapshot.textContent = 'null';
483
+ Object.keys(counts).forEach(function (k) { delete counts[k]; });
484
+ renderCounts();
485
+ };
486
+
487
+
488
+ document.getElementById('btn-other-text').onclick = function () {
489
+ appendLog('(playground) texto diferente — esperado: nenhum evento');
490
+ };
491
+
492
+
493
+ boot();
494
+ </script>
495
+ </body>
496
+ </html>
@@ -0,0 +1,25 @@
1
+ # Pixel v2 — Examples
2
+
3
+ ## LEAD — cenários de trigger (isolados)
4
+
5
+ Cada HTML valida **um** comportamento. Abra um de cada vez.
6
+
7
+ | Arquivo | Trigger | Contexto | Detector |
8
+ |---------|---------|----------|----------|
9
+ | [`example-lead-trigger-click.html`](./example-lead-trigger-click.html) | `click` | Newsletter — inscrição explícita | `ConfiguredForm` + `selectorForm` |
10
+ | [`example-lead-trigger-auto.html`](./example-lead-trigger-auto.html) | `auto` | Checkout — contato preenchido | `ConfiguredForm` + `selectorForm` |
11
+ | [`example-lead-trigger-attribute.html`](./example-lead-trigger-attribute.html) | clique no seletor | Atributo `data-track="lead"` | `ConfiguredSelector` (sem `selectorForm`) |
12
+
13
+ ### Como abrir
14
+
15
+ 1. Na raiz: `npm run build` (ou use `dist/v2/global.global.js` já gerado)
16
+ 2. Abra o HTML (live server / file)
17
+ 3. Script: `../../dist/v2/global.global.js`
18
+
19
+ ### Regras rápidas
20
+
21
+ - **Click (newsletter):** `mode: 'all'` — email **e** phone + clique no CTA.
22
+ - **Auto (checkout):** `mode: 'all'` — dispara no `input`/`change` quando ambos estão ok (`fireOnce`).
23
+ - **Atributo:** sem `selectorForm` — clique em `[data-track="lead"]` + extract do form pai (email **ou** phone **ou** name).
24
+
25
+ Demais eventos de commerce ficam desabilitados nestes playgrounds.