-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (102 loc) · 4.12 KB
/
index.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
107
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snowpack</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="page-header">
<h1>Snowpack</h1>
<p>Webpack your snowplow</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="well">find the source code on <a href="https://github.com/sircelsius/snowpack">GitHub</a>!</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="alert" id="direct-container">
It took <span id="direct"></span>ms to setup the trackers and send a pageview directly.
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="alert" id="gtm-container">
It took <span id="gtm"></span>ms to setup the trackers and send a pageview from GTM.
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h2>So what is this exactly?</h2>
<p>Snowpack tries to send your Snowplow events as fast as possible.</p>
<p>One of the recommended approaches of Snowplow is to use Google Tag Manager to import the JS tracker, create your trackers and track pageviews.</p>
<p>The issue of this is that as your website scales, chances are that you will have tons of tags triggered in GTM, they may take quite some time to execute, and before you know it, your pageview events are sent 9s after the page load</p>
<p>By then a lot of your users will be gone.</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h2>So how does this work then?</h2>
<p>Snowpack is a very small script (<code>10kB</code>) that you can afford to include at the very top of your page.</p>
<p>It will initialize your trackers and you can start sending events ASAP.</p>
</div>
</div>
</div>
<script src="bundle.js" async="1"></script>
<script>
function windsOfWinter() {
window.makeItSnow()
.then(function(s) {
s('trackPageView');
var time = Date.now() - window.performance.timing.domLoading;
$('#direct').html(time);
$('#direct-container').attr('data-speed', time);
setBestResult();
console.log('Pageview was sent after ' + time + 'ms.');
});
}
// load the script with async="1" and you need to wait for window.makeItSnow to be defined
if(window.makeItSnow) {
windsOfWinter();
} else {
window.addEventListener('winterIsComing', windsOfWinter);
}
window.addEventListener('winterHasArrived', function() {
var time = Date.now() - window.performance.timing.domLoading;
$('#gtm').html(time);
$('#gtm-container').attr('data-speed', time);
setBestResult();
console.log('GTM pageview was sent after ' + time + 'ms.');
});
function setBestResult() {
var directTimer = $('#direct-container').attr('data-speed');
var gtmTimer = $('#gtm-container').attr('data-speed');
if(directTimer && gtmTimer) {
if(directTimer < gtmTimer) {
$('#direct-container').addClass('alert-success');
$('#gtm-container').addClass('alert-info');
} else {
$('#gtm-container').addClass('alert-success');
$('#direct-container').addClass('alert-info');
}
}
}
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-P8DZZN"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P8DZZN');</script>
<!-- End Google Tag Manager -->
</body>
</html>