在我的Rails应用中包括Google Analytics(分析)Embed API第三方仪表板示例javascript [英] Including Google Analytics Embed API third party dashboard example javascript in my Rails app

问题描述

我在这里使用 Google Analytics(分析)嵌入示例API 来通过我的应用中的Chart.js实现GA第三方仪表板，并且在Step 3上遇到了麻烦，因为我们包含了所有的javascript库.

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.

我能够这样在我的application.js中加载Embed API

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

在开发工具的Networks部分中显示cb=gapi.loaded_0正在加载.但是，其他库则没有. Charts.min.js和moments.min.js可以在线使用，但是我不确定在哪里可以找到embed-api/date-range-selector.js或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 在此处找到文件: https://github.com/googleanalytics/ga-dev-tools

EDIT1 Found the files here: https://github.com/googleanalytics/ga-dev-tools

推荐答案

我可能是错的，但是我相信Rails资产管道需要某种//= require_self或类似的东西来确保当前文件中的代码已经包括了.在我看来，该文件中的加载代码段未运行或运行顺序错误.

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

您还说过:

这是在谈论gapi.analytics.auth.authorize部分，我认为这是embed-api/active-user.js的一部分

This is talking about the gapi.analytics.auth.authorize section which I believe is part of the embed-api/active-user.js

实际上，gapi.analytics.auth.authorize部分不在ActiveUsers组件中，auth部分是您必须自己编写的内容(因为客户端ID需要特定于您)，并且应该放在如上所述的文件.

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.

您引用的示例的设置代码可以为 查看全文