Question

我在这里关注此示例，Google Analytics Embed API通过我的应用中的Chart.js实现GA第三方信息中心，我在Step 3遇到麻烦，我们将所有的javascript库都包括在内。

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

(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来检索我的应用程序？

EDIT1 在此处找到文件：https://github.com/googleanalytics/ga-dev-tools

Answer 1

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

将它保存到单独的文件中可能更简单，更简单，因此您可以确保订单正确。

// 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'));

然后将其余代码放在如下的设置文件中：

// 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...

});

现在你的清单应该是这样的：

//= 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的一部分

实际上，gapi.analytics.auth.authorize部分不在ActiveUsers组件中，auth部分是您必须自己编写的（因为客户端ID需要特定于您），它应该去在我上面描述的embed-api-setup.js文件中。

example you're referencing的设置代码可以是found here。

Answer 2

我在Rails Admin中做了同样的事情。

首先我做了Rails Admin Customization: embed html view into dashboard，但我认为它可以是你喜欢的任何视图。

在这个.html.erb文件中，我已经从他们的网站插入了GA代码：

<!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>

接下来，我将所有GA JS，CSS和HTML添加到供应商：

enter image description here

我希望这会有所帮助：）

EDIT1 ：有关GA Dashboarding的更多信息，请访问：https://ga-dev-tools.appspot.com/embed-api/

在我的Rails应用中包含Google Analytics嵌入API第三方信息中心示例javascript

2 个答案: