@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,517 @@
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 — ADD_TO_CART atributo data-track</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>ADD_TO_CART — atributo · data-track</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-add-to-cart-attribute.html" class="active">1. Atributo</a>
90
+ <a href="example-add-to-cart-click.html" class="">2. Click+Form</a>
91
+ <a href="example-add-to-cart-auto.html" class="">3. Auto+Form</a>
92
+ <a href="example-add-to-cart-text.html" class="">4. Text</a>
93
+ <a href="example-add-to-cart-manual.html" class="">5. Manual API</a>
94
+ <a href="example-add-to-cart-dedupe.html" class="">6. Dedupe</a>
95
+ <a href="example-add-to-cart-order-bump.html" class="">7. Order bump</a></div>
96
+ <div class="hint"><strong>Contexto:</strong> PDP / card de produto. Clique em botão com
97
+ <code>data-track="add_to_cart"</code> + <code>data-product-*</code>.
98
+ Sem <code>selectorForm</code> — <code>ConfiguredSelectorDetector</code> +
99
+ <code>ProductExtractor</code>. Catálogo completa o que faltar.</div>
100
+
101
+ <div class="card">
102
+ <h2>Lifecycle</h2>
103
+ <div class="actions">
104
+ <button id="btn-reinit" class="primary" type="button">Reinitialize</button>
105
+ <button id="btn-destroy" class="danger" type="button">Destroy</button>
106
+ <button id="btn-clear" type="button">Clear logs</button>
107
+ </div>
108
+ <div class="status" id="runtime-status">Aguardando init...</div>
109
+ </div>
110
+
111
+ <div class="grid">
112
+ <div>
113
+ <div class="card">
114
+ <h2>Produto com atributos <span class="pill">ConfiguredSelector</span></h2>
115
+ <div class="ctx">Botão carrega o produto via data-* no próprio elemento.</div>
116
+ <div class="product">
117
+ <strong>Oferta Principal</strong>
118
+ <span class="sub" style="margin:0">R$ 197 · id no atributo</span>
119
+ <div class="actions">
120
+ <button
121
+ type="button"
122
+ class="primary"
123
+ data-track="add_to_cart"
124
+ data-product-id="main_offer"
125
+ data-product-name="Oferta Principal"
126
+ data-product-price="197"
127
+ data-currency="BRL"
128
+ data-quantity="1"
129
+ >
130
+ Adicionar ao carrinho
131
+ </button>
132
+ <button
133
+ type="button"
134
+ data-track="add_to_cart"
135
+ data-product-id="main_offer"
136
+ >
137
+ Só productId (enrich catalog)
138
+ </button>
139
+ <button type="button" id="btn-no-track">Clique sem data-track</button>
140
+ </div>
141
+ </div>
142
+ <p class="sub">
143
+ Clique sem atributo → não dispara. Só <code>productId</code> →
144
+ nome/preço vêm do catálogo.
145
+ </p>
146
+ </div>
147
+ <div class="card">
148
+ <h2>Checklist</h2>
149
+ <ul class="checklist">
150
+ <li>[ ] Clique sem <code>data-track</code> → não dispara</li>
151
+ <li>[ ] Botão completo → payload com id/name/price/qty</li>
152
+ <li>[ ] Só <code>data-product-id</code> → enrich pelo catálogo</li>
153
+ <li>[ ] Cart mirror atualiza com o produto</li>
154
+ <li>[ ] Detector: <code>ConfiguredSelector(ADD_TO_CART)</code></li>
155
+ </ul>
156
+ </div>
157
+ </div>
158
+ <div>
159
+ <div class="card">
160
+ <h2>Event counts</h2>
161
+ <div class="status" id="event-counts">Nenhum evento ainda</div>
162
+ </div>
163
+ <div class="card">
164
+ <h2>Cart mirror (via eventos)</h2>
165
+ <div class="status" id="cart-mirror">{}</div>
166
+ </div>
167
+ <div class="card">
168
+ <h2>Active detectors</h2>
169
+ <div class="status" id="detectors">—</div>
170
+ </div>
171
+
172
+ <div class="card">
173
+ <h2>Last event JSON</h2>
174
+ <pre id="last-event">null</pre>
175
+ </div>
176
+ <div class="card">
177
+ <h2>Event log</h2>
178
+ <pre id="logs">Aguardando eventos...</pre>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <script src="../../../dist/v2/global.global.js"></script>
185
+ <script>
186
+ const { Pixel, DEFAULT_PIXEL_CONFIG } = window.PixelV2;
187
+ const API_ENDPOINT =
188
+ 'https://micro-service-pixel-production-4826.up.railway.app';
189
+ const PIXEL_ID = 'pix_7315610';
190
+
191
+ const els = {
192
+ logs: document.getElementById('logs'),
193
+ last: document.getElementById('last-event'),
194
+ counts: document.getElementById('event-counts'),
195
+ cart: document.getElementById('cart-mirror'),
196
+ detectors: document.getElementById('detectors'),
197
+ dedupe: document.getElementById('dedupe-keys'),
198
+ runtime: document.getElementById('runtime-status'),
199
+ pill: document.getElementById('init-pill'),
200
+ };
201
+
202
+ let pixel = null;
203
+ let unsubscribe = null;
204
+ let initCount = 0;
205
+ let destroyCount = 0;
206
+ const counts = {};
207
+ const cartMirror = {};
208
+
209
+ function addToCartDetectorConfig() {
210
+ return {
211
+ enabled: true,
212
+ selector: ['[data-track="add_to_cart"]'],
213
+ selectorType: 'css',
214
+ };
215
+ }
216
+
217
+ function buildConfig() {
218
+ const base = DEFAULT_PIXEL_CONFIG;
219
+ return {
220
+ ...base,
221
+ app: {
222
+ ...base.app,
223
+ source: 'custom',
224
+ environment: 'development',
225
+ debug: true,
226
+ },
227
+ transport: {
228
+ ...DEFAULT_PIXEL_CONFIG.transport,
229
+ apiEndpoint: API_ENDPOINT,
230
+ timeoutMs: 10000,
231
+ },
232
+ identity: { ...base.identity, pixelId: PIXEL_ID },
233
+ modules: {
234
+ ...base.modules,
235
+ core: {
236
+ ...base.modules.core,
237
+ enabled: false,
238
+ pageView: {
239
+ ...base.modules.core.pageView,
240
+ enabled: false,
241
+ trackInitialPageView: false,
242
+ spa: false,
243
+ },
244
+ },
245
+ behavior: { ...base.modules.behavior, enabled: false },
246
+ privacy: { ...base.modules.privacy, enabled: false },
247
+ transport: {
248
+ enabled: true,
249
+ mockSender: { enabled: false },
250
+ sender: { mode: 'http' },
251
+ persistence: { enabled: true },
252
+ replay: { enabled: true },
253
+ ordering: { enabled: true },
254
+ coordination: { enabled: true },
255
+ circuitBreaker: {
256
+ enabled: true,
257
+ failureThreshold: 5,
258
+ resetTimeoutMs: 30000,
259
+ halfOpenMaxAttempts: 2,
260
+ },
261
+ backpressure: {
262
+ enabled: true,
263
+ maxQueueSize: 500,
264
+ policy: 'drop_oldest',
265
+ sampleRate: 0.5,
266
+ },
267
+ deadLetter: { enabled: true, maxEntries: 200 },
268
+ compression: { enabled: true, strategy: 'identity' },
269
+ retry: {
270
+ enabled: true,
271
+ maxAttempts: 4,
272
+ baseDelayMs: 500,
273
+ maxDelayMs: 4000,
274
+ multiplier: 2,
275
+ },
276
+ batch: {
277
+ enabled: true,
278
+ batchSize: 10,
279
+ flushIntervalMs: 2000,
280
+ maxWaitMs: 5000,
281
+ },
282
+ timeout: { enabled: true, timeoutMs: 10000 },
283
+ offline: { enabled: true },
284
+ flush: {
285
+ enabled: true,
286
+ flushIntervalMs: 2000,
287
+ flushOnDestroy: true,
288
+ prepareUnloadHooks: true,
289
+ },
290
+ },
291
+ integrations: { ...base.modules.integrations, enabled: false },
292
+ conversion: {
293
+ enabled: true,
294
+ commerce: {
295
+ currency: 'BRL',
296
+ catalog: { products: [
297
+ {
298
+ id: 'main_offer',
299
+ name: 'Oferta Principal',
300
+ type: 'main',
301
+ price: 197,
302
+ currency: 'BRL',
303
+ quantity: 1,
304
+ },
305
+ {
306
+ id: 'order_bump_01',
307
+ name: 'Order Bump Especial',
308
+ type: 'order_bump',
309
+ price: 47,
310
+ currency: 'BRL',
311
+ quantity: 1,
312
+ },
313
+ {
314
+ id: 'upsell_01',
315
+ name: 'Upsell 01',
316
+ type: 'upsell',
317
+ price: 97,
318
+ currency: 'BRL',
319
+ quantity: 1,
320
+ },
321
+ ] },
322
+ checkout: {
323
+ mode: 'single_product',
324
+ selectedItems: [{ productId: "main_offer", quantity: 1 }],
325
+ calculateValueFrom: 'selected_items',
326
+ allowDynamicItems: true,
327
+ },
328
+ mappings: {
329
+ attributes: {
330
+ productId: ['data-product-id', 'data-sku', 'data-offer-id'],
331
+ productName: ['data-product-name', 'data-name'],
332
+ price: ['data-product-price', 'data-price'],
333
+ quantity: ['data-quantity', 'data-qty'],
334
+ currency: ['data-currency'],
335
+ },
336
+ fields: {
337
+ productId: ['productId', 'product_id', 'offerId', 'sku'],
338
+ productName: ['productName', 'product_name'],
339
+ price: ['price', 'amount'],
340
+ quantity: ['quantity', 'qty'],
341
+ currency: ['currency'],
342
+ email: ['email', 'customerEmail'],
343
+ phone: ['phone', 'telefone', 'customerPhone'],
344
+ },
345
+ },
346
+ },
347
+ manual: {
348
+ pageView: { enabled: false },
349
+ purchase: { enabled: false },
350
+ lead: { enabled: false },
351
+ addToCart: { enabled: true },
352
+ removeFromCart: { enabled: true },
353
+ initiateCheckout: { enabled: false },
354
+ addPaymentInfo: { enabled: false },
355
+ search: { enabled: false },
356
+ viewContent: { enabled: false },
357
+ },
358
+ auto: {
359
+ enabled: true,
360
+ detectors: {
361
+ lead: { enabled: false },
362
+ purchase: { enabled: false },
363
+ addToCart: addToCartDetectorConfig(),
364
+ removeFromCart: { enabled: false },
365
+ initiateCheckout: { enabled: false },
366
+ addPaymentInfo: { enabled: false },
367
+ search: { enabled: false },
368
+ viewContent: { enabled: false },
369
+ },
370
+ },
371
+ rules: {
372
+ enabled: false,
373
+ selectors: [],
374
+ texts: [],
375
+ urlPatterns: [],
376
+ checkout: { enabled: false },
377
+ card: { enabled: false },
378
+ },
379
+ },
380
+ },
381
+ };
382
+ }
383
+
384
+ function appendLog(message) {
385
+ const line = '[' + new Date().toISOString() + '] ' + message;
386
+ const prev = els.logs.textContent;
387
+ els.logs.textContent =
388
+ prev === 'Aguardando eventos...' ? line : line + '\n' + prev;
389
+ }
390
+
391
+ function renderCounts() {
392
+ const lines = Object.keys(counts)
393
+ .sort()
394
+ .map(function (type) { return type + ': ' + counts[type]; });
395
+ els.counts.textContent =
396
+ lines.length > 0 ? lines.join('\n') : 'Nenhum evento ainda';
397
+ }
398
+
399
+ function renderCart() {
400
+ if (!els.cart) return;
401
+ els.cart.textContent = JSON.stringify(cartMirror, null, 2);
402
+ }
403
+
404
+ function renderDebug() {
405
+ const detectors =
406
+ pixel && pixel.getDebugActiveDetectors
407
+ ? pixel.getDebugActiveDetectors()
408
+ : [];
409
+ els.detectors.textContent =
410
+ detectors.length > 0 ? detectors.join('\n') : 'Nenhum detector ativo';
411
+ if (els.dedupe) {
412
+ const keys =
413
+ pixel && pixel.getDebugDedupeKeys ? pixel.getDebugDedupeKeys() : [];
414
+ els.dedupe.textContent =
415
+ keys.length > 0 ? keys.join('\n') : 'Nenhuma chave';
416
+ }
417
+ els.runtime.textContent =
418
+ 'initialized: ' +
419
+ (pixel ? pixel.isInitialized() : false) +
420
+ '\ninit count: ' +
421
+ initCount +
422
+ '\ndestroy count: ' +
423
+ destroyCount +
424
+ '\npixelId: ' +
425
+ PIXEL_ID +
426
+ '\nscenario: atributo · data-track';
427
+ els.pill.textContent =
428
+ pixel && pixel.isInitialized() ? 'ready' : 'offline';
429
+ els.pill.className =
430
+ 'pill' + (pixel && pixel.isInitialized() ? ' ok' : '');
431
+ }
432
+
433
+ function updateCartFromEvent(event) {
434
+ if (
435
+ event.type === 'ADD_TO_CART' &&
436
+ event.data &&
437
+ event.data.productId
438
+ ) {
439
+ cartMirror[event.data.productId] = {
440
+ productId: event.data.productId,
441
+ productName: event.data.productName,
442
+ price: event.data.price,
443
+ currency: event.data.currency,
444
+ quantity: event.data.quantity != null ? event.data.quantity : 1,
445
+ };
446
+ }
447
+ if (
448
+ event.type === 'REMOVE_FROM_CART' &&
449
+ event.data &&
450
+ event.data.productId
451
+ ) {
452
+ delete cartMirror[event.data.productId];
453
+ }
454
+ renderCart();
455
+ }
456
+
457
+ function onEvent(event) {
458
+ counts[event.type] = (counts[event.type] || 0) + 1;
459
+ renderCounts();
460
+ updateCartFromEvent(event);
461
+ els.last.textContent = JSON.stringify(event, null, 2);
462
+ appendLog(event.type + ' ' + JSON.stringify(event.data || {}));
463
+ renderDebug();
464
+ }
465
+
466
+ async function boot() {
467
+ if (unsubscribe) { unsubscribe(); unsubscribe = null; }
468
+ if (pixel) {
469
+ await pixel.destroy();
470
+ destroyCount += 1;
471
+ pixel = null;
472
+ }
473
+ Object.keys(cartMirror).forEach(function (k) { delete cartMirror[k]; });
474
+ renderCart();
475
+ pixel = new Pixel(buildConfig());
476
+ await pixel.init();
477
+ initCount += 1;
478
+ const services = pixel.getDebugServices();
479
+ if (services && services.dispatcher) {
480
+ unsubscribe = services.dispatcher.subscribe(onEvent);
481
+ }
482
+ appendLog('Pixel initialized — atributo · data-track');
483
+ renderDebug();
484
+ }
485
+
486
+ async function destroyPixel() {
487
+ if (unsubscribe) { unsubscribe(); unsubscribe = null; }
488
+ if (pixel) {
489
+ await pixel.destroy();
490
+ destroyCount += 1;
491
+ pixel = null;
492
+ }
493
+ appendLog('Pixel destroyed');
494
+ renderDebug();
495
+ }
496
+
497
+ document.getElementById('btn-reinit').onclick = function () { boot(); };
498
+ document.getElementById('btn-destroy').onclick = function () { destroyPixel(); };
499
+ document.getElementById('btn-clear').onclick = function () {
500
+ els.logs.textContent = 'Aguardando eventos...';
501
+ els.last.textContent = 'null';
502
+ Object.keys(counts).forEach(function (k) { delete counts[k]; });
503
+ Object.keys(cartMirror).forEach(function (k) { delete cartMirror[k]; });
504
+ renderCounts();
505
+ renderCart();
506
+ };
507
+
508
+
509
+ document.getElementById('btn-no-track').onclick = function () {
510
+ appendLog('(playground) clique sem data-track — esperado: nenhum ADD_TO_CART');
511
+ };
512
+
513
+
514
+ boot();
515
+ </script>
516
+ </body>
517
+ </html>