Including Google Analytics Embed API third party dashboard example javascript in my Rails app

问题

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

回答1:

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.

回答2:

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 &mdash; 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>
  &nbsp;&#8594;
</footer>

</body>
</html>

Next I added all the GA JS and CSS and HTML to Vendor: