forked from polastre/analytics.example.org
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
295 lines (247 loc) · 9.82 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
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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="../css/public_analytics.css">
<meta property="og:type" content="website" />
<meta property="og:url" content="https://analytics.example.org" />
<link rel="canonical" href="https://analytics.example.org" />
<title>analytics.example.org</title>
<!--[if lte IE 9]>
<script src="js/vendor/aight.v2.min.js"></script>
<![endif]-->
<script src="/js/vendor/d3.v3.min.js"></script>
<script src="/js/vendor/q.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header id="usa_dot_gov_header">
<!--
<div class="header_container">
<h1>analytics.<a href="example.org">example.org</a></h1>
<a id="about" href="#explanation">About this site</a>
</div>
-->
<div id="color_bar"></div>
</header>
<div class="container">
<!--
JavaScript block hooks look for any element with both data-block and
data-source attributes:
<section data-block="users" data-source="path/to/data.json">
The "loading", "loaded", and "error" classes are set on this element
the data-source URL is loaded. Then the renderer is called on the first
child of the block with the "data" class:
<div class="data">
</div>
Some renderers expect to be called on HTML tables, in which
case you would use:
<table class="data">
</table>
</section>
-->
<div id="main_data">
<section id="realtime"
data-block="realtime"
data-source="/data/live/realtime.json"
data-refresh="15">
<h2 id="current_visitors" class="data">...</h2>
<div class="chart_subtitle">
visitors right now
</div>
</section>
<section class="section_headline visits_today">
<h3>Last 24 Hours</h3>
<h4>Local Time</h4>
</section>
<section id="time_series"
data-block="today"
data-source="/data/live/last-48-hours.json"
data-refresh="15">
<svg class="data time-series">
</svg>
</section>
<section class="section_subheadline">
There were <span id="total_visitors" class="data">...</span> visits over the past 90 days.
</section>
<section id="devices" class="three_column"
data-block="devices"
data-source="/data/live/devices.json">
<h4>Devices</h4>
<figure id="chart_device_types">
<div class="data bar-chart">
</div>
</figure>
</section>
<section id="browsers" class="three_column">
<h4>Browsers</h4>
<figure id="chart_browsers"
data-block="browsers"
data-source="/data/live/browsers.json">
<div class="data bar-chart">
</div>
</figure>
<figure id="chart_ie"
data-block="ie"
data-source="/data/live/ie.json">
<h4>Internet Explorer</h4>
<div class="data bar-chart">
</div>
</figure>
</section>
<section id="operating_systems" class="three_column">
<h4>Operating Systems</h4>
<figure id="chart_os"
data-block="os"
data-source="/data/live/os.json">
<div class="data bar-chart">
</div>
</figure>
<figure id="chart_windows"
data-block="windows"
data-source="/data/live/windows.json">
<h4>Windows</h4>
<div class="data bar-chart">
</div>
</figure>
</section>
</div>
<div id="secondary_data">
<section id="top_100_table">
<!-- see: http://heydonworks.com/practical_aria_examples/ -->
<h3>Top 20</h3>
<ul class="pills" role="tablist">
<li><a role="tab" aria-selected="true" href="#top-pages-realtime">Now</a></li>
<li><a role="tab" href="#top-pages-7-days">7 Days</a></li>
<li><a role="tab" href="#top-pages-30-days">30 Days</a></li>
</ul>
<figure class="top-pages" id="top-pages-realtime" role="tabpanel"
data-block="top-pages"
data-source="/data/live/top-pages-realtime.json"
data-refresh="15">
<h5><strong>Pages</strong><br/>
<em>People on a single, specific page now.</em></h5>
<div class="data bar-chart">
</div>
</figure>
<figure class="top-pages" id="top-pages-7-days" role="tabpanel"
data-block="top-pages"
data-source="/data/live/top-pages-7-days.json">
<h5><strong>Domains</strong><br/>
<em>Total visits over the last week.</em></h5>
<div class="data bar-chart">
</div>
</figure>
<figure class="top-pages" id="top-pages-30-days" role="tabpanel"
data-block="top-pages"
data-source="/data/live/top-pages-30-days.json">
<h5><strong>Domains</strong><br/>
<em>Total visits over the last month.</em></h5>
<div class="data bar-chart">
</div>
</figure>
</section>
</div>
<!--
<section id="explanation">
<h3>About this Site</h3>
<p>
This data provides a window into how people are interacting with the government online. The data comes from a unified Google Analytics account for U.S. federal government agencies known as the <a href="https://www.digitalgov.gov/services/dap/">Digital Analytics Program</a>. This program helps government agenices understand how people find, access, and use government services online. The program <a href="https://www.digitalgov.gov/services/dap/common-questions-about-dap-faq/#part-4">does not track individuals</a>, and <a href="https://support.google.com/analytics/answer/2763052?hl=en">anonymizes the IP addresses</a> of visitors.
</p>
<p>
Not every government website is represented in this data. Currently, the Digital Analytics Program collects web traffic from almost 300 executive branch government domains, including every cabinet department, out of <a href="https://catalog.data.gov/dataset/gov-domains-api">about 1,350 domains</a> total. We continue to pursue and add more sites frequently; to add your site, <a href="mailto:DAP@gsa.gov">email the Digital Analytics Program</a>.
</p>
<p>
<strong>Top 20 data:</strong> "Now" data includes traffic to a specific, single page—whereas "7 Days" and "30 Days" data includes traffic to a domain <strong>and</strong> all pages within that domain.
</p>
<p>
This open source project is in the public domain, which means that this website and its data are free for you to use without restriction. You can find the <a href="https://github.com/GSA/analytics.usa.gov">code for this website</a> and the <a href="https://github.com/18F/analytics-reporter">code behind the data collection</a> on GitHub.
</p>
<p>
We plan to expand the data made available here. If you have any suggestions, or spot any issues or bugs, please <a href="https://github.com/GSA/analytics.usa.gov/issues">open an issue on GitHub</a> or contact the <a href="mailto:DAP@gsa.gov">Digital Analytics Program</a>.
</p>
</section>
<section id="data_download">
<h3>Download the Data</h3>
<p>
You can download the data that powers the charts above, in JSON format.
</p>
<ul>
<li>
<a href="/data/live/realtime.json">
People online right now</a>
(Updated every minute)
</li>
<li>
<a href="/data/live/today.json">
Visits every hour today</a>
(Updated every hour)
</li>
<li>
<a href="/data/live/devices.json">
Visits by desktop/mobile/tablet devices over 90 days</a>
(Updated every day)
</li>
<li>
<a href="/data/live/os.json">
Visits broken down by Operating System over 90 days</a>
(Updated every day)
</li>
<li>
<a href="/data/live/windows.json">
Visits broken down by Windows version over 90 days</a>
(Updated every day)
</li>
<li>
<a href="/data/live/browsers.json">
Visits broken down by browser over 90 days</a>
(Updated every day)
</li>
<li>
<a href="/data/live/ie.json">
Visits broken down by Internet Explorer version over 90 days</a>
(Updated every day)
</li>
<li>
<a href="/data/live/top-pages-realtime.json">
Top 20 pages, ranked by visitors online now</a>
(Updated every minute)
</li>
<li>
<a href="/data/live/top-domains-7-days.json">
Top 20 domains, ranked by visits over 7 days</a>
(Updated every day)
</li>
<li>
<a href="/data/live/top-domains-30-days.json">
Top 20 domains, ranked by visits over 30 days</a>
(Updated every day)
</li>
</ul>
</section>
-->
</div>
</body>
<!--
IE detection, used to guide console formatting in subsequent include
-->
<script type="text/javascript">window._ie9 = false;</script>
<!--[if IE 9 ]>
<script type="text/javascript">window._ie9 = true;</script>
<![endif]-->
<!--
IE10 JS targeting: http://stackoverflow.com/a/17099988
IE11 JS targeting: http://stackoverflow.com/a/17447695
-->
<script type="text/javascript">
window._ie10 = ("onpropertychange" in document && !!window.matchMedia);
window._ie11 = !!navigator.userAgent.match(/Trident\/7.0; rv 11/);
window._ie = window._ie9 || window._ie10 || window._ie11;
</script>
<script src="../js/index.js"></script>
<!-- This is all it takes to report an agency's traffic to the DAP. -->
<!-- Uncomment this to use the Federal DAP; not needed for most users
<script id="_fed_an_ua_tag" src="/dap/dap.min.js"></script>
-->
</html>