-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgoogle-analytics-embed-API.html
More file actions
322 lines (242 loc) · 18.4 KB
/
Copy pathgoogle-analytics-embed-API.html
File metadata and controls
322 lines (242 loc) · 18.4 KB
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
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!DOCTYPE html>
<html>
<head>
<title>Google Analytics Embed API</title>
<meta name="description" content="Florian Cheheb's portfolio and blog.">
<link rel="stylesheet" type="text/css" href="/sandbox/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="wrapper" class="">
<header style="justify-content: space-around; align-items: center;">
<div class="absolute logo-wrap">
<a href="/sandbox" target="_blank" class=""
>
<span class="logo2 js-logo"
><div>
<div class="shade" data-drift="-5 -10">
<svg version="1.1" x="0px" y="0px" viewBox="0 0 256 256">
<polygon
class="filled-poly"
points="156.2,91.5 112.7,146.5 89,116.5 33.2,187 80.7,187 144.8,187 231.8,187"
/>
</svg>
</div>
<div class="logo2">
<svg version="1.1" x="0px" y="0px" viewBox="0 0 256 256">
<polygon
class="stroke-poly"
points="84,106.5 28.2,177 139.8,177 "
/>
<polygon
class="stroke-poly"
points="151.2,81.5 75.7,177 226.8,177 "
/>
</svg>
</div></div></span></a>
</div>
<a href="https://silver-api.digital/" class="header_link push-right" style="margin-bottom: 10px; float: right; margin-top: 20px; " > portfolio</a>
</header>
<section class="center-block padding">
<section class="post">
<h1>Google Analytics Embed API</h1>
<h6 class="date">Wed, Dec 1, 2021</h6>
<p>The Embed API is a JavaScript library that lets you create custom dashboards for Google Analytics that can be hosted on your own site. Why bother creating a dashboard programmatically when you can just create one using Google’s site? Because you can make a better one, control its styling, and accomplish things that cannot be done through Google Analytics alone.</p>
<p>There is a Google tutorial on the Embed API which I used and and enjoyed. I am borrowing from it, but am filling in gaps and adding sections.</p>
<p>To see the types of dashboards that can be built using the API, check out the Embed API <a title="demos" href="https://ga-dev-tools.appspot.com/demos/embed-api" target="_blank">demos</a>.</p>
<p></p>
<hr />
<!--GETTING STARTED-->
<p><h2 class="segment">Creating a Client ID</h2>
The first thing we are going to do is create a Google Client ID. This ID is needed to perform user authorization.</p>
<p>To get a client ID we need to go to the <a title="Google Developers Console" href="https://console.developers.google.com/" target="_blank">Google Developer’s Console</a>.</p>
<p>Login to the Console and press the “Create Project” button. Give your project a name and a unique ID.</p>
<p>Now that we have created a project, we can enable the Analytics API. To do so, click on the <strong>APIs</strong> link, which is nested under <strong>APIs and auth</strong> in the left sidebar.</p>
<p>You should see a list of APIs. Click on the <strong>off</strong> button to the right of the Analytics API, this will turn it on.</p>
<p>After enabling the Analytics API, click on <strong>Credentials</strong>, which is under <strong>APIs</strong>.</p>
<p>Click the blue, <strong>Create New Client ID</strong>, button.</p>
<p>You see where it says JavaScript origins. This needs to be set to your domain. Do not include any paths.</p>
<p>If you are using localhost, simply set the origins to <a href="http://localhost/">http://localhost/</a>.
It is important to type your host address exactly. If your site is accessed through https, you must include https in the address.
Sometimes this can be finicky, so for safe measure include your domain with https, http, and <a href="http://www">http://www</a> at the beginning.</p>
<p>When this is all set, press <strong>Create Client ID</strong>.</p>
<p>We are all done with the Dev Console, but you should copy the Client ID or leave the window open for future reference.</p>
<hr />
<!--THE CODE-->
<p><h2 class="segment">The Code</h2>
Finally we can start the fun part. Everything up until this point has been setup. It hasn’t been thrilling, but it has been important.</p>
<p>As much as I wanted to wait until the end to give the complete code, it makes more sense for me to do it now and then provide a walkthrough.</p>
<div class="highlight" style="background: #f0f0f0"><pre style="line-height: 125%"><span></span><span style="color: #007020"><!DOCTYPE html></span>
<<span style="color: #062873; font-weight: bold">html</span>>
<<span style="color: #062873; font-weight: bold">head</span>>
<<span style="color: #062873; font-weight: bold">title</span>>Embed API Demo</<span style="color: #062873; font-weight: bold">title</span>>
</<span style="color: #062873; font-weight: bold">head</span>>
<<span style="color: #062873; font-weight: bold">body</span>>
<span style="color: #60a0b0; font-style: italic"><!-- Step 1: Create the containing elements. --></span>
<<span style="color: #062873; font-weight: bold">section</span> <span style="color: #4070a0">id</span><span style="color: #666666">=</span><span style="color: #4070a0">"auth-button"</span>></<span style="color: #062873; font-weight: bold">section</span>>
<<span style="color: #062873; font-weight: bold">section</span> <span style="color: #4070a0">id</span><span style="color: #666666">=</span><span style="color: #4070a0">"view-selector"</span>></<span style="color: #062873; font-weight: bold">section</span>>
<<span style="color: #062873; font-weight: bold">section</span> <span style="color: #4070a0">id</span><span style="color: #666666">=</span><span style="color: #4070a0">"timeline"</span>></<span style="color: #062873; font-weight: bold">section</span>>
<span style="color: #60a0b0; font-style: italic"><!-- Step 2: Load the library. --></span>
<<span style="color: #062873; font-weight: bold">script</span>>
(<span style="color: #007020; font-weight: bold">function</span> (w, d, s, g, js, fjs) {
g <span style="color: #666666">=</span> w.gapi <span style="color: #666666">||</span> (w.gapi <span style="color: #666666">=</span> {});
g.analytics <span style="color: #666666">=</span> {
q<span style="color: #666666">:</span> [],
ready<span style="color: #666666">:</span> <span style="color: #007020; font-weight: bold">function</span> (cb) {
<span style="color: #007020; font-weight: bold">this</span>.q.push(cb)
}
};
js <span style="color: #666666">=</span> d.createElement(s);
fjs <span style="color: #666666">=</span> d.getElementsByTagName(s)[<span style="color: #40a070">0</span>];
js.src <span style="color: #666666">=</span> <span style="color: #4070a0">'https://apis.google.com/js/platform.js'</span>;
fjs.parentNode.insertBefore(js, fjs);
js.onload <span style="color: #666666">=</span> <span style="color: #007020; font-weight: bold">function</span> () {
g.load(<span style="color: #4070a0">'analytics'</span>)
};
}(<span style="color: #007020">window</span>, <span style="color: #007020">document</span>, <span style="color: #4070a0">'script'</span>));
</<span style="color: #062873; font-weight: bold">script</span>>
<<span style="color: #062873; font-weight: bold">script</span>>
gapi.analytics.ready(<span style="color: #007020; font-weight: bold">function</span> () {
<span style="color: #60a0b0; font-style: italic">// Step 3: Authorize the user.</span>
<span style="color: #007020; font-weight: bold">var</span> CLIENT_ID <span style="color: #666666">=</span> <span style="color: #4070a0">'Insert Your Client-ID here'</span>;
gapi.analytics.auth.authorize({
container<span style="color: #666666">:</span> <span style="color: #4070a0">'auth-button'</span>,
clientid<span style="color: #666666">:</span> CLIENT_ID,
});
<span style="color: #60a0b0; font-style: italic">// Step 4: Create the view selector.</span>
<span style="color: #007020; font-weight: bold">var</span> viewSelector <span style="color: #666666">=</span> <span style="color: #007020; font-weight: bold">new</span> gapi.analytics.ViewSelector({
container<span style="color: #666666">:</span> <span style="color: #4070a0">'view-selector'</span>
});
<span style="color: #60a0b0; font-style: italic">// Step 5: Create the timeline chart.</span>
<span style="color: #007020; font-weight: bold">var</span> timeline <span style="color: #666666">=</span> <span style="color: #007020; font-weight: bold">new</span> gapi.analytics.googleCharts.DataChart({
reportType<span style="color: #666666">:</span> <span style="color: #4070a0">'ga'</span>,
query<span style="color: #666666">:</span> {
<span style="color: #4070a0">'dimensions'</span><span style="color: #666666">:</span> <span style="color: #4070a0">'ga:date'</span>,
<span style="color: #4070a0">'metrics'</span><span style="color: #666666">:</span> <span style="color: #4070a0">'ga:sessions'</span>,
<span style="color: #4070a0">'start-date'</span><span style="color: #666666">:</span> <span style="color: #4070a0">'30daysAgo'</span>,
<span style="color: #4070a0">'end-date'</span><span style="color: #666666">:</span> <span style="color: #4070a0">'yesterday'</span>,
},
chart<span style="color: #666666">:</span> {
type<span style="color: #666666">:</span> <span style="color: #4070a0">'LINE'</span>,
container<span style="color: #666666">:</span> <span style="color: #4070a0">'timeline'</span>
}
});
<span style="color: #60a0b0; font-style: italic">// Step 6: Hook up the components to work together.</span>
gapi.analytics.auth.on(<span style="color: #4070a0">'success'</span>, <span style="color: #007020; font-weight: bold">function</span> (response) {
viewSelector.execute();
});
viewSelector.on(<span style="color: #4070a0">'change'</span>, <span style="color: #007020; font-weight: bold">function</span> (ids) {
<span style="color: #007020; font-weight: bold">var</span> newIds <span style="color: #666666">=</span> {
query<span style="color: #666666">:</span> {
ids<span style="color: #666666">:</span> ids
}
}
timeline.set(newIds).execute();
});
});
</<span style="color: #062873; font-weight: bold">script</span>>
</<span style="color: #062873; font-weight: bold">body</span>>
</<span style="color: #062873; font-weight: bold">html</span>>
</pre></div>
<p><h3>Walkthrough</h3>
We will begin by creating a new html doc and creating three sections with the following ids.
<ul>
<li>auth</li>
<li>view-selector</li>
<li>data-chart</li>
</ul>
These sections will contain an authentication button, a view picker, and a chart.</p>
<p><div class="highlight" style="background: #f0f0f0"><pre style="line-height: 125%"><span></span><<span style="color: #062873; font-weight: bold">section</span> <span style="color: #4070a0">id</span><span style="color: #666666">=</span><span style="color: #4070a0">"auth-button"</span>></<span style="color: #062873; font-weight: bold">section</span>>
<<span style="color: #062873; font-weight: bold">section</span> <span style="color: #4070a0">id</span><span style="color: #666666">=</span><span style="color: #4070a0">"view-selector"</span>></<span style="color: #062873; font-weight: bold">section</span>>
<<span style="color: #062873; font-weight: bold">section</span> <span style="color: #4070a0">id</span><span style="color: #666666">=</span><span style="color: #4070a0">"timeline"</span>></<span style="color: #062873; font-weight: bold">section</span>>
</pre></div>
</p>
<p>To load the Embed API, include the following script block.</p>
<div class="highlight" style="background: #f0f0f0"><pre style="line-height: 125%"><span></span><<span style="color: #062873; font-weight: bold">script</span>>
(<span style="color: #007020; font-weight: bold">function</span> (w, d, s, g, js, fjs) {
g <span style="color: #666666">=</span> w.gapi <span style="color: #666666">||</span> (w.gapi <span style="color: #666666">=</span> {});
g.analytics <span style="color: #666666">=</span> {
q<span style="color: #666666">:</span> [],
ready<span style="color: #666666">:</span> <span style="color: #007020; font-weight: bold">function</span> (cb) {
<span style="color: #007020; font-weight: bold">this</span>.q.push(cb)
}
};
js <span style="color: #666666">=</span> d.createElement(s);
fjs <span style="color: #666666">=</span> d.getElementsByTagName(s)[<span style="color: #40a070">0</span>];
js.src <span style="color: #666666">=</span> <span style="color: #4070a0">'https://apis.google.com/js/platform.js'</span>;
fjs.parentNode.insertBefore(js, fjs);
js.onload <span style="color: #666666">=</span> <span style="color: #007020; font-weight: bold">function</span> () {
g.load(<span style="color: #4070a0">'analytics'</span>)
};
}(<span style="color: #007020">window</span>, <span style="color: #007020">document</span>, <span style="color: #4070a0">'script'</span>));
</<span style="color: #062873; font-weight: bold">script</span>>
</pre></div>
<p>The remaining javascript will be wrapped in the gapi.analytics.ready function. This function is triggered when the API is finished loading.</p>
<p>The first thing we will do is authorize the user using OAUTH 2.0. This will allow the us to display information tied to their google analytics account.</p>
<p>Here is the code for to perform authentication. Make sure to set the CLIENT-ID variable to your Client ID.</p>
<div class="highlight" style="background: #f0f0f0"><pre style="line-height: 125%"><span></span><span style="color: #60a0b0; font-style: italic">// Step 3: Authorize the user.</span>
<span style="color: #007020; font-weight: bold">var</span> CLIENT_ID <span style="color: #666666">=</span> <span style="color: #4070a0">'Client-ID Goes Here'</span>;
gapi.analytics.auth.authorize({
container<span style="color: #666666">:</span> <span style="color: #4070a0">'auth-button'</span>,
clientid<span style="color: #666666">:</span> CLIENT_ID,
});
</pre></div>
<!--VIEWSELECTOR-->
<p>The following function creates a view selector. The container is set to the id of the viewpicker section.</p>
<div class="highlight" style="background: #f0f0f0"><pre style="line-height: 125%"><span></span><span style="color: #60a0b0; font-style: italic">// Step 4: Create the view selector.</span>
<span style="color: #007020; font-weight: bold">var</span> viewSelector <span style="color: #666666">=</span> <span style="color: #007020; font-weight: bold">new</span> gapi.analytics.ViewSelector({
container<span style="color: #666666">:</span> <span style="color: #4070a0">'view-selector'</span>
});
</pre></div>
<p>Here is the code to create the chart. The query specifies what data you want and the chart defines visual aspects.
<div class="highlight" style="background: #f0f0f0"><pre style="line-height: 125%"><span></span><span style="color: #60a0b0; font-style: italic">// Step 5: Create the timeline chart.</span>
<span style="color: #007020; font-weight: bold">var</span> timeline <span style="color: #666666">=</span> <span style="color: #007020; font-weight: bold">new</span> gapi.analytics.googleCharts.DataChart({
reportType<span style="color: #666666">:</span> <span style="color: #4070a0">'ga'</span>,
query<span style="color: #666666">:</span> {
<span style="color: #4070a0">'dimensions'</span><span style="color: #666666">:</span> <span style="color: #4070a0">'ga:date'</span>,
<span style="color: #4070a0">'metrics'</span><span style="color: #666666">:</span> <span style="color: #4070a0">'ga:sessions'</span>,
<span style="color: #4070a0">'start-date'</span><span style="color: #666666">:</span> <span style="color: #4070a0">'30daysAgo'</span>,
<span style="color: #4070a0">'end-date'</span><span style="color: #666666">:</span> <span style="color: #4070a0">'yesterday'</span>,
},
chart<span style="color: #666666">:</span> {
type<span style="color: #666666">:</span> <span style="color: #4070a0">'LINE'</span>,
container<span style="color: #666666">:</span> <span style="color: #4070a0">'timeline'</span>
}
});
</pre></div>
The last block of code ties everything together. The viewSelector onChange function updates the chart when a new view is selected.</p>
<div class="highlight" style="background: #f0f0f0"><pre style="line-height: 125%"><span></span><span style="color: #60a0b0; font-style: italic">// Step 6: Hook up the components to work together.</span>
gapi.analytics.auth.on(<span style="color: #4070a0">'success'</span>, <span style="color: #007020; font-weight: bold">function</span> (response) {
viewSelector.execute();
});
viewSelector.on(<span style="color: #4070a0">'change'</span>, <span style="color: #007020; font-weight: bold">function</span> (ids) {
<span style="color: #007020; font-weight: bold">var</span> newIds <span style="color: #666666">=</span> {
query<span style="color: #666666">:</span> {
ids<span style="color: #666666">:</span> ids
}
}
timeline.set(newIds).execute();
});
});
</pre></div>
<!-- I will be updating this tutorial and providing more tutorials related to the Embed API. -->
<p>Here is a link to <a href="https://developers.google.com/analytics/devguides/reporting/embed/v1/devguide" title="Google's tutorial." target="_blank">Google’s tutorial</a> if you are interested in exploring more.</p>
</section>
</section>
<footer>
<nav id="footer-nav">
<div><a class="link" target="_blank" href="https://www.linkedin.com/in/silverapi/">LinkedIn</a></div>
<div><a class="link" target="_blank" href="https://github.com/flobby41">GitHub</a></div>
</nav>
</footer>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-49880724-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>