Including Google Analytics Embed API third party dashboard example javascript in my Rails app
Question
I am following this example here for the Google Analytics Embed API to implement a GA third party dashboard via Chart.js in my app and I am having trouble on Step 3 where we are including all the javascript libraries.
I was able to load the Embed API in my application.js as so
(function(w,d,s,g,js,fs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));
//= require /public/javascript/Chart.min.j
//= require /public/javascript/moment.min.js
//= require /public/javascript/embed-api/date-range-selector.js
//= require /public/javascript/embed-api/active-users.js
It shows in Networks section in the dev tools that the cb=gapi.loaded_0 is getting loaded. However, the other libraries are not. Charts.min.js and moments.min.js are available online but I wan't sure where I can find embed-api/date-range-selector.js or embed-api/active-users.js to retrieve into my app?
EDIT1 Found the files here: https://github.com/googleanalytics/ga-dev-tools
2 answers
solution1
1 2014-11-13 19:26:58
I could be wrong, but I believe the Rails asset pipeline needs to have some sort of //= require_self or something like that to ensure the code in the current file is included. It looks to me like the loading snippet in that file isn't being run or is being run in the wrong order.
It's probably easier and simpler to just save it into a separate file so you can ensure the order is correct.
// File: /public/javascript/embed-api-snippet.js
(function(w,d,s,g,js,fs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));
Then put the rest of your code in a setup file like so:
// File: /public/javascript/embed-api-setup.js
gapi.analytics.ready(function() {
gapi.analytics.auth.authorize({
container: 'embed-api-auth-container',
clientid: 'REPLACE WITH YOUR CLIENT ID',
});
// the rest of the setup code...
});
Now your manifest should look like this:
//= require /public/javascript/embed-api-snippet.js
//= require /public/javascript/Chart.min.js
//= require /public/javascript/moment.min.js
//= require /public/javascript/embed-api/date-range-selector.js
//= require /public/javascript/embed-api/active-users.js
//= require /public/javascript/embed-api-setup.js
Also, you said:
This is talking about the gapi.analytics.auth.authorize section which I believe is part of the embed-api/active-user.js
Actually, the gapi.analytics.auth.authorize part is not in the ActiveUsers component, the auth part is something you have to write yourself (because the client ID needs to be specific to you), and it should go in the embed-api-setup.js file as I've described above.
The setup code for the example you're referencing can be found here .
solution2
0 2014-11-14 09:51:55
I did about the same thing in Rails Admin.
First of all I did this Rails Admin Customization: embed html view into dashboard but I think it can be any view you like.
In this .html.erb file I have inserted the GA code from their website:
<!doctype html>
<html>
<head>
<title>Embed API Demos — Pure HTML Dashboards</title>
<link rel="stylesheet" href="../assets/main.css">
<script src="../assets/platform.js"></script>
<link rel="import" href="../assets/ga-auth.html">
<link rel="import" href="../assets/ga-dashboard.html">
<link rel="import" href="../assets/ga-chart.html">
<link rel="import" href="../assets/ga-viewpicker.html">
<link rel="import" href="../assets/ga-datepicker.html">
</head>
<body>
<header class="Banner">
<h1 class="Banner-title">
<a href="/">Embed API Demos</a>
<em>Pure HTML Dashboards</em>
</h1>
<ga-auth clientid="INSERTYOURIDHERE"></gauth>
</header>
<ga-dashboard>
<section id="controls">
<ga-viewpicker></ga-viewpicker>
<ga-datepicker
startDate="30daysAgo"
endDate="14daysAgo">
</ga-datepicker>
</section>
<section id="charts">
<ga-chart
title="Timeline"
type="LINE"
metrics="ga:sessions"
dimensions="ga:date">
</ga-chart>
<ga-chart
title="Sessions (by country)"
type="GEO"
metrics="ga:sessions"
dimensions="ga:country">
</ga-chart>
<ga-chart
title="Top Browsers"
type="COLUMN"
metrics="ga:sessions"
dimensions="ga:browser"
sort="-ga:sessions"
maxResults="5">
</ga-chart>
<ga-chart
title="Top pages"
type="TABLE"
metrics="ga:sessions"
dimensions="ga:pagePath"
sort="-ga:sessions"
maxResults="8">
</ga-chart>
</section>
</ga-dashboard>
<footer class="SourceLink">
<a
href="https://github.com/googleanalytics/embed-api-demos/blob/master/site/6-pure-html-dashboards.html">
View source on Github</a>
→
</footer>
</body>
</html>
Next I added all the GA JS and CSS and HTML to Vendor:
I hope this helps :)
EDIT1 : More information about GA Dashboarding is found here: https://ga-dev-tools.appspot.com/embed-api/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.