Javascript 嵌入API第三方可视化Google analytics
我正试图用第三方供应商的API绘制一个谷歌分析图，显示在我自己的仪表板上。我的代码可以工作，但是我注册了几个站点，并且它总是显示相同的默认值，除非我手动更改它（该字段称为Javascript 嵌入API第三方可视化Google analytics,javascript,google-analytics,google-analytics-api,Javascript,Google Analytics,Google Analytics Api,我正试图用第三方供应商的API绘制一个谷歌分析图，显示在我自己的仪表板上。我的代码可以工作，但是我注册了几个站点，并且它总是显示相同的默认值，除非我手动更改它（该字段称为属性）。我想要一个不同的默认网站 我试图隐藏视图选择器并直接放置ID （ga:'xxxx'），如果将其放入图表执行中，则该操作有效： renderWeekOverWeekChart('ga:123456'); 它工作正常，向我显示我想要的正确图表 如何显示活动用户？我不知道在哪里可以定义它的ID值 这是我的代码（我已将客
属性 renderWeekOverWeekChart('ga:123456');
第三方可视化
（功能（w、d、s、g、js、fs）{
g=w.gapi | |（w.gapi={}）；g.analytics={q:[]，ready:function（f）{this.q.push（f）；}；
js=d.createElement；fs=d.getElementsByTagName[0]；
js.src=https://apis.google.com/js/platform.js';
fs.parentNode.insertBefore（js，fs）；js.onload=function（）{g.load（'analytics'）；}；
}（窗口、文档、“脚本”）；
div[id^=“chart”]{
宽度：500px；
高度：300px；
}
gapi.analytics.ready（函数（）{
gapi.analytics.auth.authorize({
容器：“嵌入api身份验证容器”，
客户ID:'XXX'，
});
var activeUsers=new gapi.analytics.ext.activeUsers({
容器：“活动用户容器”，
轮询间隔：5
});
activeUsers.once（'success'，function（）{
var元素=this.container.firstChild；
var超时；
此.on（'change'，函数（数据）{
var元素=this.container.firstChild；
var animationClass=data.delta>0？“正在增加”：“正在减少”；
element.className+=（“”+animationClass）；
clearTimeout（超时）；
timeout=setTimeout（函数（）{
element.className=
element.className.replace（/is-（增加|减少）/g'）；
}, 3000);
});
});
var viewSelector=new gapi.analytics.ext.ViewSelector2({
容器：“视图选择器容器”，
})
.execute（）；
viewSelector.on（'viewChange'，函数（数据）{
var title=document.getElementById（'view-name'）；
title.innerHTML=data.property.name+'（'+data.view.name+'）；
activeUsers.set（data.execute（）；
renderWeekOverWeekChart（data.ids）；
renderYearOverYearChart（data.ids）；
rendertopbrowschert（data.ids）；
renderTopCountriesChart（data.ids）；
});
功能渲染WeekWeekChart（ids）{
//调整“现在”以在不同的日期进行实验，仅用于测试。。。
var now=moment（）；//.subtract（3，'天'）；
var thisWeek=query({
“id”：id，
“尺寸”：“ga:日期，ga:第n天”，
“指标”：“ga:会话”，
“开始日期”：时刻（现在）.减去（1，'天'）.天（0）.格式（'YYYY-MM-DD'），
“结束日期”：时刻（现在）。格式（'YYYY-MM-DD'）
});
var lastWeek=query({
“id”：id，
“尺寸”：“ga:日期，ga:第n天”，
“指标”：“ga:会话”，
“开始日期”：时刻（现在）。减去（1，'天'）。天（0）。减去（1，'周'）
.格式（'YYYY-MM-DD'），
“结束日期”：时刻（现在）。减去（1，'天'）。天（6）。减去（1，'周'）
.格式（'YYYY-MM-DD'）
});
全部（[本周，上周]）然后（函数（结果）{
var data1=results[0].rows.map（函数（row）{return+row[2]；}）；
var data2=results[1].rows.map（函数（row）{return+row[2]；}）；
var labels=results[1].rows.map（函数（行）{return+row[0]；}）；
labels=labels.map（函数（标签）{
返回力矩（标签“YYYYMMDD”）。格式（“ddd”）；
});
风险值数据={
标签：标签，
数据集：[
{
标签：“上周”，
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
数据：数据2
},
{
标签：“本周”，
填充颜色：“rgba（151187205,0.5）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
数据：数据1
}
]
};
新图表（makeCanvas（'Chart-1-container'））。行（数据）；
GenerateGend（'legend-1-container'，data.dataset）；
});
}
功能呈现年份图表（ids）{
//调整“现在”以在不同的日期进行实验，仅用于测试。。。
var now=moment（）；//.subtract（3，'天'）；
var thiswear=query({
“id”：id，
“维度”：“ga:月，ga:月”，
“指标”：“ga:用户”，
“开始日期”：时间（现在）。日期（1）。月份（0）。格式（'YYYY-MM-DD'），
“结束日期”：时刻（现在）。格式（'YYYY-MM-DD'）
});
var lastYear=查询({
“id”：id，
“维度”：“ga:月，ga:月”，
“指标”：“ga:用户”，
“开始日期”：时刻（现在）。减去（1，'年'）。日期（1）。月份（0）
.格式（'YYYY-MM-DD'），
“结束日期”：时间（现在）。日期（1）。月份（0）。减去（1，'天'）
.格式（'YYYY-MM-DD'）
});
全部（[今年，去年]）然后（功能（结果）{
var data1=results[0].rows.map（函数（row）{return+row[2]；}）；
var data2=results[1].rows.map（函数（row）{return+row[2]；}）；
变量标签=['一月'，'二月'，'三月'，'四月'，'五月'，'六月'，
‘七月’、‘八月’、‘九月’、‘十月’、‘十一月’、‘十二月’；
对于（变量i=0，len=labels.length；i<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
<html xmlns="http://ift.tt/lH0Osb">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thirtd Party Visualizations</title>
<link rel="stylesheet" href="https://ga-dev-tools.appspot.com/public/css/main.css" />
<script>
(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'));
</script>
</head>
<body>
<div id="embed-api-auth-container"></div>
<div id="view-selector-container"></div>
<div id="active-users-container"></div>
<h3 id="view-name"></h3>
<style>
div[id^="chart"] {
width: 500px;
height: 300px;
}
</style>
<div id="chart-1-container"></div>
<div id="legend-1-container"></div>
<div id="chart-2-container"></div>
<div id="legend-2-container"></div>
<div id="chart-3-container"></div>
<div id="legend-3-container"></div>
<div id="chart-4-container"></div>
<div id="legend-4-container"></div>
</body>
<script src="https://ga-dev-tools.appspot.com/public/javascript/moment.min.js"></script>
<script src="https://ga-dev-tools.appspot.com/public/javascript/Chart.min.js"></script>
<script src="https://ga-dev-tools.appspot.com/public/javascript/embed-api/view-selector2.js"></script>
<script src="https://ga-dev-tools.appspot.com/public/javascript/embed-api/date-range-selector.js"></script>
<script src="https://ga-dev-tools.appspot.com/public/javascript/embed-api/active-users.js"></script>
<script>
gapi.analytics.ready(function() {
gapi.analytics.auth.authorize({
container: 'embed-api-auth-container',
clientid: 'XXX',
});
var activeUsers = new gapi.analytics.ext.ActiveUsers({
container: 'active-users-container',
pollingInterval: 5
});
activeUsers.once('success', function() {
var element = this.container.firstChild;
var timeout;
this.on('change', function(data) {
var element = this.container.firstChild;
var animationClass = data.delta > 0 ? 'is-increasing' : 'is-decreasing';
element.className += (' ' + animationClass);
clearTimeout(timeout);
timeout = setTimeout(function() {
element.className =
element.className.replace(/ is-(increasing|decreasing)/g, '');
}, 3000);
});
});
var viewSelector = new gapi.analytics.ext.ViewSelector2({
container: 'view-selector-container',
})
.execute();
viewSelector.on('viewChange', function(data) {
var title = document.getElementById('view-name');
title.innerHTML = data.property.name + ' (' + data.view.name + ')';
activeUsers.set(data).execute();
renderWeekOverWeekChart(data.ids);
renderYearOverYearChart(data.ids);
renderTopBrowsersChart(data.ids);
renderTopCountriesChart(data.ids);
});
function renderWeekOverWeekChart(ids) {
// Adjust `now` to experiment with different days, for testing only...
var now = moment(); // .subtract(3, 'day');
var thisWeek = query({
'ids': ids,
'dimensions': 'ga:date,ga:nthDay',
'metrics': 'ga:sessions',
'start-date': moment(now).subtract(1, 'day').day(0).format('YYYY-MM-DD'),
'end-date': moment(now).format('YYYY-MM-DD')
});
var lastWeek = query({
'ids': ids,
'dimensions': 'ga:date,ga:nthDay',
'metrics': 'ga:sessions',
'start-date': moment(now).subtract(1, 'day').day(0).subtract(1, 'week')
.format('YYYY-MM-DD'),
'end-date': moment(now).subtract(1, 'day').day(6).subtract(1, 'week')
.format('YYYY-MM-DD')
});
Promise.all([thisWeek, lastWeek]).then(function(results) {
var data1 = results[0].rows.map(function(row) { return +row[2]; });
var data2 = results[1].rows.map(function(row) { return +row[2]; });
var labels = results[1].rows.map(function(row) { return +row[0]; });
labels = labels.map(function(label) {
return moment(label, 'YYYYMMDD').format('ddd');
});
var data = {
labels : labels,
datasets : [
{
label: 'Last Week',
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : data2
},
{
label: 'This Week',
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : data1
}
]
};
new Chart(makeCanvas('chart-1-container')).Line(data);
generateLegend('legend-1-container', data.datasets);
});
}
function renderYearOverYearChart(ids) {
// Adjust `now` to experiment with different days, for testing only...
var now = moment(); // .subtract(3, 'day');
var thisYear = query({
'ids': ids,
'dimensions': 'ga:month,ga:nthMonth',
'metrics': 'ga:users',
'start-date': moment(now).date(1).month(0).format('YYYY-MM-DD'),
'end-date': moment(now).format('YYYY-MM-DD')
});
var lastYear = query({
'ids': ids,
'dimensions': 'ga:month,ga:nthMonth',
'metrics': 'ga:users',
'start-date': moment(now).subtract(1, 'year').date(1).month(0)
.format('YYYY-MM-DD'),
'end-date': moment(now).date(1).month(0).subtract(1, 'day')
.format('YYYY-MM-DD')
});
Promise.all([thisYear, lastYear]).then(function(results) {
var data1 = results[0].rows.map(function(row) { return +row[2]; });
var data2 = results[1].rows.map(function(row) { return +row[2]; });
var labels = ['Jan','Feb','Mar','Apr','May','Jun',
'Jul','Aug','Sep','Oct','Nov','Dec'];
for (var i = 0, len = labels.length; i < len; i++) {
if (data1[i] === undefined) data1[i] = null;
if (data2[i] === undefined) data2[i] = null;
}
var data = {
labels : labels,
datasets : [
{
label: 'Last Year',
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : data2
},
{
label: 'This Year',
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : data1
}
]
};
new Chart(makeCanvas('chart-2-container')).Bar(data);
generateLegend('legend-2-container', data.datasets);
})
.catch(function(err) {
console.error(err.stack);
})
}
function renderTopBrowsersChart(ids) {
query({
'ids': ids,
'dimensions': 'ga:browser',
'metrics': 'ga:pageviews',
'sort': '-ga:pageviews',
'max-results': 5
})
.then(function(response) {
var data = [];
var colors = ['#4D5360','#949FB1','#D4CCC5','#E2EAE9','#F7464A'];
response.rows.forEach(function(row, i) {
data.push({ value: +row[1], color: colors[i], label: row[0] });
});
new Chart(makeCanvas('chart-3-container')).Doughnut(data);
generateLegend('legend-3-container', data);
});
}
function renderTopCountriesChart(ids) {
query({
'ids': ids,
'dimensions': 'ga:country',
'metrics': 'ga:sessions',
'sort': '-ga:sessions',
'max-results': 5
})
.then(function(response) {
var data = [];
var colors = ['#4D5360','#949FB1','#D4CCC5','#E2EAE9','#F7464A'];
response.rows.forEach(function(row, i) {
data.push({
label: row[0],
value: +row[1],
color: colors[i]
});
});
new Chart(makeCanvas('chart-4-container')).Doughnut(data);
generateLegend('legend-4-container', data);
});
}
function query(params) {
return new Promise(function(resolve, reject) {
var data = new gapi.analytics.report.Data({query: params});
data.once('success', function(response) { resolve(response); })
.once('error', function(response) { reject(response); })
.execute();
});
}
function makeCanvas(id) {
var container = document.getElementById(id);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
container.innerHTML = '';
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
container.appendChild(canvas);
return ctx;
}
function generateLegend(id, items) {
var legend = document.getElementById(id);
legend.innerHTML = items.map(function(item) {
var color = item.color || item.fillColor;
var label = item.label;
return '<li><i style="background:' + color + '"></i>' + label + '</li>';
}).join('');
}
Chart.defaults.global.animationSteps = 60;
Chart.defaults.global.animationEasing = 'easeInOutQuart';
Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = false;
});
</script>
</html>
var activeUsers = new gapi.analytics.ext.ActiveUsers({
ids: 'ga:XXXX',
container: 'active-users-container',
pollingInterval: 5
});