本文档说明了如何获取 Google 访问令牌并使用它们来获取要在我们的网站上显示的 Google Analytics（分析）数据。
示例：在
中提供了一个实时示例
https://newtonjoshua.com
注意：以下所有步骤使用同一个 Gmail 帐户。
第 1 步：设置 Google Analytics
按照以下步骤在您的网站上设置 Google Analytics
- 登录您的 Google Analytics（分析）帐户。
- 选择“管理”选项卡。
- 从“帐户”列的下拉菜单中选择一个帐户。
- 从“属性”列的下拉菜单中选择一个属性。
- 在属性下，单击跟踪信息 -> 跟踪代码。
- 要收集数据，您必须复制并粘贴 Analytics 跟踪代码
到您希望跟踪的每个网页的源代码中。
- 一旦您获得了适用于您的 JavaScript 跟踪代码 sn-p
属性，完全复制 sn-p 而不进行编辑。
- 在之前粘贴您的跟踪代码 sn-p（完整的未更改）
您希望网站上每个网页上的结束 标记
跟踪。
- 成功安装 Analytics 跟踪后，可能需要
长达 24 小时的数据，如交通推荐信息、用户
报告中显示的特征和浏览信息
参考：
- https://support.google.com/analytics/answer/1008080?hl=en
- https://analytics.google.com
第 2 步：获取令牌
谷歌项目：
要创建 Google Cloud Platform 项目，请打开 Google Developers Console (https://console.developers.google.com) 并点击创建项目。
启用 OAuth 2.0 API 访问：
您的应用程序需要代表您访问用户数据并联系其他 Google 服务。使用 OAuth 2.0 授予您的应用 API 访问权限。
要启用它，您需要一个客户端 ID：
- 打开 Google API 控制台凭据页面 (https://console.developers.google.com/apis/credentials)。
- 从项目中，下拉并选择您的项目。
- 选择创建凭据，然后选择OAuth 客户端ID。
- 在应用程序类型下，选择Web 应用程序，输入名称并
通过输入 JavaScript 来源、重定向 URIs 设置限制，以指向您计划显示数据的网站，然后点击创建。
记下 OAuth 2.0 client_id 和 client_secret。您将需要它们来配置 UI。
获取授权码：
在浏览器中输入：
https://accounts.google.com/o/oauth2/auth?scope=https://www.googleapis.com/auth/analytics.readonly&response_type=code&client_id={{
client_id}}&redirect_uri={{redirect_uri }}
&approval_prompt=force&access_type=离线
你会被重定向到
{{redirect_uri }}?code=={{authorization_code}}#
获取刷新令牌：
发送一个 POST 请求，可能通过REST 控制台到
https://www.googleapis.com/oauth2/v3/token?code={{authorization_code}}
&client_id={{client_id}}&client_secret={{client_secret}}
&redirect_uri={{redirect_uri }}&grant_type=authorization_code
你会得到一个 JSON 响应
{"refresh_token": refresh_token}
您可以使用刷新令牌获取访问令牌以访问 Google API。
获取访问令牌：
发送 POST 请求到，
https://www.googleapis.com/oauth2/v3/token?client_id={{client_id}}
&client_secret={{client_id}}
&grant_type=refresh_token&refresh_token={{refresh_token}}
您将在响应中获得带有 access_token 的 JSON。
{access_token: {{access_token}}}
例子：
var access_token = '';
function getAccessToken(){
$.post('https://www.googleapis.com/oauth2/v3/token', {
client_id: {{client_id}},
client_secret: {{client_secret}},
grant_type: 'refresh_token',
refresh_token: {{refresh_token}}
}, function (data, status) {
if (status === 'success') {
access_token = data.access_token;
// Do something eith the access_token
}
else {
console.error(status);
}
});
}
检查令牌有效性：
发送 POST 请求到，
https://www.googleapis.com/oauth2/v1/tokeninfo?access_token={{access_token}}
例子：
function checkValidity() {
$.post('https://www.googleapis.com/oauth2/v1/tokeninfo', {
access_token:{{access_token}}
}).done(function (data, status) {
if (status === 'success') {
console.debug(data.expires_in);
var check = false;
check = data.hasOwnProperty('expires_in');
if (check) {
// Token is valid
}
if (!check) {
getAccessToken();
}
}
else {
console.debug(status);
}
})
.fail(function (data) {
console.error(data);
getAccessToken();
});
}
第 3 步：获取数据
嵌入 API：
GA Embed API 是一个 JavaScript 库，可让您在几分钟内轻松创建 GA 仪表板并将其嵌入您的网站。
请参阅https://developers.google.com/analytics/devguides/reporting/embed/v1/getting-started。
查询资源管理器：
访问 Embed API Query Explorer 并授权
https://ga-dev-tools.appspot.com/query-explorer/
选择要获取数据的视图。
选择所需的指标和维度。
例子：
获取国家/地区数据（我想知道每个国家/地区访问我网站的用户数量）。
要获取该数据，请将指标选择为“用户”，将维度选择为“国家/地区”。
点击运行查询。
您会在表格中找到查询的分析数据。
复制 API 查询 URI。并将 access_token={{access_token}} 添加到 URI。
例子：
https://www.googleapis.com/analytics/v3/data/ga?ids={{ids}}&start-date=2015-07-01&end-date=today&metrics=ga%3Ausers&dimensions=ga%3A国家&access_token={{access_token}}
向 URI 发送 POST 请求以获取浏览器中的数据。
例子：
function gaGetCountry() {
$.get('https://www.googleapis.com/analytics/v3/data/ga?' +
'ids={{ids}}' +
'start-date=2015-07-01&' +
'end-date=today&' +
'metrics=ga%3Ausers&' +
'dimensions=ga%3Acountry&' +
'sort=ga%3Ausers&' +
'filters=ga%3Ausers%3E10&' +
'max-results=50' +
'&access_token=' + {{access_token}},
function (data, status) {
if (status === 'success') {
// Display the Data
drawRegionsMap(data.rows);
} else {
console.debug(status);
}
});
}
第 4 步：显示数据
现在我们已经收集了数据。最后，我们必须在我们的网站上展示它们。
“在您的网站上显示实时数据”是 Google Charts 的标题。这就是我们要做的。
请参阅https://developers.google.com/chart/。
以下示例将在 id='countryChart' 的 div 中绘制 GeoChart。
// Draw country chart
function drawRegionsMap(data) {
var head = data[0];
head[0] = 'Country';
head[1] = 'Users';
for (var i = 1; i < data.length; i++) {
var d = data[i];
d[1] = Number(d[1]);
}
var chartData = google.visualization.arrayToDataTable(data);
var options = {
title: 'My Website is viewed from,',
domain: '{{Country Code eg: IN for India}}',
tooltip: {
textStyle: {
color: 'navy'
},
showColorCode: true
},
legend: {
textStyle: {
color: 'navy',
fontSize: 12
}
},
colorAxis: {
colors: ['#00FFFF', '#0000FF']
}
};
var chart = new google.visualization.GeoChart(document.getElementById('countryChart'));
chart.draw(chartData, options);
}
请参阅https://newtonjoshua.com 以查看上面的示例。