Google Analytics Embed API 显示不同页面的图表答案

【问题标题】：Google Analytics Embed API display charts of different pagesGoogle Analytics Embed API 显示不同页面的图表
【发布时间】：2018-04-23 19:32:16
【问题描述】：

我正在尝试使用嵌入 API 显示 Google Analytics（分析）图表以及正在返回的数据。我目前正在从 3 个不同的页面返回数据，效果很好。但是有没有办法在 3 个单独的图表中查看这些数据？

这是返回结果的代码

var query = {
ids: VIEW_ID,
metrics: 'ga:avgTimeOnPage,ga:bounceRate,ga:pageviews,ga:sessions',
dimensions: 'ga:date,ga:pagePath',
filters: ‘ga:pagePath=@page1, ga:pagePath=@page2, ga:pagePath=@page3’ <!—page data returned
}

var report = new gapi.analytics.report.Data({ query });
report.on('success', function(response) {
  //console.log(response);
});

report.execute();

然后我想使用嵌入 API 显示 3 个不同的图表。并使用 select> 选项元素在图表之间切换。此刻，该 ID 正在传递并显示所有帐户、属性和视图。

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

// Render the view selector to the page.
      viewSelector.execute();


var chart = new gapi.analytics.googleCharts.DataChart({
query: {
    ids: VIEW_ID,
    dimensions: 'ga:date',
    metrics: 'ga:avgTimeOnPage,ga:bounceRate,ga:pageviews,ga:sessions',
    filters: ‘ga:pagePath=@page1, ga:pagePath=@page2, ga:pagePath=@page3’ <!—page data returned
},
chart: {
    type: 'LINE',
    container: 'line-chart',
    options: {
        fontSize: 12,
        width: '100%',
        colors: ['#4490BA', '#38A240', '#BD5065', '#BB8A21']
    }
}
});
chart.on('success', function(response) {           
});

viewSelector.on('change', function(ids) {
     chart.set({ query: { ids: VIEW_ID }}).execute();
});

以上返回每个帐户、财产和所有网站数据。我只想要3个不同页面的数据。这可能吗？

【问题讨论】：

标签： google-analytics google-analytics-api google-analytics-filters

【解决方案1】：

好的，所以我设法自己解决了。

我有我的 html 元素，图表是从 Google 脚本附加到的

<div id="line-chart-1"></div>
<div id="line-chart-2"></div>
<div id="line-chart-3"></div>

然后，我创建了一个包含页面 URL 被添加到的位置的数组。然后循环遍历数组 X 次，在这种情况下，生成了 3 个不同的图表；每页一个。

var valueArray = ['page1-url', page2-url, 'page3-url'];

for (var i = 0; i < valueArray.length; i++) {

    var num = i + 1;

    var chart = new gapi.analytics.googleCharts.DataChart({
        query: {
            ids: VIEW_ID,
            dimensions: 'ga:date',
            metrics: 'ga:avgTimeOnPage,ga:bounceRate,ga:pageviews,ga:sessions',
                filters: valueArray[i]
            },
            chart: {
                type: 'LINE',
                container: 'line-chart-' + num,
                options: {
                    fontSize: 12,
                    width: '100%',
                    colors: ['#4490BA', '#38A240', '#BD5065', '#BB8A21']
                }
            }
        });
        chart.on('success', function(response) {});
        chart.execute();
    }

【讨论】：