使用 API 嵌入 Google Analytics 地图视图
Embed Google Analytics Map View using API
我正在尝试在美国地图上显示 "Active Users on Site" 计数及其位置。我们安装了 Google Analytics,我们的仪表板正在获取实时数据。我正在尝试将其插入托管在我们服务器上的网页,以显示在我们公司大楼内的各种屏幕上。
我已通读 this documentation,但我在放置此代码的网页上没有看到任何显示。它只是一个白屏,控制台没有错误。
查看这部分,Polymer Elements,看起来是可行的,我已经插入了 HTML 元素来做到这一点。然而,什么都没有。
下面是我的代码,出于隐私考虑删除了 CLIENT ID。
<!DOCTYPE html>
<html>
<head>
<title>Embed API Demo</title>
</head>
<body>
<!-- Step 1: Create the containing elements. -->
<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>
<google-analytics-chart
type="area"
metrics="ga:sessions"
dimensions="ga:date"
startDate="30daysAgo"
endDate="yesterday">
</google-analytics-chart>
<!-- Step 2: Load the library. -->
<script>
(function(w,d,s,g,js,fjs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>
<script>
gapi.analytics.ready(function() {
// Step 3: Authorize the user.
var CLIENT_ID = 'REMOVED-FOR-PRIVACY';
gapi.analytics.auth.authorize({
container: 'auth-button',
clientid: CLIENT_ID,
});
// Step 4: Create the view selector.
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector'
});
// Step 5: Create the timeline chart.
var chart = new gapi.analytics.googleCharts.DataChart({
query: {
'dimensions': 'ga:country',
'metrics': 'ga:sessions',
'start-date': '30daysAgo',
'end-date': 'yesterday',
},
chart: {
type: 'GEO',
container: 'timeline',
options: {
region: '1', // Western Europe
displayMode: 'markers'
}
}
});
// Step 6: Hook up the components to work together.
gapi.analytics.auth.on('success', function(response) {
viewSelector.execute();
});
viewSelector.on('change', function(ids) {
var newIds = {
query: {
ids: ids
}
}
chart.set(newIds).execute();
});
});
</script>
</body>
</html>
最终,我想嵌入并显示以下两个元素:
我认为这些聚合物元素用于查看访问者有权访问的 GA 帐户数据,而不是让您向用户显示有关您网站的结果。
我建议您使用 Google Data Studio 并创建报告。然后将报告嵌入您的网页。 https://support.google.com/datastudio/answer/7450249?hl=en
另请注意,这不是实时数据,您可以为此使用 real time api,但我不知道有任何开箱即用的解决方案来显示数据。
我正在尝试在美国地图上显示 "Active Users on Site" 计数及其位置。我们安装了 Google Analytics,我们的仪表板正在获取实时数据。我正在尝试将其插入托管在我们服务器上的网页,以显示在我们公司大楼内的各种屏幕上。
我已通读 this documentation,但我在放置此代码的网页上没有看到任何显示。它只是一个白屏,控制台没有错误。
查看这部分,Polymer Elements,看起来是可行的,我已经插入了 HTML 元素来做到这一点。然而,什么都没有。
下面是我的代码,出于隐私考虑删除了 CLIENT ID。
<!DOCTYPE html>
<html>
<head>
<title>Embed API Demo</title>
</head>
<body>
<!-- Step 1: Create the containing elements. -->
<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>
<google-analytics-chart
type="area"
metrics="ga:sessions"
dimensions="ga:date"
startDate="30daysAgo"
endDate="yesterday">
</google-analytics-chart>
<!-- Step 2: Load the library. -->
<script>
(function(w,d,s,g,js,fjs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>
<script>
gapi.analytics.ready(function() {
// Step 3: Authorize the user.
var CLIENT_ID = 'REMOVED-FOR-PRIVACY';
gapi.analytics.auth.authorize({
container: 'auth-button',
clientid: CLIENT_ID,
});
// Step 4: Create the view selector.
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector'
});
// Step 5: Create the timeline chart.
var chart = new gapi.analytics.googleCharts.DataChart({
query: {
'dimensions': 'ga:country',
'metrics': 'ga:sessions',
'start-date': '30daysAgo',
'end-date': 'yesterday',
},
chart: {
type: 'GEO',
container: 'timeline',
options: {
region: '1', // Western Europe
displayMode: 'markers'
}
}
});
// Step 6: Hook up the components to work together.
gapi.analytics.auth.on('success', function(response) {
viewSelector.execute();
});
viewSelector.on('change', function(ids) {
var newIds = {
query: {
ids: ids
}
}
chart.set(newIds).execute();
});
});
</script>
</body>
</html>
最终,我想嵌入并显示以下两个元素:
我认为这些聚合物元素用于查看访问者有权访问的 GA 帐户数据,而不是让您向用户显示有关您网站的结果。
我建议您使用 Google Data Studio 并创建报告。然后将报告嵌入您的网页。 https://support.google.com/datastudio/answer/7450249?hl=en
另请注意,这不是实时数据,您可以为此使用 real time api,但我不知道有任何开箱即用的解决方案来显示数据。