-
Notifications
You must be signed in to change notification settings - Fork 0
/
documentation.html
178 lines (152 loc) · 13.6 KB
/
documentation.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!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? Documentation</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 -->
<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" href="how-this-works.html" data-dtu>How this demo works</a>
</li>
<li class="nav-item">
<a class="nav-link active" 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">
<h3>Installation of analytics app</h3>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">You host</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">We host</button>
</li>
</ul>
<div class="tab-content margin-bottom-7" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p style="margin-top: 10px">To pull and run Docker container with DoTheyUse Product Ananlytics app use <a href="https://hub.docker.com/r/alexeyhimself/dtu" target="_blank" rel="external" data-dtu>instructions at Docker Hub</a> web page.</p>
<a href="https://hub.docker.com/r/alexeyhimself/dtu" target="_blank" rel="external" data-dtu="docker hub image"><img src="https://www.dropbox.com/s/c1c6qhbc03297w5/dtu-docker-hub.png?raw=1" style="min-width: 712px; max-width: 100%; border: 1px solid gray;" class="image"></a>
<h3>Using analytics app</h3>
<ol>
<li>Interact with web-elements in <a href="http://localhost/src/customer/demos/your_app.html" target="_blank" data-dtu>already preconfigured sample web-app</a> (or with tagged element(s) in your app);</li>
<li>Return back to the Analytics app (should be on <a href="http://localhost" target="_blank" rel="external" data-dtu>http://localhost</a>) and refresh the page — analytics for your recent actions will be displayed:</li>
</ol>
<h3>Installation of ANALYTICS SDK into your APP</h3>
<ol>
<li>Import and init <a href="https://alexeyhimself.github.io/dtu_sdk_js" target="_blank" data-dtu>DTU JavaScript SDK</a> in your web app: put the following code right before </body> tag in your web app:<br>
<div class="code">
<code><pre style="overflow-x: hidden!important;"><!-- Use JS SDK hosted by us (default): -->
<script src="https://dotheyuse.com/src/dtu_app/src/customer/dtu_sdk_js/dtu_sdk.js"></script>
<!-- or use JS SDK hosted by your container: -->
<!--script src="http://localhost/src/customer/dtu_sdk_js/dtu_sdk.js"></script-->
<script type="text/javascript">
const dtu = dotheyuse({
'topic': 'My sample app'
});
</script></pre></code>
</div>
</li>
<li>Tag with "data-dtu" attribute any (of <a href="https://alexeyhimself.github.io/dtu_sdk_js/dtu_sdk_story_book.html" target="_blank" data-dtu>DTU JS SDK supported types</a>) elements of your web app. For example, tag a hyperlink:<br>
<div class="code">
<code style="font-size: 14px;">
<pre><a href="..." data-dtu>...</a></pre>
</code>
</div>
or with custom "data-dtu" attribute value:
<div class="code">
<code style="font-size: 14px;">
<pre><a href="..." data-dtu="some link">...</a></pre>
</code>
</div>
</li>
<p>JavaScript SDK monitors different event types for different web-elements. Refer to <a href="https://github.com/alexeyhimself/dtu_sdk_js/blob/main/dtu_sdk.js#L38" target="_blank">DTU JS SDK source code</a> to find the exact elements and monitored event types.</p>
</ol>
<h3>Furter steps</h3>
<ul >
<li>Tag more elements in your web app with "data-dtu" attributes to see them in Do They Use analytics app;</li>
<li>Contribute to <a href="https://github.com/alexeyhimself/dtu_sdk_js" target="_blank">JS SDK repository</a> (with code pull requests or by submitting issues and features requests) if something not implemented in JS SDK yet, not working or you found a bug;</li>
<li>In <a href="https://dotheyuse.com/contacts.html" target="_blank" data-dtu>Contacts<a> you can find various ways to find us to provide your feedback.</li>
</ul>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p style="margin-top: 10px">You can't send metrics from your apps into cloud MVP right now. But you can <a href="https://forms.gle/DDfr6j6wggPHrcai6" target="_blank" rel="nofollow" data-dtu>leave your email</a> and we will contact you about possible ways to do it.</p>
<p>Current version of cloud MVP uses and shows only its own self-monitored metrics. It is made to provide you with instructions, explanations, how-to's and demonstration of the service current abilities without any setup efforts from your side.</p>
<p>Go to <a href="index.html" data-dtu>Analytics app</a> to try it. It has both synthetic auto-generated (lite and heavy data) and your real current usage live data:</p>
<a href="index.html" data-dtu="dtu image"><img src="https://www.dropbox.com/s/3o4453qk3f9jakd/inside-dtu-account.png?raw=1" style="min-width: 712px; max-width: 100%; border: 1px solid gray;" class="image"></a>
</div>
<!--div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p>You can see real analytics from your web app if you use self-hosted setup.</p>
<p>Below are detailed instructions on how you can do it. First 2 options (<a href="#zero-coding">Zero coding demo</a> and <a href="#iframe"><iframe> demo</a>) — are demos to show you how to attach analytics to sample "your_app.html". Third option (<a href="#setup-instructions">Enable analytics for your web app</a>) — is a step-by-step guide on how to make the same for your real app.</p>
<h4 id="zero-coding">Zero coding demo</h4>
<ol>
<li>Download <a href="src/customer/demos/your_app.html" data-dtu target="_blank">your_app.html</a> (on saving choose "Webpage, HTML only" option, not "Webpage, Complete" — because the file is self-sufficient);</li>
<li>Download <a href="src/customer/demos/dtu_app.html" data-dtu target="_blank">dtu_app.html</a> (the same: on saving choose "Webpage, HTML only");</li>
<li>Open both files in the same web browser;</li>
<li>Interact with the elements of "your_app.html" (click links, buttons, change values);</li>
<li>Refresh "dtu_app.html" (or click on "5 min" link on the) page to see the stats from "your_app.html".</li>
</ol>
<p>This is how it works in general.</p>
<h4 id="iframe"><iframe> demo</h4>
<p><a href="src/customer/demos/iframe_app_local.html" target="_blank">Open <iframe> demo in a new tab</a>, play with it and then return back. It is completely ready to play with. We'll wait for you here.</p>
<p>This is a demo page with <iframe>s for "your_app.html" (on the left) and "dtu_app.html" (on the right) — so you can see everything on a single page with no need of switching between browser tabs. This is how it looks:</p>
<img src="https://www.dropbox.com/s/dfut7ooh8t6e78u/iframe-demo.png?raw=1" style="min-width: 707px; max-width: 100%;" class="image">
<p>This single-page <iframe> demo is available in 2 variants:</p>
<ol>
<li>Open <a href="src/customer/demos/iframe_app_local.html" target="_blank">iframe_app_local.html</a> and save it locally (on saving choose "Webpage, HTML only" option) into the same directory with 2 files that you've already downloaded during steps 1 and 2 of <a href="#zero-coding">"Zero coding demo"</a> instruction above. This <iframe> demo file works with local copies of "your_app.html" and "dtu_app.html";</li>
<li>Or alternatively, open <a href="src/customer/demos/iframe_app_remote.html" target="_blank">iframe_app_remote.html</a> and save it anywhere locally (on saving choose "Webpage, HTML only" option as well). This demo file works without local copies of "your_app.html" and "dtu_app.html" because it loads them into <iframe>s from dotheyuse.com site.</li>
</ol>
<p>Also these 2 <iframe> demo files will work from dotheyuse.com website without any need to save them locally. You can play with them on dotheyuse.com as you've already done in the beginning. It will work.</p>
</div-->
</div>
</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>