-
Notifications
You must be signed in to change notification settings - Fork 0
/
signal.html
106 lines (98 loc) · 3.83 KB
/
signal.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="topics" content="topic1,topic2">
<link rel="stylesheet" href="index.css">
<!-- <script id="signal-config" data-setting1="value1" data-setting2="value2"></script>-->
<script src="dist/signal.min.js" data-signal-api="http://localhost:8686/track" data-signal-token="bc1e5b51-21ae-4a22-862d-9798d6e958bf" data-id="tracardi-signal"></script>
</head>
<body>
<h1 data-tracardi-tag="title">
<BOLD>TRACARDI</BOLD>
<THIN>JavaScript Integration Test Page</THIN>
</h1>
<section>
<p>This page load TRACARDI Javascript to show case how it can be utilized to collect user data.</p>
</section>
<pre style="display: none">
const options = {
tracker: {
url: {
script: 'http://localhost:8686/tracker',
api: 'http://localhost:8686'
},
source: {
id: "7303142e-c0e1-45a4-8b1b-6e2f0381b141"
}
}
}
</pre>
<button id="context">Test context bind</button>
<button onClick="testClick()">Test on click</button>
<a href="https://example.com/test">External patched link</a>
<a href="https://abc.com">NOT External patched link</a>
<h2>Events</h2>
<section data-tracardi-tag="over">
<p>This is the example code that sends events to TRACARDI. Events pinpoint what happened on your web-site</p>
<pre>
window.response.context.profile = true;
window.tracker.track("purchase-order", {"product": "Sun glasses - Badoo", "price": 13.45})
window.tracker.track("interest", {"Vacation": 1})
window.tracker.track("page-view", {"basket": 1});
</pre>
</section>
<h2>TRACARDI response</h2>
<section>
<p>TRACARDI will respond with information on user profile, session, and information on what was saved in the
system.</p>
<p>This information can be used to change your page on the fly with javascript.</p>
<pre id="response"></pre>
</section>
<h2>TRACARDI listeners</h2>
<h3>onConsentRequired</h3>
<section>
<p>TRACARDI can listen to the data that comes from the system and can react to it. For example if you did not
consent to data processing it can popup a message and ask for consent.</p>
<p>This is an example of code that shows white box below if consent is required.</p>
<pre>
const options = {
listeners: {
onConsentRequired: () => {
const consentBox = document.getElementById('consentBox');
if (consentBox) {
consentBox.style.display = "block";
}
}
}
}
</pre>
<p>It is shown because TRACARDI returned that this information source requires user consent. See response from
TRACARDI above.</p>
<p>Once you click one of the buttons it will never appear again. </p>
<div id="consentBox" class="consent">
<div class="consent-content">
We are using cookies to collect anonymous data.
<button id="consent-all">Allow all</button>
<button id="block-all">Black all</button>
</div>
</div>
</section>
<h3>onContextReady</h3>
<section>
<p>You can listen and react when the page is rady and TRACARDI returns user context information.
Than you can bind new tracking to any given element on page or change the page depending on the data tracardi
returned.
</p>
<p>Click on button below to sent new event to TRACARDI. </p>
<div>
<BUTTON id="custom-click-event">NEW EVENT</BUTTON>
<BUTTON id="page-view-event">PAGE-VIEW EVENT ONMOUSEOVER</BUTTON>
</div>
<pre id="response-to-custom-event" style="display: none"></pre>
</section>
<img src="https://tracardi.com/wp-content/uploads/2021/12/tracardi-icon-2-150x150.png" width="100" alt="Tracardi logo" height="100" data-tracardi-tag="product"/>
</body>
</html>