-
Notifications
You must be signed in to change notification settings - Fork 0
/
how-this-works.html
106 lines (90 loc) · 7.71 KB
/
how-this-works.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 lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-J69ENZY4TQ"></script>
<script>
if (["", "localhost"].includes(window.location.hostname)) // disable GA: https://stackoverflow.com/questions/40297763/how-to-disable-google-analytics-on-localhost
window['ga-disable-G-J69ENZY4TQ'] = true; // enter your tracking ID
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-J69ENZY4TQ');
</script>
<script type="text/javascript">
!function(){"use strict";!function(e,t){var n=e.amplitude||{_q:[],_iq:{}};if(n.invoked)e.console&&console.error&&console.error("Amplitude snippet has been loaded.");else{var r=function(e,t){e.prototype[t]=function(){return this._q.push({name:t,args:Array.prototype.slice.call(arguments,0)}),this}},s=function(e,t,n){return function(r){e._q.push({name:t,args:Array.prototype.slice.call(n,0),resolve:r})}},o=function(e,t,n){e._q.push({name:t,args:Array.prototype.slice.call(n,0)})},i=function(e,t,n){e[t]=function(){if(n)return{promise:new Promise(s(e,t,Array.prototype.slice.call(arguments)))};o(e,t,Array.prototype.slice.call(arguments))}},a=function(e){for(var t=0;t<g.length;t++)i(e,g[t],!1);for(var n=0;n<m.length;n++)i(e,m[n],!0)};n.invoked=!0;var u=t.createElement("script");u.type="text/javascript",u.integrity="sha384-Gzu/3zjG7uZ1G0TIW6BIGIzZHB61u7328yVnZUz4t1dNE/n/dSnABKbOJ+jw6Bnu",u.crossOrigin="anonymous",u.async=!0,u.src="https://cdn.amplitude.com/libs/analytics-browser-2.5.2-min.js.gz",u.onload=function(){e.amplitude.runQueuedFunctions||console.log("[Amplitude] Error: could not load SDK")};var c=t.getElementsByTagName("script")[0];c.parentNode.insertBefore(u,c);for(var l=function(){return this._q=[],this},p=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove","getUserProperties"],d=0;d<p.length;d++)r(l,p[d]);n.Identify=l;for(var f=function(){return this._q=[],this},v=["getEventProperties","setProductId","setQuantity","setPrice","setRevenue","setRevenueType","setEventProperties"],y=0;y<v.length;y++)r(f,v[y]);n.Revenue=f;var g=["getDeviceId","setDeviceId","getSessionId","setSessionId","getUserId","setUserId","setOptOut","setTransport","reset","extendSession"],m=["init","add","remove","track","logEvent","identify","groupIdentify","setGroup","revenue","flush"];a(n),n.createInstance=function(e){return n._iq[e]={_q:[]},a(n._iq[e]),n._iq[e]},e.amplitude=n}}(window,document)}();
amplitude.init('bfab8c559a3d5e4dec53ab1760dd3cf9', {
defaultTracking: true,
});
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Do They Use? How this demo works</title>
<link href="src/web/common/fonts/Bebas_Neue/Bebas_Neue.css" rel="stylesheet"> <!-- menu font -->
<link href="src/web/common/fonts/Crimson_Pro/Crimson_Pro.css" rel="stylesheet"> <!-- p text font -->
<link href="src/web/common/fonts/Vollkorn/Vollkorn.css" rel="stylesheet"> <!-- h2, h3 font -->
<script type="text/javascript" src="src/web/common/bootstrap/bootstrap.5.3.0-alpha.min.js"></script>
<link href="src/web/common/bootstrap/bootstrap.5.3.0-alpha.min.css" rel="stylesheet">
<link href="src/web/common/css/dtu_css.css" rel="stylesheet">
<link href="src/web/docs/dtu_css.css" rel="stylesheet">
<link href="src/web/account/css/dtu_css.css" rel="stylesheet">
<style type="text/css">
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light" data-dtu="Navbar">
<div class="container-fluid">
<a class="navbar-brand" href="https://dotheyuse.com" data-dtu>Do They Use</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" data-dtu="Menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav margin-left-6">
<li class="nav-item">
<a class="nav-link" href="index.html" data-dtu>Analytics app</a>
</li>
<li class="nav-item" id="how-this-works">
<a class="nav-link active" href="how-this-works.html" data-dtu>How this demo works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation.html" data-dtu>Documentation</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="row justify-content-center clip">
<div class="col-lg-6 col-11 margin-bottom-7">
<h2>How this demo works</h2>
<p>Every interaction element (button, link, menu, drop-down, date-time picker, etc.) on a whole <a href="#" data-dtu>dotheyuse.com</a> website (including this web page as well) has its own unique and meaningful "data-dtu" attribute:</p>
<img src="https://www.dropbox.com/s/b0lm8262px9vchn/data-dtu-for-try-now-button.png?raw=1" style="max-width: 327px; border: 1px solid gray;" class="image">
<p>Every page also imports and inits <a href="https://github.com/alexeyhimself/dtu_sdk_js" target="_blank" data-dtu>Do They Use service JavaScript SDK</a> with custom "topic": "your real usage now":</p>
<img src="https://www.dropbox.com/s/dplazho9rzphxsn/import-and-init-for-page.png?raw=1" style="max-width: 650px; border: 1px solid gray;" class="image">
<p>This setup allows to track all your interactions with any tagged (we want to be monitored) element on this website. And all these interactions appear under "Data source": "your real usage now" in <a href="index.html" data-dtu>demo account</a>:</p>
<img src="https://www.dropbox.com/s/3o4453qk3f9jakd/inside-dtu-account.png?raw=1" style="min-width: 541px; max-width: 100%; border: 1px solid gray;" class="image">
<p>By default chart displays "All available" information: stats for all the elements from the whole web site (including demo account itself) at any time. But you can filter for any particular element at any time period. If an element has never had interactions or it has no "data-dtu" attribute assigned, then it will not be available for filtering.</p>
<p>The more you interact with different elements on website — the more of them appear in stats under "Data source": "your real usage now".</p>
<h2>Auto-generated data</h2>
<p>Demo account also has 2 synthetic sets of data in "Data source" drop-down:
<ul >
<li>auto-generated (lite)</li>
<li>auto-generated (heavy)</li>
</ul>
</p>
<p>These simulations are made to demonstrate what it looks like when you have "lite" and "heavy" events traffic. For example, "lite" model has 1-3 events per 15 minutes time frame and "heavy" model has more than 10 events per each minute.
<h2>Mobile friendly</h2>
<p>Whole web site UI/UX optimised for smartphones and tablets as well.
<img src="https://www.dropbox.com/s/9wi7xh5tr1harvh/optimized-mobile-web.png?raw=1" style="min-width2: 541px; max-width: 45%; border: 0px">
<img src="https://www.dropbox.com/s/t3r7qt331e5jsz1/optimized-mobile-app.png?raw=1" style="min-width2: 541px; max-width: 45%; border: 0px">
</p>
</div>
</div>
<script src="src/db/dtu_db.js?v=11"></script>
<script src="src/rx_api/dtu_rx_api.js?v=11"></script>
<script src="src/customer/dtu_sdk_js/dtu_sdk.js?v=11"></script>
<script type="text/javascript">
dtu.set_topic('your real usage now');
if (['', 'dotheyuse.com'].includes(window.location.hostname))
document.getElementById('how-this-works').style.display = 'unset';
</script>
</body>
</html>