@beworke/pixel-bemony 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.
- package/CHANGELOG.md +157 -0
- package/README.md +176 -0
- package/RELEASE_CANDIDATE.md +37 -0
- package/dist/browser/index.cjs.js +2598 -0
- package/dist/browser/index.cjs.js.map +1 -0
- package/dist/browser/index.d.mts +184 -0
- package/dist/browser/index.d.ts +184 -0
- package/dist/browser/index.esm.js +2557 -0
- package/dist/browser/index.esm.js.map +1 -0
- package/dist/browser/pixel-bemony.global.js +9848 -0
- package/dist/browser/pixel-bemony.global.js.map +1 -0
- package/dist/createBemonyPixel-BGRD66p-.d.mts +474 -0
- package/dist/createBemonyPixel-BGRD66p-.d.ts +474 -0
- package/dist/index.cjs.js +2154 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.mts +320 -0
- package/dist/index.d.ts +320 -0
- package/dist/index.esm.js +2081 -0
- package/dist/index.esm.js.map +1 -0
- package/docs/BACKEND_PURCHASE_AND_REDIRECTS.md +125 -0
- package/docs/BROWSER_EVENT_ENRICHMENT.md +116 -0
- package/docs/SCENARIOS.md +92 -0
- package/docs/SECURITY_LIMITATIONS.md +45 -0
- package/docs/TEST_MATRIX.md +39 -0
- package/docs/TROUBLESHOOTING.md +81 -0
- package/examples/README.md +73 -0
- package/examples/browser-bootstrap.html +47 -0
- package/examples/checkout-price-code.html +37 -0
- package/examples/funnel/donsell/downsell_1.html +130 -0
- package/examples/funnel/donsell/downsell_2.html +130 -0
- package/examples/funnel/donsell/downsell_3.html +130 -0
- package/examples/funnel/offer-page.html +105 -0
- package/examples/funnel/upsell/upsell_1.html +130 -0
- package/examples/funnel/upsell/upsell_2.html +130 -0
- package/examples/funnel/upsell/upsell_3.html +139 -0
- package/examples/offer-page-price-code.html +22 -0
- package/examples/one-click-price-code.html +38 -0
- package/examples/security/checkout-sim.css +408 -0
- package/examples/security/checkout-sim.js +414 -0
- package/examples/security/one-click/pri_downsell_1.html +85 -0
- package/examples/security/one-click/pri_downsell_1a.html +85 -0
- package/examples/security/one-click/pri_downsell_1b.html +78 -0
- package/examples/security/one-click/pri_downsell_2.html +78 -0
- package/examples/security/one-click/pri_downsell_2a.html +78 -0
- package/examples/security/one-click/pri_downsell_2b.html +78 -0
- package/examples/security/one-click/pri_downsell_3.html +78 -0
- package/examples/security/one-click/pri_downsell_3a.html +78 -0
- package/examples/security/one-click/pri_downsell_3b.html +78 -0
- package/examples/security/one-click/pri_upsell_1.html +78 -0
- package/examples/security/one-click/pri_upsell_1a.html +78 -0
- package/examples/security/one-click/pri_upsell_1b.html +78 -0
- package/examples/security/one-click/pri_upsell_2.html +78 -0
- package/examples/security/one-click/pri_upsell_2a.html +78 -0
- package/examples/security/one-click/pri_upsell_2b.html +78 -0
- package/examples/security/one-click/pri_upsell_3.html +78 -0
- package/examples/security/one-click/pri_upsell_3a.html +78 -0
- package/examples/security/one-click/pri_upsell_3b.html +78 -0
- package/examples/security/one-click/pri_upsell_3c.html +78 -0
- package/examples/security/pri1766322.html +333 -0
- package/examples/security/pri5529930.html +333 -0
- package/examples/security/pri6670988.html +334 -0
- package/examples/security/thank-you.html +65 -0
- package/examples/sim/funnel-flow.js +258 -0
- package/examples/sim/one-click-sim.js +167 -0
- package/examples/upsell-price-code.html +41 -0
- package/examples/url-context-navigation.html +96 -0
- package/package.json +63 -0
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="pt-BR">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Funnel · Downsell 3</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
font-family: Georgia, 'Times New Roman', serif;
|
|
10
|
+
max-width: 36rem;
|
|
11
|
+
margin: 0 auto;
|
|
12
|
+
padding: 2rem 1rem;
|
|
13
|
+
color: #162018;
|
|
14
|
+
line-height: 1.5;
|
|
15
|
+
}
|
|
16
|
+
.offer-card {
|
|
17
|
+
margin: 1.25rem 0;
|
|
18
|
+
padding: 1.1rem 1rem 1rem;
|
|
19
|
+
border: 1px solid #c5d0c8;
|
|
20
|
+
border-radius: 6px;
|
|
21
|
+
background: rgba(255, 255, 255, 0.55);
|
|
22
|
+
}
|
|
23
|
+
.offer-card h2 {
|
|
24
|
+
margin: 0 0 0.35rem;
|
|
25
|
+
font-size: 1.15rem;
|
|
26
|
+
}
|
|
27
|
+
.offer-card p {
|
|
28
|
+
margin: 0 0 0.85rem;
|
|
29
|
+
font-size: 0.95rem;
|
|
30
|
+
color: #3a4a40;
|
|
31
|
+
}
|
|
32
|
+
.offer-card .price {
|
|
33
|
+
font-weight: 700;
|
|
34
|
+
margin-bottom: 0.75rem;
|
|
35
|
+
}
|
|
36
|
+
a.accept,
|
|
37
|
+
a.decline {
|
|
38
|
+
display: block;
|
|
39
|
+
margin: 0.5rem 0 0;
|
|
40
|
+
padding: 0.85rem 1rem;
|
|
41
|
+
text-decoration: none;
|
|
42
|
+
text-align: center;
|
|
43
|
+
border-radius: 4px;
|
|
44
|
+
}
|
|
45
|
+
.accept {
|
|
46
|
+
background: #122019;
|
|
47
|
+
color: #fff;
|
|
48
|
+
}
|
|
49
|
+
.decline {
|
|
50
|
+
border: 1px solid #9aa89f;
|
|
51
|
+
color: #243028;
|
|
52
|
+
margin-top: 1.25rem;
|
|
53
|
+
}
|
|
54
|
+
pre {
|
|
55
|
+
background: #142019;
|
|
56
|
+
color: #dceee6;
|
|
57
|
+
padding: 0.85rem;
|
|
58
|
+
font-size: 0.72rem;
|
|
59
|
+
overflow: auto;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
body {
|
|
63
|
+
background: linear-gradient(180deg, #f3efe6, #e7f0ea);
|
|
64
|
+
}
|
|
65
|
+
</style>
|
|
66
|
+
</head>
|
|
67
|
+
<body>
|
|
68
|
+
<p>Bemony · página externa</p>
|
|
69
|
+
<h1>Downsell 3</h1>
|
|
70
|
+
<p>
|
|
71
|
+
Buy links: <code>href</code> com <code>/pri*</code> (identidade na URL).
|
|
72
|
+
Recusa: <code>data-no-thanks</code> no <strong>script</strong> (mesmo
|
|
73
|
+
<code>href</code> no link de decline). O Pixel decora buy + esse href
|
|
74
|
+
(<code>sid</code>/<code>oid</code>…) e trackeia o aceite.
|
|
75
|
+
</p>
|
|
76
|
+
|
|
77
|
+
<article class="offer-card">
|
|
78
|
+
<h2>Última chance</h2>
|
|
79
|
+
<p>Desconto final desta etapa.</p>
|
|
80
|
+
<div class="price">R$ 7</div>
|
|
81
|
+
<a class="accept" href="../../security/one-click/pri_downsell_3a.html"
|
|
82
|
+
>Quero esta oferta</a
|
|
83
|
+
>
|
|
84
|
+
</article>
|
|
85
|
+
|
|
86
|
+
<article class="offer-card">
|
|
87
|
+
<h2>Trial 7 dias</h2>
|
|
88
|
+
<p>Teste sem compromisso.</p>
|
|
89
|
+
<div class="price">R$ 1</div>
|
|
90
|
+
<a class="accept" href="../../security/one-click/pri_downsell_3b.html"
|
|
91
|
+
>Quero esta oferta</a
|
|
92
|
+
>
|
|
93
|
+
</article>
|
|
94
|
+
<a class="decline" href="../../security/thank-you.html">Não, obrigado</a>
|
|
95
|
+
<pre id="funnel-debug">aguardando…</pre>
|
|
96
|
+
<script
|
|
97
|
+
src="../../../dist/browser/pixel-bemony.global.js"
|
|
98
|
+
data-scenario="upsell-offer"
|
|
99
|
+
data-funnel-id="funnel_1"
|
|
100
|
+
data-funnel-step-id="step_downsell_3"
|
|
101
|
+
data-no-thanks="../../security/thank-you.html"
|
|
102
|
+
data-debug="true"
|
|
103
|
+
></script>
|
|
104
|
+
<script>
|
|
105
|
+
// Debug only — não altera hrefs nem resolve click.
|
|
106
|
+
(window.BemonyPixel && window.BemonyPixel.whenReady
|
|
107
|
+
? window.BemonyPixel.whenReady()
|
|
108
|
+
: Promise.reject()
|
|
109
|
+
)
|
|
110
|
+
.then(function (pixel) {
|
|
111
|
+
var el = document.getElementById('funnel-debug');
|
|
112
|
+
if (!el) return;
|
|
113
|
+
el.textContent = JSON.stringify(
|
|
114
|
+
{
|
|
115
|
+
scenario: pixel.getScenario(),
|
|
116
|
+
sid: pixel.getPublicSessionId(),
|
|
117
|
+
oid: pixel.getPublicOrderId && pixel.getPublicOrderId(),
|
|
118
|
+
note: 'buy=/pri* ; no-thanks=script data-no-thanks → mesmo href',
|
|
119
|
+
},
|
|
120
|
+
null,
|
|
121
|
+
2
|
|
122
|
+
);
|
|
123
|
+
})
|
|
124
|
+
.catch(function () {
|
|
125
|
+
var el = document.getElementById('funnel-debug');
|
|
126
|
+
if (el) el.textContent = 'pixel não pronto';
|
|
127
|
+
});
|
|
128
|
+
</script>
|
|
129
|
+
</body>
|
|
130
|
+
</html>
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="pt-BR">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Funnel · Offer page (domínio cliente)</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
font-family: Georgia, 'Times New Roman', serif;
|
|
10
|
+
max-width: 40rem;
|
|
11
|
+
margin: 0 auto;
|
|
12
|
+
padding: 2rem 1rem 4rem;
|
|
13
|
+
line-height: 1.5;
|
|
14
|
+
background: linear-gradient(165deg, #f7f3ea, #e8efe8);
|
|
15
|
+
color: #1a1f1c;
|
|
16
|
+
}
|
|
17
|
+
h1 {
|
|
18
|
+
font-size: 1.75rem;
|
|
19
|
+
margin: 0 0 0.5rem;
|
|
20
|
+
}
|
|
21
|
+
.card {
|
|
22
|
+
display: block;
|
|
23
|
+
margin: 0.75rem 0;
|
|
24
|
+
padding: 0.85rem 1rem;
|
|
25
|
+
background: #122019;
|
|
26
|
+
color: #f4f7f5;
|
|
27
|
+
text-decoration: none;
|
|
28
|
+
border-radius: 4px;
|
|
29
|
+
}
|
|
30
|
+
.card small {
|
|
31
|
+
display: block;
|
|
32
|
+
opacity: 0.75;
|
|
33
|
+
font-size: 0.8rem;
|
|
34
|
+
}
|
|
35
|
+
pre {
|
|
36
|
+
background: #13201b;
|
|
37
|
+
color: #d7ece4;
|
|
38
|
+
padding: 1rem;
|
|
39
|
+
overflow: auto;
|
|
40
|
+
font-size: 0.75rem;
|
|
41
|
+
}
|
|
42
|
+
.hint {
|
|
43
|
+
font-size: 0.9rem;
|
|
44
|
+
color: #3a4a42;
|
|
45
|
+
}
|
|
46
|
+
</style>
|
|
47
|
+
</head>
|
|
48
|
+
<body>
|
|
49
|
+
<p>Bemony · página externa</p>
|
|
50
|
+
<h1>Offer page</h1>
|
|
51
|
+
<p class="hint">
|
|
52
|
+
Scenario <code>offer-page</code> · priceCode via links <code>/pri*</code>
|
|
53
|
+
<code>funnel_1 / step_offer</code>. CTAs relativos ao checkout Bemony
|
|
54
|
+
(<code>examples/security</code>). Sirva via HTTP e abra com
|
|
55
|
+
<code>?utm_source=demo&afid=aff_demo</code>.
|
|
56
|
+
</p>
|
|
57
|
+
|
|
58
|
+
<a class="card" id="cta-1" href="../security/pri6670988.html">
|
|
59
|
+
Oferta 1 — USD 97
|
|
60
|
+
<small>pri6670988 → checkout Bemony</small>
|
|
61
|
+
</a>
|
|
62
|
+
<a class="card" id="cta-2" href="../security/pri5529930.html">
|
|
63
|
+
Oferta 2 — USD 197
|
|
64
|
+
<small>pri5529930 → checkout Bemony</small>
|
|
65
|
+
</a>
|
|
66
|
+
<a class="card" id="cta-3" href="../security/pri1766322.html">
|
|
67
|
+
Oferta 3 — USD 47
|
|
68
|
+
<small>pri1766322 → checkout Bemony</small>
|
|
69
|
+
</a>
|
|
70
|
+
|
|
71
|
+
<h2>Contexto resolvido</h2>
|
|
72
|
+
<pre id="funnel-debug">aguardando…</pre>
|
|
73
|
+
|
|
74
|
+
<script src="../sim/funnel-flow.js"></script>
|
|
75
|
+
<script
|
|
76
|
+
src="../../dist/browser/pixel-bemony.global.js"
|
|
77
|
+
data-scenario="offer-page"
|
|
78
|
+
data-funnel-id="funnel_1"
|
|
79
|
+
data-funnel-step-id="step_offer"
|
|
80
|
+
data-debug="true"
|
|
81
|
+
></script>
|
|
82
|
+
<script>
|
|
83
|
+
(function () {
|
|
84
|
+
var sim = window.BemonyFunnelSim;
|
|
85
|
+
['cta-1', 'cta-2', 'cta-3'].forEach(function (id) {
|
|
86
|
+
var a = document.getElementById(id);
|
|
87
|
+
if (!a) return;
|
|
88
|
+
a.href = sim.withParams(a.getAttribute('href'));
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
sim
|
|
92
|
+
.whenReady()
|
|
93
|
+
.then(function (pixel) {
|
|
94
|
+
sim.logPixel('offer-page', pixel);
|
|
95
|
+
sim.wireDebugPanel(pixel);
|
|
96
|
+
})
|
|
97
|
+
.catch(function (err) {
|
|
98
|
+
document.getElementById('funnel-debug').textContent = String(
|
|
99
|
+
err && err.message ? err.message : err
|
|
100
|
+
);
|
|
101
|
+
});
|
|
102
|
+
})();
|
|
103
|
+
</script>
|
|
104
|
+
</body>
|
|
105
|
+
</html>
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="pt-BR">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Funnel · Upsell 1</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
font-family: Georgia, 'Times New Roman', serif;
|
|
10
|
+
max-width: 36rem;
|
|
11
|
+
margin: 0 auto;
|
|
12
|
+
padding: 2rem 1rem;
|
|
13
|
+
color: #162018;
|
|
14
|
+
line-height: 1.5;
|
|
15
|
+
}
|
|
16
|
+
.offer-card {
|
|
17
|
+
margin: 1.25rem 0;
|
|
18
|
+
padding: 1.1rem 1rem 1rem;
|
|
19
|
+
border: 1px solid #c5d0c8;
|
|
20
|
+
border-radius: 6px;
|
|
21
|
+
background: rgba(255, 255, 255, 0.55);
|
|
22
|
+
}
|
|
23
|
+
.offer-card h2 {
|
|
24
|
+
margin: 0 0 0.35rem;
|
|
25
|
+
font-size: 1.15rem;
|
|
26
|
+
}
|
|
27
|
+
.offer-card p {
|
|
28
|
+
margin: 0 0 0.85rem;
|
|
29
|
+
font-size: 0.95rem;
|
|
30
|
+
color: #3a4a40;
|
|
31
|
+
}
|
|
32
|
+
.offer-card .price {
|
|
33
|
+
font-weight: 700;
|
|
34
|
+
margin-bottom: 0.75rem;
|
|
35
|
+
}
|
|
36
|
+
a.accept,
|
|
37
|
+
a.decline {
|
|
38
|
+
display: block;
|
|
39
|
+
margin: 0.5rem 0 0;
|
|
40
|
+
padding: 0.85rem 1rem;
|
|
41
|
+
text-decoration: none;
|
|
42
|
+
text-align: center;
|
|
43
|
+
border-radius: 4px;
|
|
44
|
+
}
|
|
45
|
+
.accept {
|
|
46
|
+
background: #122019;
|
|
47
|
+
color: #fff;
|
|
48
|
+
}
|
|
49
|
+
.decline {
|
|
50
|
+
border: 1px solid #9aa89f;
|
|
51
|
+
color: #243028;
|
|
52
|
+
margin-top: 1.25rem;
|
|
53
|
+
}
|
|
54
|
+
pre {
|
|
55
|
+
background: #142019;
|
|
56
|
+
color: #dceee6;
|
|
57
|
+
padding: 0.85rem;
|
|
58
|
+
font-size: 0.72rem;
|
|
59
|
+
overflow: auto;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
body {
|
|
63
|
+
background: linear-gradient(180deg, #eef4f1, #f8f6f0);
|
|
64
|
+
}
|
|
65
|
+
</style>
|
|
66
|
+
</head>
|
|
67
|
+
<body>
|
|
68
|
+
<p>Bemony · página externa</p>
|
|
69
|
+
<h1>Upsell 1</h1>
|
|
70
|
+
<p>
|
|
71
|
+
Buy links: <code>href</code> com <code>/pri*</code> (identidade na URL).
|
|
72
|
+
Recusa: <code>data-no-thanks</code> no <strong>script</strong> (mesmo
|
|
73
|
+
<code>href</code> no link de decline). O Pixel decora buy + esse href
|
|
74
|
+
(<code>sid</code>/<code>oid</code>…) e trackeia o aceite.
|
|
75
|
+
</p>
|
|
76
|
+
|
|
77
|
+
<article class="offer-card">
|
|
78
|
+
<h2>Upgrade Premium</h2>
|
|
79
|
+
<p>Acesso completo + bônus exclusivos.</p>
|
|
80
|
+
<div class="price">R$ 97</div>
|
|
81
|
+
<a class="accept" href="../../security/one-click/pri_upsell_1a.html"
|
|
82
|
+
>Quero esta oferta</a
|
|
83
|
+
>
|
|
84
|
+
</article>
|
|
85
|
+
|
|
86
|
+
<article class="offer-card">
|
|
87
|
+
<h2>Upgrade Essencial</h2>
|
|
88
|
+
<p>Pacote intermediário com suporte.</p>
|
|
89
|
+
<div class="price">R$ 47</div>
|
|
90
|
+
<a class="accept" href="../../security/one-click/pri_upsell_1b.html"
|
|
91
|
+
>Quero esta oferta</a
|
|
92
|
+
>
|
|
93
|
+
</article>
|
|
94
|
+
<a class="decline" href="../donsell/downsell_1.html">Não, obrigado</a>
|
|
95
|
+
<pre id="funnel-debug">aguardando…</pre>
|
|
96
|
+
<script
|
|
97
|
+
src="../../../dist/browser/pixel-bemony.global.js"
|
|
98
|
+
data-scenario="upsell-offer"
|
|
99
|
+
data-funnel-id="funnel_1"
|
|
100
|
+
data-funnel-step-id="step_upsell_1"
|
|
101
|
+
data-no-thanks="../donsell/downsell_1.html"
|
|
102
|
+
data-debug="true"
|
|
103
|
+
></script>
|
|
104
|
+
<script>
|
|
105
|
+
// Debug only — não altera hrefs nem resolve click.
|
|
106
|
+
(window.BemonyPixel && window.BemonyPixel.whenReady
|
|
107
|
+
? window.BemonyPixel.whenReady()
|
|
108
|
+
: Promise.reject()
|
|
109
|
+
)
|
|
110
|
+
.then(function (pixel) {
|
|
111
|
+
var el = document.getElementById('funnel-debug');
|
|
112
|
+
if (!el) return;
|
|
113
|
+
el.textContent = JSON.stringify(
|
|
114
|
+
{
|
|
115
|
+
scenario: pixel.getScenario(),
|
|
116
|
+
sid: pixel.getPublicSessionId(),
|
|
117
|
+
oid: pixel.getPublicOrderId && pixel.getPublicOrderId(),
|
|
118
|
+
note: 'buy=/pri* ; no-thanks=script data-no-thanks → mesmo href',
|
|
119
|
+
},
|
|
120
|
+
null,
|
|
121
|
+
2
|
|
122
|
+
);
|
|
123
|
+
})
|
|
124
|
+
.catch(function () {
|
|
125
|
+
var el = document.getElementById('funnel-debug');
|
|
126
|
+
if (el) el.textContent = 'pixel não pronto';
|
|
127
|
+
});
|
|
128
|
+
</script>
|
|
129
|
+
</body>
|
|
130
|
+
</html>
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="pt-BR">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Funnel · Upsell 2</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
font-family: Georgia, 'Times New Roman', serif;
|
|
10
|
+
max-width: 36rem;
|
|
11
|
+
margin: 0 auto;
|
|
12
|
+
padding: 2rem 1rem;
|
|
13
|
+
color: #162018;
|
|
14
|
+
line-height: 1.5;
|
|
15
|
+
}
|
|
16
|
+
.offer-card {
|
|
17
|
+
margin: 1.25rem 0;
|
|
18
|
+
padding: 1.1rem 1rem 1rem;
|
|
19
|
+
border: 1px solid #c5d0c8;
|
|
20
|
+
border-radius: 6px;
|
|
21
|
+
background: rgba(255, 255, 255, 0.55);
|
|
22
|
+
}
|
|
23
|
+
.offer-card h2 {
|
|
24
|
+
margin: 0 0 0.35rem;
|
|
25
|
+
font-size: 1.15rem;
|
|
26
|
+
}
|
|
27
|
+
.offer-card p {
|
|
28
|
+
margin: 0 0 0.85rem;
|
|
29
|
+
font-size: 0.95rem;
|
|
30
|
+
color: #3a4a40;
|
|
31
|
+
}
|
|
32
|
+
.offer-card .price {
|
|
33
|
+
font-weight: 700;
|
|
34
|
+
margin-bottom: 0.75rem;
|
|
35
|
+
}
|
|
36
|
+
a.accept,
|
|
37
|
+
a.decline {
|
|
38
|
+
display: block;
|
|
39
|
+
margin: 0.5rem 0 0;
|
|
40
|
+
padding: 0.85rem 1rem;
|
|
41
|
+
text-decoration: none;
|
|
42
|
+
text-align: center;
|
|
43
|
+
border-radius: 4px;
|
|
44
|
+
}
|
|
45
|
+
.accept {
|
|
46
|
+
background: #122019;
|
|
47
|
+
color: #fff;
|
|
48
|
+
}
|
|
49
|
+
.decline {
|
|
50
|
+
border: 1px solid #9aa89f;
|
|
51
|
+
color: #243028;
|
|
52
|
+
margin-top: 1.25rem;
|
|
53
|
+
}
|
|
54
|
+
pre {
|
|
55
|
+
background: #142019;
|
|
56
|
+
color: #dceee6;
|
|
57
|
+
padding: 0.85rem;
|
|
58
|
+
font-size: 0.72rem;
|
|
59
|
+
overflow: auto;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
body {
|
|
63
|
+
background: linear-gradient(180deg, #eef4f1, #f8f6f0);
|
|
64
|
+
}
|
|
65
|
+
</style>
|
|
66
|
+
</head>
|
|
67
|
+
<body>
|
|
68
|
+
<p>Bemony · página externa</p>
|
|
69
|
+
<h1>Upsell 2</h1>
|
|
70
|
+
<p>
|
|
71
|
+
Buy links: <code>href</code> com <code>/pri*</code> (identidade na URL).
|
|
72
|
+
Recusa: <code>data-no-thanks</code> no <strong>script</strong> (mesmo
|
|
73
|
+
<code>href</code> no link de decline). O Pixel decora buy + esse href
|
|
74
|
+
(<code>sid</code>/<code>oid</code>…) e trackeia o aceite.
|
|
75
|
+
</p>
|
|
76
|
+
|
|
77
|
+
<article class="offer-card">
|
|
78
|
+
<h2>Mentoria mensal</h2>
|
|
79
|
+
<p>Acompanhamento por 30 dias.</p>
|
|
80
|
+
<div class="price">R$ 197</div>
|
|
81
|
+
<a class="accept" href="../../security/one-click/pri_upsell_2a.html"
|
|
82
|
+
>Quero esta oferta</a
|
|
83
|
+
>
|
|
84
|
+
</article>
|
|
85
|
+
|
|
86
|
+
<article class="offer-card">
|
|
87
|
+
<h2>Kit de templates</h2>
|
|
88
|
+
<p>Biblioteca pronta para usar.</p>
|
|
89
|
+
<div class="price">R$ 67</div>
|
|
90
|
+
<a class="accept" href="../../security/one-click/pri_upsell_2b.html"
|
|
91
|
+
>Quero esta oferta</a
|
|
92
|
+
>
|
|
93
|
+
</article>
|
|
94
|
+
<a class="decline" href="../donsell/downsell_2.html">Não, obrigado</a>
|
|
95
|
+
<pre id="funnel-debug">aguardando…</pre>
|
|
96
|
+
<script
|
|
97
|
+
src="../../../dist/browser/pixel-bemony.global.js"
|
|
98
|
+
data-scenario="upsell-offer"
|
|
99
|
+
data-funnel-id="funnel_1"
|
|
100
|
+
data-funnel-step-id="step_upsell_2"
|
|
101
|
+
data-no-thanks="../donsell/downsell_2.html"
|
|
102
|
+
data-debug="true"
|
|
103
|
+
></script>
|
|
104
|
+
<script>
|
|
105
|
+
// Debug only — não altera hrefs nem resolve click.
|
|
106
|
+
(window.BemonyPixel && window.BemonyPixel.whenReady
|
|
107
|
+
? window.BemonyPixel.whenReady()
|
|
108
|
+
: Promise.reject()
|
|
109
|
+
)
|
|
110
|
+
.then(function (pixel) {
|
|
111
|
+
var el = document.getElementById('funnel-debug');
|
|
112
|
+
if (!el) return;
|
|
113
|
+
el.textContent = JSON.stringify(
|
|
114
|
+
{
|
|
115
|
+
scenario: pixel.getScenario(),
|
|
116
|
+
sid: pixel.getPublicSessionId(),
|
|
117
|
+
oid: pixel.getPublicOrderId && pixel.getPublicOrderId(),
|
|
118
|
+
note: 'buy=/pri* ; no-thanks=script data-no-thanks → mesmo href',
|
|
119
|
+
},
|
|
120
|
+
null,
|
|
121
|
+
2
|
|
122
|
+
);
|
|
123
|
+
})
|
|
124
|
+
.catch(function () {
|
|
125
|
+
var el = document.getElementById('funnel-debug');
|
|
126
|
+
if (el) el.textContent = 'pixel não pronto';
|
|
127
|
+
});
|
|
128
|
+
</script>
|
|
129
|
+
</body>
|
|
130
|
+
</html>
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="pt-BR">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Funnel · Upsell 3</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
font-family: Georgia, 'Times New Roman', serif;
|
|
10
|
+
max-width: 36rem;
|
|
11
|
+
margin: 0 auto;
|
|
12
|
+
padding: 2rem 1rem;
|
|
13
|
+
color: #162018;
|
|
14
|
+
line-height: 1.5;
|
|
15
|
+
}
|
|
16
|
+
.offer-card {
|
|
17
|
+
margin: 1.25rem 0;
|
|
18
|
+
padding: 1.1rem 1rem 1rem;
|
|
19
|
+
border: 1px solid #c5d0c8;
|
|
20
|
+
border-radius: 6px;
|
|
21
|
+
background: rgba(255, 255, 255, 0.55);
|
|
22
|
+
}
|
|
23
|
+
.offer-card h2 {
|
|
24
|
+
margin: 0 0 0.35rem;
|
|
25
|
+
font-size: 1.15rem;
|
|
26
|
+
}
|
|
27
|
+
.offer-card p {
|
|
28
|
+
margin: 0 0 0.85rem;
|
|
29
|
+
font-size: 0.95rem;
|
|
30
|
+
color: #3a4a40;
|
|
31
|
+
}
|
|
32
|
+
.offer-card .price {
|
|
33
|
+
font-weight: 700;
|
|
34
|
+
margin-bottom: 0.75rem;
|
|
35
|
+
}
|
|
36
|
+
a.accept,
|
|
37
|
+
a.decline {
|
|
38
|
+
display: block;
|
|
39
|
+
margin: 0.5rem 0 0;
|
|
40
|
+
padding: 0.85rem 1rem;
|
|
41
|
+
text-decoration: none;
|
|
42
|
+
text-align: center;
|
|
43
|
+
border-radius: 4px;
|
|
44
|
+
}
|
|
45
|
+
.accept {
|
|
46
|
+
background: #122019;
|
|
47
|
+
color: #fff;
|
|
48
|
+
}
|
|
49
|
+
.decline {
|
|
50
|
+
border: 1px solid #9aa89f;
|
|
51
|
+
color: #243028;
|
|
52
|
+
margin-top: 1.25rem;
|
|
53
|
+
}
|
|
54
|
+
pre {
|
|
55
|
+
background: #142019;
|
|
56
|
+
color: #dceee6;
|
|
57
|
+
padding: 0.85rem;
|
|
58
|
+
font-size: 0.72rem;
|
|
59
|
+
overflow: auto;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
body {
|
|
63
|
+
background: linear-gradient(180deg, #eef4f1, #f8f6f0);
|
|
64
|
+
}
|
|
65
|
+
</style>
|
|
66
|
+
</head>
|
|
67
|
+
<body>
|
|
68
|
+
<p>Bemony · página externa</p>
|
|
69
|
+
<h1>Upsell 3</h1>
|
|
70
|
+
<p>
|
|
71
|
+
Buy links: <code>href</code> com <code>/pri*</code> (identidade na URL).
|
|
72
|
+
Recusa: <code>data-no-thanks</code> no <strong>script</strong> (mesmo
|
|
73
|
+
<code>href</code> no link de decline). O Pixel decora buy + esse href
|
|
74
|
+
(<code>sid</code>/<code>oid</code>…) e trackeia o aceite.
|
|
75
|
+
</p>
|
|
76
|
+
|
|
77
|
+
<article class="offer-card">
|
|
78
|
+
<h2>Plano anual</h2>
|
|
79
|
+
<p>Economize 2 meses no anual.</p>
|
|
80
|
+
<div class="price">R$ 497</div>
|
|
81
|
+
<a class="accept" href="../../security/one-click/pri_upsell_3a.html"
|
|
82
|
+
>Quero esta oferta</a
|
|
83
|
+
>
|
|
84
|
+
</article>
|
|
85
|
+
|
|
86
|
+
<article class="offer-card">
|
|
87
|
+
<h2>Add-on analytics</h2>
|
|
88
|
+
<p>Dashboard e alertas.</p>
|
|
89
|
+
<div class="price">R$ 97</div>
|
|
90
|
+
<a class="accept" href="../../security/one-click/pri_upsell_3b.html"
|
|
91
|
+
>Quero esta oferta</a
|
|
92
|
+
>
|
|
93
|
+
</article>
|
|
94
|
+
|
|
95
|
+
<article class="offer-card">
|
|
96
|
+
<h2>Comunidade VIP</h2>
|
|
97
|
+
<p>Acesso ao grupo privado.</p>
|
|
98
|
+
<div class="price">R$ 37</div>
|
|
99
|
+
<a class="accept" href="../../security/one-click/pri_upsell_3c.html"
|
|
100
|
+
>Quero esta oferta</a
|
|
101
|
+
>
|
|
102
|
+
</article>
|
|
103
|
+
<a class="decline" href="../../security/thank-you.html">Não, obrigado</a>
|
|
104
|
+
<pre id="funnel-debug">aguardando…</pre>
|
|
105
|
+
<script
|
|
106
|
+
src="../../../dist/browser/pixel-bemony.global.js"
|
|
107
|
+
data-scenario="upsell-offer"
|
|
108
|
+
data-funnel-id="funnel_1"
|
|
109
|
+
data-funnel-step-id="step_upsell_3"
|
|
110
|
+
data-no-thanks="../../security/thank-you.html"
|
|
111
|
+
data-debug="true"
|
|
112
|
+
></script>
|
|
113
|
+
<script>
|
|
114
|
+
// Debug only — não altera hrefs nem resolve click.
|
|
115
|
+
(window.BemonyPixel && window.BemonyPixel.whenReady
|
|
116
|
+
? window.BemonyPixel.whenReady()
|
|
117
|
+
: Promise.reject()
|
|
118
|
+
)
|
|
119
|
+
.then(function (pixel) {
|
|
120
|
+
var el = document.getElementById('funnel-debug');
|
|
121
|
+
if (!el) return;
|
|
122
|
+
el.textContent = JSON.stringify(
|
|
123
|
+
{
|
|
124
|
+
scenario: pixel.getScenario(),
|
|
125
|
+
sid: pixel.getPublicSessionId(),
|
|
126
|
+
oid: pixel.getPublicOrderId && pixel.getPublicOrderId(),
|
|
127
|
+
note: 'buy=/pri* ; no-thanks=script data-no-thanks → mesmo href',
|
|
128
|
+
},
|
|
129
|
+
null,
|
|
130
|
+
2
|
|
131
|
+
);
|
|
132
|
+
})
|
|
133
|
+
.catch(function () {
|
|
134
|
+
var el = document.getElementById('funnel-debug');
|
|
135
|
+
if (el) el.textContent = 'pixel não pronto';
|
|
136
|
+
});
|
|
137
|
+
</script>
|
|
138
|
+
</body>
|
|
139
|
+
</html>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="pt-BR">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<title>Bemony Offer Page — priceCode</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<h1>Offer page</h1>
|
|
9
|
+
<p>
|
|
10
|
+
O Pixel extrai <code>pri_123</code> do link. Nenhuma consulta de catálogo
|
|
11
|
+
é executada. O backend enriquece o evento.
|
|
12
|
+
</p>
|
|
13
|
+
<a href="https://security.bemony.com/pri_123">Comprar agora</a>
|
|
14
|
+
|
|
15
|
+
<script
|
|
16
|
+
src="../dist/browser/pixel-bemony.global.js"
|
|
17
|
+
data-scenario="offer-page"
|
|
18
|
+
data-funnel-id="funnel_123"
|
|
19
|
+
data-funnel-step-id="step_123"
|
|
20
|
+
></script>
|
|
21
|
+
</body>
|
|
22
|
+
</html>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="pt-BR">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<title>Bemony One-click — priceCode</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<h1>One-click</h1>
|
|
9
|
+
<p>
|
|
10
|
+
Confirmação envia priceCode. Pagamento e Purchase ficam no backend.
|
|
11
|
+
</p>
|
|
12
|
+
<button type="button" id="confirm">Confirmar</button>
|
|
13
|
+
<script type="module">
|
|
14
|
+
import { createBemonyPixel } from '../dist/index.js';
|
|
15
|
+
|
|
16
|
+
const pixel = await createBemonyPixel({
|
|
17
|
+
environment: 'development',
|
|
18
|
+
scenario: 'one-click-checkout',
|
|
19
|
+
platform: {
|
|
20
|
+
pixelId: 'pix_demo',
|
|
21
|
+
allowedDomains: ['security.bemony.com'],
|
|
22
|
+
},
|
|
23
|
+
page: {
|
|
24
|
+
public: {
|
|
25
|
+
funnelId: 'funnel_123',
|
|
26
|
+
funnelStepId: 'step_one_click',
|
|
27
|
+
publicOrderId: 'ord_demo',
|
|
28
|
+
priceCode: 'pri_upsell_123',
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
document.getElementById('confirm').onclick = () => {
|
|
34
|
+
pixel.trackOneClickConfirmation({ priceCode: 'pri_upsell_123' });
|
|
35
|
+
};
|
|
36
|
+
</script>
|
|
37
|
+
</body>
|
|
38
|
+
</html>
|