我在我的网站上创建了一个显示我的Google分析报告的页面。实际上我刚刚修改了一些这个演示https://ga-dev-tools.appspot.com/embed-api/custom-components/。
它运行良好,但是当我有太多的表格和图表的某些维度和指标时,一些表格和数据不会出现。有没有人知道如何解决这个问题,或者有人知道如何以不同的方式获取所有数据?
这是我的代码
gapi.analytics.ready(function() {
// authorize google account
gapi.analytics.auth.authorize({
container: 'embed-api-auth-container',
clientid: 'xxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com'
});
// view selector
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector-container'
});
viewSelector.execute();
// date range
var dateRange = {
'start-date': '7daysAgo',
'end-date': 'yesterday'
};
// date range selector
var dateRangeSelector = new gapi.analytics.ext.DateRangeSelector({
container: 'date-range-selector-container'
})
.set(dateRange)
.execute();
// configuration for line chart
var chart1Config = {
query: {
metrics: 'ga:sessions',
dimensions: 'ga:date'
},
chart: {
type: 'LINE',
options: {
width: '100%'
}
}
};
// configuration for operation system
var chart2Config = {
query: {
metrics: 'ga:sessions',
dimensions: 'ga:operatingSystem',
sort: '-ga:sessions',
'max-results': '10'
},
chart: {
type: 'TABLE',
options: {
width: '100%'
}
}
};
var chart3Config = {
query: {
metrics: 'ga:sessions',
dimensions: 'ga:operatingSystem, ga:operatingSystemVersion',
sort: '-ga:sessions',
'max-results': '15'
},
chart: {
type: 'TABLE',
options: {
width: '100%'
}
}
};
// config for browser
var chart4Config = {
query: {
metrics: 'ga:sessions',
dimensions: 'ga:browser',
sort: '-ga:sessions',
'max-results': '10'
},
chart: {
type: 'TABLE',
options: {
width: '100%'
}
}
};
var chart5Config = {
query: {
metrics: 'ga:sessions',
dimensions: 'ga:browser, ga:browserVersion',
sort: '-ga:sessions',
'max-results': '15'
},
chart: {
type: 'TABLE',
options: {
width: '100%'
}
}
};
// mobile
var chart6Config = {
query: {
metrics: 'ga:sessions',
dimensions: 'ga:mobileDeviceBranding',
sort: '-ga:sessions',
'max-results': '10'
},
chart: {
type: 'TABLE',
options: {
width: '100%'
}
}
};
var chart7Config = {
query: {
metrics: 'ga:sessions',
dimensions: 'ga:mobileDeviceBranding, ga:mobileDeviceModel',
sort: '-ga:sessions',
'max-results': '15'
},
chart: {
type: 'TABLE',
options: {
width: '100%'
}
}
};
// audience
var chart8Config = {
query: {
metrics: 'ga:sessions',
dimensions: 'ga:userAgeBracket',
sort: '-ga:sessions'
},
chart: {
type: 'TABLE',
options: {
width: '100%'
}
}
};
var chart9Config = {
query: {
metrics: 'ga:sessions',
dimensions: 'ga:userGender',
sort: '-ga:sessions'
},
chart: {
type: 'TABLE',
options: {
width: '100%'
}
}
};
// Pageviews
var chart10Config = {
query: {
metrics: 'ga:pageviews, ga:uniquePageviews, ga:timeOnPage',
dimensions: 'ga:pagePath, ga:pageTitle',
sort: '-ga:pageviews',
'max-results': '20'
},
chart: {
type: 'TABLE',
options: {
width: '100%'
}
}
};
// traffic sources
var chart11Config = {
query: {
metrics: 'ga:sessions',
dimensions: 'ga:fullReferrer',
sort: '-ga:sessions',
'max-results': '15'
},
chart: {
type: 'TABLE',
options: {
width: '100%'
}
}
};
var chart12Config = {
query: {
metrics: 'ga:sessions',
dimensions: 'ga:keyword',
sort: '-ga:sessions',
'max-results': '15'
},
chart: {
type: 'TABLE',
options: {
width: '100%'
}
}
};
// geo network
var chart13Config = {
query: {
metrics: 'ga:sessions',
dimensions: 'ga:networkLocation',
sort: '-ga:sessions',
'max-results': '10'
},
chart: {
type: 'TABLE',
options: {
width: '100%'
}
}
};
// graph user
var chart14Config = {
query: {
metrics: 'ga:users',
dimensions: 'ga:userType',
sort: '-ga:users'
},
chart: {
type: 'PIE',
options: {
width: '100%'
}
}
};
// chart 1
var dataChart = new gapi.analytics.googleCharts.DataChart(chart1Config)
.set({query: dateRange})
.set({chart: {container: 'chart-container'}});
// chart 2 (Operation System)
var dataChart2 = new gapi.analytics.googleCharts.DataChart(chart2Config)
.set({query: dateRange})
.set({chart: {container: 'chart-container-2'}});
var dataChart3 = new gapi.analytics.googleCharts.DataChart(chart3Config)
.set({query: dateRange})
.set({chart: {container: 'chart-container-3'}});
var dataChart4 = new gapi.analytics.googleCharts.DataChart(chart4Config)
.set({query: dateRange})
.set({chart: {container: 'chart-container-4'}});
var dataChart5 = new gapi.analytics.googleCharts.DataChart(chart5Config)
.set({query: dateRange})
.set({chart: {container: 'chart-container-5'}});
var dataChart6 = new gapi.analytics.googleCharts.DataChart(chart6Config)
.set({query: dateRange})
.set({chart: {container: 'chart-container-6'}});
var dataChart7 = new gapi.analytics.googleCharts.DataChart(chart7Config)
.set({query: dateRange})
.set({chart: {container: 'chart-container-7'}});
var dataChart8 = new gapi.analytics.googleCharts.DataChart(chart8Config)
.set({query: dateRange})
.set({chart: {container: 'chart-container-8'}});
var dataChart9 = new gapi.analytics.googleCharts.DataChart(chart9Config)
.set({query: dateRange})
.set({chart: {container: 'chart-container-9'}});
var dataChart10 = new gapi.analytics.googleCharts.DataChart(chart10Config)
.set({query: dateRange})
.set({chart: {container: 'chart-container-10'}});
var dataChart11 = new gapi.analytics.googleCharts.DataChart(chart11Config)
.set({query: dateRange})
.set({chart: {container: 'chart-container-11'}});
var dataChart12 = new gapi.analytics.googleCharts.DataChart(chart12Config)
.set({query: dateRange})
.set({chart: {container: 'chart-container-12'}});
var dataChart13 = new gapi.analytics.googleCharts.DataChart(chart13Config)
.set({query: dateRange})
.set({chart: {container: 'chart-container-13'}});
var dataChart14 = new gapi.analytics.googleCharts.DataChart(chart14Config)
.set({query: dateRange})
.set({chart: {container: 'chart-container-user'}});
// date range selector
dateRangeSelector.on('change', function(data) {
dataChart.set({query: data}).execute();
dataChart2.set({query: data}).execute();
dataChart3.set({query: data}).execute();
dataChart4.set({query: data}).execute();
dataChart5.set({query: data}).execute();
dataChart6.set({query: data}).execute();
dataChart7.set({query: data}).execute();
dataChart8.set({query: data}).execute();
dataChart9.set({query: data}).execute();
dataChart10.set({query: data}).execute();
dataChart11.set({query: data}).execute();
dataChart12.set({query: data}).execute();
dataChart13.set({query: data}).execute();
dataChart14.set({query: data}).execute();
var datefield = document.getElementById('from-dates');
datefield.innerHTML = data['start-date'] + '—' + data['end-date'];
});
// render chart every view changed
viewSelector.on('change', function(ids) {
dataChart.set({query: {ids: ids}}).execute();
dataChart2.set({query: {ids: ids}}).execute();
dataChart3.set({query: {ids: ids}}).execute();
dataChart4.set({query: {ids: ids}}).execute();
dataChart5.set({query: {ids: ids}}).execute();
dataChart6.set({query: {ids: ids}}).execute();
dataChart7.set({query: {ids: ids}}).execute();
dataChart8.set({query: {ids: ids}}).execute();
dataChart9.set({query: {ids: ids}}).execute();
dataChart10.set({query: {ids: ids}}).execute();
dataChart11.set({query: {ids: ids}}).execute();
dataChart12.set({query: {ids: ids}}).execute();
dataChart13.set({query: {ids: ids}}).execute();
dataChart14.set({query: {ids: ids}}).execute();
});
});
有没有办法检索所有请求的数据,直到页面完全加载,然后显示它们?