Skip to content

Commit 334bd5b

Browse files
adriaandotcomadriaandotcom
committed
Add callback to playground
1 parent f83d48e commit 334bd5b

File tree

3 files changed

+267
-6
lines changed

3 files changed

+267
-6
lines changed

‎playground/callback.html‎

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Simple Analytics Playground</title>
6+
<meta name="robots" content="noindex,nofollow" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
9+
<!-- Simple Analytics events queue -->
10+
<script>
11+
window.sa_event =
12+
window.sa_event ||
13+
function () {
14+
var a = [].slice.call(arguments);
15+
window.sa_event.q
16+
? window.sa_event.q.push(a)
17+
: (window.sa_event.q = [a]);
18+
};
19+
</script>
20+
21+
<style>
22+
/* Basics */
23+
body,
24+
html {
25+
margin: 0;
26+
padding: 0;
27+
height: 100%;
28+
}
29+
body {
30+
background: #eef9ff;
31+
word-break: break-word;
32+
display: flex;
33+
justify-content: center;
34+
color: #415659;
35+
font-family: "Space Grotesk", Arial, sans-serif;
36+
font-weight: 400;
37+
}
38+
main {
39+
margin: auto;
40+
}
41+
* {
42+
box-sizing: border-box;
43+
}
44+
45+
/* Fonts */
46+
@font-face {
47+
font-family: "Space Grotesk";
48+
font-weight: 500;
49+
src: url("https://assets.simpleanalytics.com/fonts/SpaceGrotesk-Medium.woff2")
50+
format("woff2"),
51+
url("https://assets.simpleanalytics.com/fonts/SpaceGrotesk-Medium.woff")
52+
format("woff");
53+
}
54+
@font-face {
55+
font-family: "Space Grotesk";
56+
font-weight: 400;
57+
src: url("https://assets.simpleanalytics.com/fonts/SpaceGrotesk-Regular.woff2")
58+
format("woff2"),
59+
url("https://assets.simpleanalytics.com/fonts/SpaceGrotesk-Regular.woff")
60+
format("woff");
61+
}
62+
h1,
63+
h2,
64+
h3,
65+
h4 {
66+
margin: 0 0 1rem 0;
67+
line-height: 1.5;
68+
font-weight: 500;
69+
}
70+
p {
71+
font-size: 1rem;
72+
line-height: 150%;
73+
}
74+
a {
75+
color: #415659;
76+
cursor: pointer;
77+
text-decoration: underline;
78+
}
79+
a:hover {
80+
text-decoration: none;
81+
}
82+
83+
/* Layouts */
84+
main {
85+
padding: 2rem;
86+
flex: 0 1 auto;
87+
text-align: center;
88+
}
89+
90+
textarea,
91+
input {
92+
border: 1px solid #232e2f;
93+
border-radius: 5px;
94+
}
95+
96+
@media (prefers-color-scheme: dark) {
97+
body {
98+
background: #2a3638;
99+
}
100+
textarea,
101+
input {
102+
background: #232e2f;
103+
}
104+
body,
105+
a,
106+
textarea,
107+
input {
108+
color: #a4bdc0;
109+
}
110+
}
111+
112+
textarea {
113+
width: 1000px;
114+
max-width: calc(100vw - 2rem);
115+
height: 200px;
116+
padding: 0.5rem;
117+
margin: 1rem;
118+
}
119+
</style>
120+
</head>
121+
<body>
122+
<main>
123+
<svg
124+
width="70"
125+
height="70"
126+
viewBox="0 0 400 400"
127+
fill="none"
128+
xmlns="http://www.w3.org/2000/svg"
129+
style="margin-bottom: 1rem"
130+
>
131+
<circle cx="200" cy="200" r="200" fill="#FF4F64" />
132+
<path d="M132.414 201.448H100V298.69H132.414V201.448Z" fill="white" />
133+
<path
134+
d="M210.206 143.103H177.793V298.69H210.206V143.103Z"
135+
fill="white"
136+
/>
137+
<path d="M288 88H255.586V298.69H288V88Z" fill="white" />
138+
</svg>
139+
140+
<h2>Automated events</h2>
141+
142+
<p>A test site to test automated events for Simple Analytics.</p>
143+
144+
<p>
145+
<a data-callback>Callback link</a>
146+
</p>
147+
148+
<textarea readonly>Loading JavaScript...</textarea>
149+
150+
<p>
151+
In the above console you should see "Auto events" and "Normal embed"
152+
script is loaded.<br />
153+
Further you should see events show up when you click the links.
154+
</p>
155+
</main>
156+
157+
<!-- Some test code for this page specifically -->
158+
<script>
159+
document.querySelector("textarea").value = "";
160+
161+
var logger = {
162+
log: console.log,
163+
error: console.error,
164+
warn: console.warn,
165+
info: console.info,
166+
};
167+
168+
function log(type = "info", ...text) {
169+
logger[type](...text);
170+
write(type, ...text);
171+
}
172+
173+
function write(type = "info", ...params) {
174+
var line = params
175+
.map((param) => {
176+
if (!param) return `${param}`;
177+
if (typeof param === "object") return JSON.stringify(param);
178+
return param;
179+
})
180+
.join(" ");
181+
document.querySelector(
182+
"textarea"
183+
).value += `${type.toUpperCase()}: ${line}\n`;
184+
}
185+
186+
console.log = function () {
187+
write("log", ...arguments);
188+
logger.log.apply(console, arguments);
189+
};
190+
console.error = function () {
191+
write("error", ...arguments);
192+
logger.error.apply(console, arguments);
193+
};
194+
console.warn = function () {
195+
write("warn", ...arguments);
196+
logger.warn.apply(console, arguments);
197+
};
198+
console.info = function () {
199+
write("info", ...arguments);
200+
logger.info.apply(console, arguments);
201+
};
202+
203+
function scriptLoaded(type, ok) {
204+
if (ok) {
205+
log("info", `${type} script is loaded`);
206+
} else {
207+
log("error", `${type} script is blocked on your computer`);
208+
}
209+
}
210+
</script>
211+
212+
<script>
213+
function pathOverwriter(data) {
214+
console.info("pathOverwriter", data);
215+
return "/overwritter-by-pathOverwriter" + data.path;
216+
}
217+
218+
function appendMetadata(data) {
219+
console.info("appendMetadata", data);
220+
if (data.type === "pageview")
221+
return {
222+
page_id: 123,
223+
};
224+
else
225+
return {
226+
event_id: 124,
227+
modified_at: null,
228+
};
229+
}
230+
</script>
231+
232+
<!-- Normal collect script -->
233+
<script
234+
async
235+
data-allow-params="project"
236+
data-path-overwriter="pathOverwriter"
237+
data-metadata-collector="appendMetadata"
238+
data-hostname="playground.simpleanalytics.com"
239+
data-ignore-metrics="referrer,utm,country,session,timeonpage,scrolled,useragent,screensize,viewportsize,language"
240+
onerror="scriptLoaded('Normal embed', false)"
241+
onload="scriptLoaded('Normal embed', true)"
242+
src="/dist/latest/latest.dev.js"
243+
></script>
244+
245+
<script>
246+
const callbackLink = document.querySelector("[data-callback]");
247+
callbackLink.addEventListener("click", (event) => {
248+
event.preventDefault();
249+
window.sa_event(
250+
"callback_test",
251+
{
252+
boolean: true,
253+
},
254+
() => {
255+
console.info("Callback called");
256+
}
257+
);
258+
});
259+
</script>
260+
</body>
261+
</html>

‎playground/events.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8" />
5-
<title>Simple Analytics</title>
5+
<title>Simple Analytics Playground</title>
66
<meta name="robots" content="noindex,nofollow" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88

@@ -129,9 +129,9 @@
129129
}
130130

131131
textarea {
132-
width: 550px;
133-
max-width: 100%;
134-
height: 160px;
132+
width: 1000px;
133+
max-width: calc(100vw - 2rem);
134+
height: 200px;
135135
padding: 0.5rem;
136136
margin: 1rem;
137137
}

‎src/default.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -995,8 +995,8 @@
995995
}
996996
};
997997

998-
var defaultEventFunc = function (event, callback) {
999-
sendEvent(event, callback);
998+
var defaultEventFunc = function (event, metadata, callback) {
999+
sendEvent(event, metadata, callback);
10001000
};
10011001

10021002
// Set default function if user didn't define a function

0 commit comments

Comments
 (0)