Question

我尝试按照以下嵌入API https://ga-dev-tools.appspot.com/embed-api/custom-components/

中的链接创建自己的Google Analytics信息中心

我在此行var viewSelector = new gapi.analytics.ext.ViewSelector2

处收到此错误

我在哪里可以找到以下文件的正确版本
1. active-users.js
2. date-range-selector.js
3. view-selector2.js

请帮忙。

代码如下：

gapi.analytics.ready(function() {

  gapi.analytics.auth.authorize({
    container: 'embed-api-auth-container',
    clientid: 'xxxxxxxxxxx.apps.googleusercontent.com'
  });

    var commonConfig = {
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:date'
    },
    chart: {
      type: 'LINE',
      options: {
        width: '100%'
      }
    }
  };

   var dateRange1 = {
    'start-date': '14daysAgo',
    'end-date': '8daysAgo'
  };
  /
  var dateRange2 = {
    'start-date': '7daysAgo',
    'end-date': 'yesterday'
  };

    var viewSelector = new gapi.analytics.ext.ViewSelector2({
    container: 'view-selector-container',
  }).execute();

      var dateRangeSelector1 = new gapi.analytics.ext.DateRangeSelector({
    container: 'date-range-selector-1-container'
  })
  .set(dateRange1)
  .execute();

   var dateRangeSelector2 = new gapi.analytics.ext.DateRangeSelector({
    container: 'date-range-selector-2-container'
  })
  .set(dateRange2)
  .execute();

  var dataChart1 = new gapi.analytics.googleCharts.DataChart(commonConfig)
      .set({query: dateRange1})
      .set({chart: {container: 'data-chart-1-container'}});

  var dataChart2 = new gapi.analytics.googleCharts.DataChart(commonConfig)
      .set({query: dateRange2})
      .set({chart: {container: 'data-chart-2-container'}});

  viewSelector.on('viewChange', function(data) {
    dataChart1.set({query: {ids: data.ids}}).execute();
    dataChart2.set({query: {ids: data.ids}}).execute();

    var title = document.getElementById('view-name');
    title.innerHTML = data.property.name + ' (' + data.view.name + ')';
  });

  dateRangeSelector1.on('change', function(data) {
    dataChart1.set({query: data}).execute();

    // Update the "from" dates text.
    var datefield = document.getElementById('from-dates');
    datefield.innerHTML = data['start-date'] + '&mdash;' + data['end-date'];
  });

    dateRangeSelector2.on('change', function(data) {
    dataChart2.set({query: data}).execute();

     var datefield = document.getElementById('to-dates');
    datefield.innerHTML = data['start-date'] + '&mdash;' + data['end-date'];
  });

 });

Answer 1

源文件位于Github项目的/build/javascript/embed-api/components目录中。这是一个链接：
https://github.com/googleanalytics/ga-dev-tools/tree/master/src/javascript/embed-api/components
您所要做的就是下载这些文件并将其添加到您的页面中。

如果你查看你引用的演示的来源，你会注意到它包含以下几行：

<!-- Include the ViewSelector2 component script. -->
<script src="/public/javascript/embed-api/components/view-selector2.js"></script>

<!-- Include the DateRangeSelector component script. -->
<script src="/public/javascript/embed-api/components/date-range-selector.js"></script>

位置/public/javascript/embed-api/components/是他们在演示中托管的位置。您可以选择所需的任何文件路径，但它们必须位于您的页面上并且会一直收到错误。

Answer 2

尝试更改viewSelector：

var viewSelector = new gapi.analytics.ext.ViewSelector2({
  container: 'view-selector-container',
}).execute();

到

var viewSelector = new gapi.analytics.ViewSelector({
  container: 'view-selector-container'
});

viewSelector.execute();

Answer 3

您可以包括这样的组件：

<!-- Include the ViewSelector2 component script. -->
<script src="https://ga-dev-tools.appspot.com/public/javascript/embed-api/components/view-selector2.js"></script>

<!-- Include the DateRangeSelector component script. -->
<script src="https://ga-dev-tools.appspot.com/public/javascript/embed-api/components/date-range-selector.js"></script>

这样，无需更改示例中的其余代码。

嵌入API自定义组件：未捕获的TypeError：无法读取属性＆＃39; ViewSelector2＆＃39;未定义的

3 个答案: