@beworke/pixel 0.1.0-rc.1 → 0.1.0-rc.11

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 (191) hide show
  1. package/CHANGELOG.md +311 -4
  2. package/README.md +90 -128
  3. package/RELEASE_CANDIDATE.md +218 -101
  4. package/dist/Pixel-BnN86r4X.d.ts +797 -0
  5. package/dist/Pixel-BoUGqCbP.d.mts +797 -0
  6. package/dist/{StorageFactory-CAkJJqVD.d.ts → StorageFactory-BfCArzMM.d.ts} +2 -2
  7. package/dist/{StorageFactory-BhpbB6Jj.d.mts → StorageFactory-C0prtNR7.d.mts} +2 -2
  8. package/dist/browser/index.cjs.js +3 -0
  9. package/dist/browser/index.cjs.js.map +1 -0
  10. package/dist/browser/index.d.mts +77 -0
  11. package/dist/browser/index.d.ts +77 -0
  12. package/dist/browser/index.esm.js +3 -0
  13. package/dist/browser/index.esm.js.map +1 -0
  14. package/dist/browser/pixel.buygoods-checkout.global.js +4 -0
  15. package/dist/browser/pixel.buygoods-checkout.global.js.map +1 -0
  16. package/dist/browser/pixel.buygoods-landing.global.js +4 -0
  17. package/dist/browser/pixel.buygoods-landing.global.js.map +1 -0
  18. package/dist/browser/pixel.global.js +4 -0
  19. package/dist/browser/pixel.global.js.map +1 -0
  20. package/dist/browser/pixel.internal-checkout.global.js +4 -0
  21. package/dist/browser/pixel.internal-checkout.global.js.map +1 -0
  22. package/dist/config/index.cjs.js +1 -1
  23. package/dist/config/index.cjs.js.map +1 -1
  24. package/dist/config/index.d.mts +16 -5
  25. package/dist/config/index.d.ts +16 -5
  26. package/dist/config/index.esm.js +1 -1
  27. package/dist/config/index.esm.js.map +1 -1
  28. package/dist/events/index.cjs.js +1 -1
  29. package/dist/events/index.cjs.js.map +1 -1
  30. package/dist/events/index.d.mts +2 -1
  31. package/dist/events/index.d.ts +2 -1
  32. package/dist/events/index.esm.js +1 -1
  33. package/dist/events/index.esm.js.map +1 -1
  34. package/dist/examples/html-script/README.md +21 -55
  35. package/dist/examples/html-script/RELEASE_CANDIDATE.md +39 -26
  36. package/dist/examples/html-script/add-payment-info/README.md +3 -3
  37. package/dist/examples/html-script/add-payment-info/example-add-payment-info-card-autocomplete.html +107 -96
  38. package/dist/examples/html-script/add-payment-info/example-add-payment-info-card-disabled.html +107 -96
  39. package/dist/examples/html-script/add-payment-info/example-add-payment-info-card-fields.html +106 -95
  40. package/dist/examples/html-script/add-payment-info/example-add-payment-info-data-track.html +114 -95
  41. package/dist/examples/html-script/add-payment-info/example-add-payment-info-dedupe.html +106 -95
  42. package/dist/examples/html-script/add-payment-info/example-add-payment-info-manual.html +97 -95
  43. package/dist/examples/html-script/add-payment-info/example-add-payment-info-rules-card.html +106 -95
  44. package/dist/examples/html-script/add-payment-info/example-add-payment-info-security.html +106 -95
  45. package/dist/examples/html-script/add-to-cart/README.md +9 -6
  46. package/dist/examples/html-script/add-to-cart/example-add-to-cart-attribute.html +133 -119
  47. package/dist/examples/html-script/add-to-cart/example-add-to-cart-auto.html +146 -130
  48. package/dist/examples/html-script/add-to-cart/example-add-to-cart-click.html +144 -127
  49. package/dist/examples/html-script/add-to-cart/example-add-to-cart-dedupe.html +133 -119
  50. package/dist/examples/html-script/add-to-cart/example-add-to-cart-link.html +590 -0
  51. package/dist/examples/html-script/add-to-cart/example-add-to-cart-manual.html +124 -116
  52. package/dist/examples/html-script/add-to-cart/example-add-to-cart-order-bump.html +133 -119
  53. package/dist/examples/html-script/add-to-cart/example-add-to-cart-text.html +147 -130
  54. package/dist/examples/html-script/behavior/example-behavior-engagement.html +489 -0
  55. package/dist/examples/html-script/behavior/example-behavior-heartbeat.html +350 -0
  56. package/dist/examples/html-script/behavior/example-behavior-runtime-intelligence.html +433 -0
  57. package/dist/examples/html-script/behavior/example-behavior-viewport.html +397 -0
  58. package/dist/examples/html-script/{example-behavior.html → behavior/example-behavior.html} +23 -17
  59. package/dist/examples/html-script/buygoods/example-buygoods-checkout.html +50 -0
  60. package/dist/examples/html-script/buygoods/ladding.html +184 -0
  61. package/dist/examples/html-script/example-basic.html +1 -1
  62. package/dist/examples/html-script/example-checkout-commerce.html +826 -0
  63. package/dist/examples/html-script/example-conversion.html +42 -49
  64. package/dist/examples/html-script/example-global-factory-classic.html +45 -0
  65. package/dist/examples/html-script/example-global-factory.html +40 -0
  66. package/dist/examples/html-script/example-integration.html +45 -51
  67. package/dist/examples/html-script/example-landing-commerce.html +416 -0
  68. package/dist/examples/html-script/example-runtime-diagnostics.html +108 -0
  69. package/dist/examples/html-script/example-transport.html +70 -63
  70. package/dist/examples/html-script/full-funnel/README.md +64 -0
  71. package/dist/examples/html-script/full-funnel/checkout.html +118 -0
  72. package/dist/examples/html-script/full-funnel/downsell.html +60 -0
  73. package/dist/examples/html-script/full-funnel/landing.html +153 -0
  74. package/dist/examples/html-script/full-funnel/thank-you.html +87 -0
  75. package/dist/examples/html-script/full-funnel/upsell.html +66 -0
  76. package/dist/examples/html-script/initiate-checkout/README.md +6 -6
  77. package/dist/examples/html-script/initiate-checkout/example-initiate-checkout-attribute.html +135 -122
  78. package/dist/examples/html-script/initiate-checkout/example-initiate-checkout-auto.html +143 -128
  79. package/dist/examples/html-script/initiate-checkout/example-initiate-checkout-click.html +144 -128
  80. package/dist/examples/html-script/initiate-checkout/example-initiate-checkout-manual.html +127 -120
  81. package/dist/examples/html-script/initiate-checkout/example-initiate-checkout-snapshot.html +136 -123
  82. package/dist/examples/html-script/initiate-checkout/example-initiate-checkout-submit.html +144 -131
  83. package/dist/examples/html-script/initiate-checkout/example-initiate-checkout-text.html +146 -130
  84. package/dist/examples/html-script/internal-checkout/example-cardioclear-checkout.html +57 -0
  85. package/dist/examples/html-script/internal-checkout/example-slimsoda-checkout.html +53 -0
  86. package/dist/examples/html-script/lead/README.md +9 -7
  87. package/dist/examples/html-script/lead/example-lead-trigger-attribute.html +107 -94
  88. package/dist/examples/html-script/lead/example-lead-trigger-auto.html +118 -103
  89. package/dist/examples/html-script/lead/example-lead-trigger-click.html +118 -102
  90. package/dist/examples/html-script/release-candidate.html +219 -107
  91. package/dist/examples/html-script/remove-from-cart/README.md +4 -4
  92. package/dist/examples/html-script/remove-from-cart/example-remove-from-cart-attribute.html +134 -121
  93. package/dist/examples/html-script/remove-from-cart/example-remove-from-cart-css.html +134 -121
  94. package/dist/examples/html-script/remove-from-cart/example-remove-from-cart-dedupe.html +141 -128
  95. package/dist/examples/html-script/remove-from-cart/example-remove-from-cart-manual.html +125 -118
  96. package/dist/examples/html-script/remove-from-cart/example-remove-from-cart-multi.html +135 -122
  97. package/dist/examples/html-script/remove-from-cart/example-remove-from-cart-state.html +136 -123
  98. package/dist/examples/html-script/remove-from-cart/example-remove-from-cart-text.html +139 -124
  99. package/dist/examples/html-script/search/README.md +1 -1
  100. package/dist/examples/html-script/search/example-search-attribute.html +107 -99
  101. package/dist/examples/html-script/search/example-search-button-sync.html +107 -99
  102. package/dist/examples/html-script/search/example-search-dedupe.html +107 -99
  103. package/dist/examples/html-script/search/example-search-input.html +108 -99
  104. package/dist/examples/html-script/search/example-search-manual.html +98 -96
  105. package/dist/examples/html-script/search/example-search-submit.html +107 -99
  106. package/dist/examples/html-script/search/example-search-text.html +112 -99
  107. package/dist/examples/html-script/url-context/example-url-context-allowed-domains.html +92 -0
  108. package/dist/examples/html-script/url-context/example-url-context-landing.html +110 -0
  109. package/dist/examples/html-script/url-context/example-url-context-upsell.html +105 -0
  110. package/dist/examples/html-script/url-context/example-url-context.html +205 -0
  111. package/dist/examples/html-script/view-content/README.md +1 -1
  112. package/dist/examples/html-script/view-content/example-view-content-attribute.html +126 -118
  113. package/dist/examples/html-script/view-content/example-view-content-css.html +126 -118
  114. package/dist/examples/html-script/view-content/example-view-content-dedupe.html +126 -118
  115. package/dist/examples/html-script/view-content/example-view-content-empty.html +126 -118
  116. package/dist/examples/html-script/view-content/example-view-content-manual.html +117 -115
  117. package/dist/examples/html-script/view-content/example-view-content-product-card.html +126 -118
  118. package/dist/examples/html-script/view-content/example-view-content-text.html +131 -121
  119. package/dist/examples/release-candidate/README.md +2 -1
  120. package/dist/examples/v2/README.md +16 -13
  121. package/dist/index-B8u_3PGG.d.ts +460 -0
  122. package/dist/index-BxT2d-TK.d.mts +460 -0
  123. package/dist/index.cjs.js +1 -1
  124. package/dist/index.cjs.js.map +1 -1
  125. package/dist/index.d.mts +23 -361
  126. package/dist/index.d.ts +23 -361
  127. package/dist/index.esm.js +1 -1
  128. package/dist/index.esm.js.map +1 -1
  129. package/dist/pixel-DNGbAN5C.d.ts +871 -0
  130. package/dist/pixel-_BSDpx4M.d.mts +871 -0
  131. package/dist/pixel-default-config-BMYaqs7i.d.ts +21 -0
  132. package/dist/pixel-default-config-DLRya1tl.d.mts +21 -0
  133. package/dist/pixel-settings-D-t9zQb4.d.ts +40 -0
  134. package/dist/pixel-settings-DGxl0MVm.d.mts +40 -0
  135. package/dist/runtime/index.cjs.js +1 -1
  136. package/dist/runtime/index.cjs.js.map +1 -1
  137. package/dist/runtime/index.d.mts +19 -26
  138. package/dist/runtime/index.d.ts +19 -26
  139. package/dist/runtime/index.esm.js +1 -1
  140. package/dist/runtime/index.esm.js.map +1 -1
  141. package/dist/services/index.cjs.js +1 -1
  142. package/dist/services/index.cjs.js.map +1 -1
  143. package/dist/services/index.d.mts +14 -6
  144. package/dist/services/index.d.ts +14 -6
  145. package/dist/services/index.esm.js +1 -1
  146. package/dist/services/index.esm.js.map +1 -1
  147. package/dist/types-B-Nzagpk.d.mts +19 -0
  148. package/dist/types-D0KVsgzs.d.mts +293 -0
  149. package/dist/types-D3kJ9bfT.d.ts +293 -0
  150. package/dist/types-Dfi9C49l.d.ts +19 -0
  151. package/dist/url-context-Ck2LK18V.d.mts +87 -0
  152. package/dist/url-context-Ck2LK18V.d.ts +87 -0
  153. package/dist/v2/global.global.js +1 -1
  154. package/dist/v2/global.global.js.map +1 -1
  155. package/dist/v2/index.cjs.js +1 -1
  156. package/dist/v2/index.cjs.js.map +1 -1
  157. package/dist/v2/index.d.mts +26 -6
  158. package/dist/v2/index.d.ts +26 -6
  159. package/dist/v2/index.esm.js +1 -1
  160. package/dist/v2/index.esm.js.map +1 -1
  161. package/docs/public/README.md +80 -0
  162. package/docs/public/api/exports.md +56 -0
  163. package/docs/public/api/pixel.md +86 -0
  164. package/docs/public/configuration/commerce.md +44 -0
  165. package/docs/public/configuration/modules.md +63 -0
  166. package/docs/public/configuration/overview.md +85 -0
  167. package/docs/public/configuration/transport.md +127 -0
  168. package/docs/public/events/catalog.md +67 -0
  169. package/docs/public/getting-started/installation.md +88 -0
  170. package/docs/public/getting-started/quick-start.md +142 -0
  171. package/docs/public/getting-started/react-nextjs.md +78 -0
  172. package/docs/public/getting-started/script-tag.md +102 -0
  173. package/docs/public/guides/funnel-checkout.md +52 -0
  174. package/docs/public/guides/funnel-downsell.md +53 -0
  175. package/docs/public/guides/funnel-full.md +64 -0
  176. package/docs/public/guides/funnel-landing.md +70 -0
  177. package/docs/public/guides/funnel-thank-you.md +48 -0
  178. package/docs/public/guides/funnel-upsell.md +72 -0
  179. package/docs/public/limitations.md +33 -0
  180. package/docs/public/privacy/limitations.md +33 -0
  181. package/docs/public/release-candidate/validation.md +42 -0
  182. package/docs/public/troubleshooting.md +56 -0
  183. package/package.json +41 -20
  184. package/dist/index-DUfFzniE.d.mts +0 -274
  185. package/dist/index-DUfFzniE.d.ts +0 -274
  186. package/dist/pixel-CbeF25mD.d.mts +0 -555
  187. package/dist/pixel-CbeF25mD.d.ts +0 -555
  188. package/dist/pixel-default-config-1VgLFOiL.d.mts +0 -5
  189. package/dist/pixel-default-config-Bxb-Vdd8.d.ts +0 -5
  190. package/dist/types-CTpRvFKZ.d.ts +0 -71
  191. package/dist/types-DGlBdsAy.d.mts +0 -71
package/dist/examples/html-script/behavior/example-behavior-viewport.html ADDED
@@ -0,0 +1,397 @@
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 — Behavior Viewport (Etapa 18)</title>
7
+ <style>
8
+ body {
9
+ font-family: system-ui, sans-serif;
10
+ margin: 0;
11
+ padding: 2rem;
12
+ max-width: 960px;
13
+ }
14
+ .hint {
15
+ background: #ecfdf5;
16
+ border: 1px solid #a7f3d0;
17
+ border-radius: 8px;
18
+ padding: 1rem;
19
+ margin-bottom: 1rem;
20
+ font-size: 14px;
21
+ }
22
+ .actions {
23
+ display: flex;
24
+ flex-wrap: wrap;
25
+ gap: 0.5rem;
26
+ margin: 1rem 0;
27
+ }
28
+ button {
29
+ padding: 0.5rem 1rem;
30
+ cursor: pointer;
31
+ }
32
+ .panels {
33
+ display: grid;
34
+ grid-template-columns: 1fr 1fr;
35
+ gap: 1rem;
36
+ }
37
+ @media (max-width: 700px) {
38
+ .panels {
39
+ grid-template-columns: 1fr;
40
+ }
41
+ }
42
+ .panel {
43
+ font-family: ui-monospace, monospace;
44
+ font-size: 12px;
45
+ border-radius: 8px;
46
+ padding: 1rem;
47
+ background: #f4f4f5;
48
+ border: 1px solid #e4e4e7;
49
+ }
50
+ .panel h3 {
51
+ margin: 0 0 0.75rem;
52
+ font-size: 13px;
53
+ font-family: system-ui, sans-serif;
54
+ }
55
+ .panel pre {
56
+ margin: 0;
57
+ white-space: pre-wrap;
58
+ }
59
+ #logs {
60
+ background: #18181b;
61
+ color: #fafafa;
62
+ min-height: 220px;
63
+ max-height: 360px;
64
+ overflow: auto;
65
+ margin-top: 1rem;
66
+ border-radius: 8px;
67
+ padding: 1rem;
68
+ font-family: ui-monospace, monospace;
69
+ font-size: 12px;
70
+ }
71
+ .section {
72
+ min-height: 70vh;
73
+ padding: 2rem;
74
+ margin: 1rem 0;
75
+ border-radius: 12px;
76
+ }
77
+ #hero {
78
+ background: #dbeafe;
79
+ }
80
+ #pricing {
81
+ background: #fef3c7;
82
+ }
83
+ #checkout-cta {
84
+ background: #dcfce7;
85
+ }
86
+ .card {
87
+ display: inline-block;
88
+ width: 160px;
89
+ height: 100px;
90
+ margin: 0.5rem;
91
+ background: #e0e7ff;
92
+ border-radius: 8px;
93
+ text-align: center;
94
+ line-height: 100px;
95
+ }
96
+ #dynamic-zone {
97
+ min-height: 40vh;
98
+ padding: 1rem;
99
+ border: 2px dashed #a1a1aa;
100
+ border-radius: 8px;
101
+ }
102
+ </style>
103
+ </head>
104
+ <body>
105
+ <h1>Behavior Viewport Runtime</h1>
106
+ <p class="hint">
107
+ Etapa 18 — dados fictícios. Emite <code>VIEWPORT_ENTER</code> /
108
+ <code>VIEWPORT_EXIT</code> via Dispatcher. Playground dedicado;
109
+ example-behavior.html mantém viewport desligado.
110
+ </p>
111
+
112
+ <div class="actions">
113
+ <button type="button" id="btn-init">Init</button>
114
+ <button type="button" id="btn-snapshot">Get Debug Snapshot</button>
115
+ <button type="button" id="btn-add">Add Dynamic Target</button>
116
+ <button type="button" id="btn-remove">Remove Dynamic Target</button>
117
+ <button type="button" id="btn-scroll">Scroll to Pricing</button>
118
+ <button type="button" id="btn-destroy">Destroy</button>
119
+ <button type="button" id="btn-reinit">Reinit</button>
120
+ <button type="button" id="btn-clear">Clear Logs</button>
121
+ </div>
122
+
123
+ <div class="panels">
124
+ <div class="panel">
125
+ <h3>Event Counts</h3>
126
+ <pre id="counts">—</pre>
127
+ </div>
128
+ <div class="panel">
129
+ <h3>behavior.viewport</h3>
130
+ <pre id="vp-snap">—</pre>
131
+ </div>
132
+ </div>
133
+
134
+ <div id="logs"></div>
135
+
136
+ <section id="hero" class="section" data-vp="hero">
137
+ <h2>Hero</h2>
138
+ <p>Alvo: hero</p>
139
+ </section>
140
+ <section id="pricing" class="section" data-vp="pricing">
141
+ <h2>Pricing</h2>
142
+ <p>Alvo: pricing</p>
143
+ <div class="card" data-vp-card>Card A</div>
144
+ <div class="card" data-vp-card>Card B</div>
145
+ <div class="card" data-vp-card>Card C</div>
146
+ </section>
147
+ <section id="checkout-cta" class="section" data-vp="checkout">
148
+ <h2>Checkout CTA</h2>
149
+ <button type="button">Comprar (fictício)</button>
150
+ </section>
151
+ <div id="dynamic-zone">
152
+ <p>Zona dinâmica</p>
153
+ </div>
154
+
155
+ <script src="../../../v2/global.global.js"></script>
156
+ <script>
157
+ (function () {
158
+ const { Pixel, DEFAULT_PIXEL_CONFIG } = window.PixelV2;
159
+ const logsEl = document.getElementById('logs');
160
+ const countsEl = document.getElementById('counts');
161
+ const snapEl = document.getElementById('vp-snap');
162
+ let pixel = null;
163
+ let unsubscribe = null;
164
+ let dynCounter = 0;
165
+ const counts = { VIEWPORT_ENTER: 0, VIEWPORT_EXIT: 0, other: 0 };
166
+
167
+ function log(msg, data) {
168
+ const line = document.createElement('div');
169
+ line.textContent =
170
+ '[' +
171
+ new Date().toISOString().slice(11, 23) +
172
+ '] ' +
173
+ msg +
174
+ (data !== undefined ? ' ' + JSON.stringify(data) : '');
175
+ logsEl.prepend(line);
176
+ }
177
+
178
+ function refresh() {
179
+ countsEl.textContent = JSON.stringify(counts, null, 2);
180
+ if (!pixel) {
181
+ snapEl.textContent = 'null';
182
+ return;
183
+ }
184
+ const snap = pixel.getDebugSnapshot();
185
+ snapEl.textContent = JSON.stringify(
186
+ {
187
+ configuredTrackers: snap.behavior.configuredTrackers,
188
+ configuredEngines: snap.behavior.configuredEngines,
189
+ viewport: snap.behavior.viewport,
190
+ },
191
+ null,
192
+ 2
193
+ );
194
+ }
195
+
196
+ function buildConfig() {
197
+ return {
198
+ ...DEFAULT_PIXEL_CONFIG,
199
+ identity: {
200
+ ...DEFAULT_PIXEL_CONFIG.identity,
201
+ pixelId: 'viewport-demo',
202
+ },
203
+ transport: {
204
+ ...DEFAULT_PIXEL_CONFIG.transport,
205
+ enabled: false,
206
+ },
207
+ modules: {
208
+ ...DEFAULT_PIXEL_CONFIG.modules,
209
+ core: {
210
+ ...DEFAULT_PIXEL_CONFIG.modules.core,
211
+ enabled: true,
212
+ pageView: {
213
+ ...DEFAULT_PIXEL_CONFIG.modules.core.pageView,
214
+ enabled: false,
215
+ trackInitialPageView: false,
216
+ spa: false,
217
+ },
218
+ session: {
219
+ ...DEFAULT_PIXEL_CONFIG.modules.core.session,
220
+ enabled: false,
221
+ },
222
+ },
223
+ privacy: {
224
+ ...DEFAULT_PIXEL_CONFIG.modules.privacy,
225
+ enabled: false,
226
+ },
227
+ conversion: {
228
+ ...DEFAULT_PIXEL_CONFIG.modules.conversion,
229
+ enabled: false,
230
+ },
231
+ integrations: {
232
+ ...DEFAULT_PIXEL_CONFIG.modules.integrations,
233
+ enabled: false,
234
+ },
235
+ behavior: {
236
+ ...DEFAULT_PIXEL_CONFIG.modules.behavior,
237
+ enabled: true,
238
+ heartbeat: {
239
+ ...DEFAULT_PIXEL_CONFIG.modules.behavior.heartbeat,
240
+ enabled: false,
241
+ },
242
+ trackers: {
243
+ ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers,
244
+ scroll: {
245
+ ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers.scroll,
246
+ enabled: false,
247
+ },
248
+ click: {
249
+ ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers.click,
250
+ enabled: false,
251
+ },
252
+ idle: {
253
+ ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers.idle,
254
+ enabled: false,
255
+ },
256
+ visibility: { enabled: false },
257
+ exitIntent: { enabled: false },
258
+ viewport: {
259
+ enabled: true,
260
+ rootMargin: '0px',
261
+ observeMutations: true,
262
+ mutationDebounceMs: 100,
263
+ maxObservedElements: 500,
264
+ targets: [
265
+ {
266
+ key: 'hero',
267
+ selector: '#hero',
268
+ enterThreshold: 0.4,
269
+ exitThreshold: 0.1,
270
+ minVisibleMs: 0,
271
+ trackExit: true,
272
+ once: false,
273
+ },
274
+ {
275
+ key: 'pricing',
276
+ selector: '#pricing',
277
+ enterThreshold: 0.5,
278
+ exitThreshold: 0.2,
279
+ minVisibleMs: 200,
280
+ trackExit: true,
281
+ },
282
+ {
283
+ key: 'checkout',
284
+ selector: '#checkout-cta',
285
+ enterThreshold: 0.5,
286
+ trackExit: true,
287
+ once: true,
288
+ },
289
+ {
290
+ key: 'cards',
291
+ selector: '[data-vp-card]',
292
+ enterThreshold: 0.5,
293
+ exitThreshold: 0,
294
+ once: false,
295
+ },
296
+ {
297
+ key: 'dynamic',
298
+ selector: '[data-vp-dynamic]',
299
+ enterThreshold: 0.3,
300
+ trackExit: true,
301
+ },
302
+ ],
303
+ },
304
+ },
305
+ },
306
+ },
307
+ };
308
+ }
309
+
310
+ function wire() {
311
+ if (!pixel || unsubscribe) return;
312
+ const services = pixel.getDebugServices && pixel.getDebugServices();
313
+ if (!services || !services.dispatcher) return;
314
+ unsubscribe = services.dispatcher.subscribe(function (event) {
315
+ const t = event.type;
316
+ if (t === 'VIEWPORT_ENTER' || t === 'VIEWPORT_EXIT') {
317
+ counts[t] += 1;
318
+ log(t, {
319
+ key: event.key,
320
+ elementId: event.elementId,
321
+ ratio: event.visibilityRatio,
322
+ reason: event.reason,
323
+ });
324
+ } else {
325
+ counts.other += 1;
326
+ }
327
+ refresh();
328
+ });
329
+ }
330
+
331
+ async function doInit() {
332
+ if (pixel && pixel.isInitialized()) {
333
+ log('already initialized');
334
+ return;
335
+ }
336
+ pixel = new Pixel(buildConfig());
337
+ await pixel.init();
338
+ wire();
339
+ log('init ok');
340
+ refresh();
341
+ }
342
+
343
+ async function doDestroy() {
344
+ if (!pixel) return;
345
+ if (unsubscribe) {
346
+ unsubscribe();
347
+ unsubscribe = null;
348
+ }
349
+ await pixel.destroy();
350
+ log('destroy ok');
351
+ refresh();
352
+ }
353
+
354
+ document.getElementById('btn-init').onclick = doInit;
355
+ document.getElementById('btn-destroy').onclick = doDestroy;
356
+ document.getElementById('btn-reinit').onclick = async function () {
357
+ await doDestroy();
358
+ await doInit();
359
+ };
360
+ document.getElementById('btn-snapshot').onclick = function () {
361
+ refresh();
362
+ log('snapshot refreshed');
363
+ };
364
+ document.getElementById('btn-scroll').onclick = function () {
365
+ document.getElementById('pricing').scrollIntoView({
366
+ behavior: 'smooth',
367
+ });
368
+ };
369
+ document.getElementById('btn-add').onclick = function () {
370
+ dynCounter += 1;
371
+ const el = document.createElement('div');
372
+ el.className = 'section';
373
+ el.setAttribute('data-vp-dynamic', '1');
374
+ el.style.background = '#fce7f3';
375
+ el.style.minHeight = '50vh';
376
+ el.textContent = 'Dynamic target #' + dynCounter;
377
+ document.getElementById('dynamic-zone').appendChild(el);
378
+ log('added dynamic', { n: dynCounter });
379
+ };
380
+ document.getElementById('btn-remove').onclick = function () {
381
+ const zone = document.getElementById('dynamic-zone');
382
+ const last = zone.querySelector('[data-vp-dynamic]:last-of-type');
383
+ if (last) {
384
+ last.remove();
385
+ log('removed dynamic');
386
+ }
387
+ };
388
+ document.getElementById('btn-clear').onclick = function () {
389
+ logsEl.textContent = '';
390
+ };
391
+
392
+ refresh();
393
+ log('ready — clique Init (requer dist/v2/global.global.js)');
394
+ })();
395
+ </script>
396
+ </body>
397
+ </html>
package/dist/examples/html-script/{example-behavior.html → behavior/example-behavior.html} RENAMED
@@ -116,8 +116,8 @@
116
116
  <h1>Pixel v2 — Behavior Tracking</h1>
117
117
 
118
118
  <div class="hint">
119
- SCROLL (thresholds + debounce), PAGE_CLICK, RAGE_CLICK (3 cliques / 500ms +
120
- cooldown), VISIBILITY_CHANGE, USER_IDLE / USER_ACTIVE (5s), EXIT_INTENT.
119
+ SCROLL (thresholds + debounce), PAGE_CLICK, RAGE_CLICK (3 cliques / 500ms
120
+ + cooldown), VISIBILITY_CHANGE, USER_IDLE / USER_ACTIVE (5s), EXIT_INTENT.
121
121
  Abra o console para ver cada evento.
122
122
  </div>
123
123
 
@@ -150,7 +150,7 @@
150
150
 
151
151
  <div id="scroll-spacer">Role a página para gerar eventos SCROLL</div>
152
152
 
153
- <script src="../../dist/v2/global.global.js"></script>
153
+ <script src="../../../v2/global.global.js"></script>
154
154
  <script>
155
155
  const { Pixel, DEFAULT_PIXEL_CONFIG } = window.PixelV2;
156
156
 
@@ -284,7 +284,7 @@
284
284
  'dispatcher listeners: ' +
285
285
  listenerCount +
286
286
  '\n' +
287
- 'trackers: scroll, click, visibility, idle, exitIntent';
287
+ 'trackers: scroll, click, visibility, idle, exitIntent · viewport → example-behavior-viewport.html';
288
288
  }
289
289
 
290
290
  function behaviorConfig() {
@@ -313,6 +313,20 @@
313
313
  },
314
314
  behavior: {
315
315
  enabled: true,
316
+ heartbeat: {
317
+ enabled: false,
318
+ intervalMs: 15000,
319
+ hiddenIntervalMs: 60000,
320
+ emitWhenHidden: false,
321
+ emitWhenIdle: true,
322
+ includeSnapshot: true,
323
+ fireImmediately: false,
324
+ },
325
+ engagement: {
326
+ enabled: false,
327
+ weights: { scroll: 0.3, click: 0.3, time: 0.25 },
328
+ thresholds: { low: 30, medium: 70 },
329
+ },
316
330
  trackers: {
317
331
  scroll: {
318
332
  enabled: true,
@@ -335,19 +349,11 @@
335
349
  exitIntent: { enabled: true },
336
350
  viewport: {
337
351
  enabled: false,
338
- selector: '',
339
- selectorType: 'attribute',
340
- visibilityThreshold: 0.5,
341
- },
342
- heartbeat: {
343
- enabled: false,
344
- intervalMs: 5000,
345
- hiddenIntervalMs: 30000,
346
- },
347
- engagement: {
348
- enabled: false,
349
- weights: { scroll: 0.3, click: 0.3, time: 0.25 },
350
- thresholds: { low: 30, medium: 70 },
352
+ targets: [],
353
+ rootMargin: '0px',
354
+ observeMutations: true,
355
+ mutationDebounceMs: 100,
356
+ maxObservedElements: 500,
351
357
  },
352
358
  },
353
359
  },
package/dist/examples/html-script/buygoods/example-buygoods-checkout.html ADDED
@@ -0,0 +1,50 @@
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 — BuyGoods checkout</title>
7
+ <script src="../../../browser/pixel.buygoods-checkout.global.js"></script>
8
+ </head>
9
+
10
+ <body>
11
+ <h1>Pixel — BuyGoods checkout</h1>
12
+ <p>
13
+ Um script, sem settings. O preset sobe para <code>window.top</code>
14
+ (Funnel Pixels / iframe), lê <code>subid4</code> da URL e dispara
15
+ PAGE_VIEW, ADD_TO_CART e ADD_PAYMENT_INFO. Em produção:
16
+ <code>https://unpkg.com/@beworke/pixel@latest/dist/browser/pixel.buygoods-checkout.global.js</code>
17
+ </p>
18
+ <pre id="status">aguardando init…</pre>
19
+
20
+ <script>
21
+ (function () {
22
+ var status = document.getElementById('status');
23
+ function done(pixel) {
24
+ status.textContent =
25
+ pixel && pixel.isInitialized && pixel.isInitialized()
26
+ ? 'Pixel inicializado'
27
+ : 'Pixel não inicializado';
28
+ }
29
+ function fail(error) {
30
+ console.error(error);
31
+ status.textContent =
32
+ error && error.message ? error.message : String(error);
33
+ }
34
+ var pending =
35
+ window.Pixel && window.Pixel.getPending && window.Pixel.getPending();
36
+ if (pending) {
37
+ pending.then(done).catch(fail);
38
+ return;
39
+ }
40
+ var instance =
41
+ window.Pixel && window.Pixel.getInstance && window.Pixel.getInstance();
42
+ if (instance) {
43
+ done(instance);
44
+ return;
45
+ }
46
+ status.textContent = 'preset não encontrado';
47
+ })();
48
+ </script>
49
+ </body>
50
+ </html>
package/dist/examples/html-script/buygoods/ladding.html ADDED
@@ -0,0 +1,184 @@
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 — BuyGoods landing (alp1)</title>
7
+ <script src="../../../browser/pixel.buygoods-landing.global.js"></script>
8
+ <style>
9
+ :root {
10
+ color-scheme: light;
11
+ --bg: #f4f1ea;
12
+ --ink: #1c1917;
13
+ --muted: #78716c;
14
+ --card: #fffdf8;
15
+ --line: #e7e0d4;
16
+ --accent: #b45309;
17
+ --accent-ink: #fff7ed;
18
+ }
19
+ * {
20
+ box-sizing: border-box;
21
+ }
22
+ body {
23
+ margin: 0;
24
+ min-height: 100vh;
25
+ font-family: Georgia, 'Times New Roman', serif;
26
+ background: var(--bg);
27
+ color: var(--ink);
28
+ }
29
+ main {
30
+ max-width: 720px;
31
+ margin: 0 auto;
32
+ padding: 2.5rem 1.25rem 4rem;
33
+ }
34
+ .eyebrow {
35
+ font-family: system-ui, sans-serif;
36
+ font-size: 0.75rem;
37
+ letter-spacing: 0.14em;
38
+ text-transform: uppercase;
39
+ color: var(--muted);
40
+ margin: 0 0 0.5rem;
41
+ }
42
+ h1 {
43
+ font-size: 2rem;
44
+ line-height: 1.15;
45
+ margin: 0 0 0.75rem;
46
+ }
47
+ .lede {
48
+ font-family: system-ui, sans-serif;
49
+ color: var(--muted);
50
+ line-height: 1.5;
51
+ margin: 0 0 1.75rem;
52
+ }
53
+ .card {
54
+ background: var(--card);
55
+ border: 1px solid var(--line);
56
+ border-radius: 18px;
57
+ overflow: hidden;
58
+ box-shadow: 0 18px 40px rgba(28, 25, 23, 0.06);
59
+ }
60
+ .card-visual {
61
+ min-height: 180px;
62
+ padding: 1.5rem;
63
+ background:
64
+ radial-gradient(circle at 20% 20%, #fde68a 0, transparent 42%),
65
+ linear-gradient(135deg, #292524, #44403c);
66
+ color: #fff7ed;
67
+ }
68
+ .card-visual p {
69
+ margin: 0;
70
+ font-family: system-ui, sans-serif;
71
+ font-size: 0.75rem;
72
+ letter-spacing: 0.12em;
73
+ text-transform: uppercase;
74
+ opacity: 0.7;
75
+ }
76
+ .card-visual strong {
77
+ display: block;
78
+ margin-top: 0.65rem;
79
+ font-size: 1.7rem;
80
+ }
81
+ .card-body {
82
+ padding: 1.35rem 1.4rem 1.5rem;
83
+ }
84
+ .card-body h2 {
85
+ margin: 0 0 0.4rem;
86
+ font-size: 1.35rem;
87
+ }
88
+ .card-body p {
89
+ margin: 0 0 1.15rem;
90
+ font-family: system-ui, sans-serif;
91
+ color: var(--muted);
92
+ font-size: 0.95rem;
93
+ line-height: 1.5;
94
+ }
95
+ .cta {
96
+ display: inline-flex;
97
+ align-items: center;
98
+ justify-content: center;
99
+ width: 100%;
100
+ padding: 0.9rem 1rem;
101
+ border-radius: 999px;
102
+ background: var(--accent);
103
+ color: var(--accent-ink);
104
+ text-decoration: none;
105
+ font-family: system-ui, sans-serif;
106
+ font-weight: 700;
107
+ }
108
+ .meta {
109
+ margin-top: 1.25rem;
110
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
111
+ font-size: 0.75rem;
112
+ background: #1c1917;
113
+ color: #f5f5f4;
114
+ border-radius: 12px;
115
+ padding: 0.9rem 1rem;
116
+ overflow: auto;
117
+ white-space: pre-wrap;
118
+ word-break: break-all;
119
+ }
120
+ </style>
121
+ </head>
122
+
123
+ <body>
124
+ <main>
125
+ <p class="eyebrow">BuyGoods · landing</p>
126
+ <h1>ALP1</h1>
127
+ <p class="lede">
128
+ O Pixel gera <code>subid4</code> aqui e decora todos os links com
129
+ <code>subid4</code> + UTMs e demais params da URL de entrada. O
130
+ checkout da BuyGoods só lê a query no primeiro acesso — por isso o
131
+ parâmetro precisa já ir no href. Em produção:
132
+ <code>https://unpkg.com/@beworke/pixel@latest/dist/browser/pixel.buygoods-landing.global.js</code>
133
+ </p>
134
+
135
+ <article class="card">
136
+ <div class="card-visual">
137
+ <p>Produto</p>
138
+ <strong>ALP1</strong>
139
+ </div>
140
+ <div class="card-body">
141
+ <h2>Checkout seguro</h2>
142
+ <p>
143
+ account_id 9857 · aff_id 74. Abra esta landing com UTMs, por
144
+ exemplo
145
+ <code>?utm_source=facebook&amp;utm_medium=cpc&amp;utm_campaign=alp1</code>.
146
+ </p>
147
+ <a
148
+ id="checkout-cta"
149
+ class="cta"
150
+ href="https://buygoods.com/secure/checkout.html?account_id=9857&amp;product_codename=alp1&amp;redirect=aHR0cHM6Ly9idXlnb29kcy5jb20vdGhhbmt5b3U%2FYWNjb3VudF9pZD05ODU3&amp;aff_id=74&amp;subid5=b2lkPW9mZl84OTY1ODUyJmFpZD1hZmYxMTU3MjIyJnVpZD1ibF8yNTg1MjA4"
151
+ >Ir para o checkout</a
152
+ >
153
+ </div>
154
+ </article>
155
+
156
+ <pre id="status" class="meta">aguardando init…</pre>
157
+ </main>
158
+
159
+ <script>
160
+ (function () {
161
+ var status = document.getElementById('status');
162
+ function render() {
163
+ var cta = document.getElementById('checkout-cta');
164
+ status.textContent =
165
+ 'landing href:\n' +
166
+ location.href +
167
+ '\n\ncheckout decorado:\n' +
168
+ (cta ? cta.getAttribute('href') : '');
169
+ }
170
+ function fail(error) {
171
+ status.textContent =
172
+ error && error.message ? error.message : String(error);
173
+ }
174
+ var pending =
175
+ window.Pixel && window.Pixel.getPending && window.Pixel.getPending();
176
+ if (pending) {
177
+ pending.then(render).catch(fail);
178
+ return;
179
+ }
180
+ render();
181
+ })();
182
+ </script>
183
+ </body>
184
+ </html>