在你的网站中显示 Google Analytics 数据

Created: November-22, 2018

本文档介绍了如何获取 Google Access 令牌并使用它们将 Google Analytics 数据显示在我们的网站中。

示例：可以使用实例

https://newtonjoshua.com

注意：对以下所有步骤使用相同的 Gmail 帐户。

第 1 步：设置 Google Analytics

请按照以下步骤在你的网站中设置 Google Analytics

登录你的 Google Analytics 帐户。
选择管理选项卡。
从 ACCOUNT 列的下拉菜单中选择一个帐户。
从 PROPERTY 列的下拉菜单中选择一个属性。
在 PROPERTY 下，单击跟踪信息>跟踪代码
要收集数据，你必须将 Google Analytics 跟踪代码复制并粘贴到你要跟踪的每个网页的源代码中。
获得属性的 Javascript 跟踪代码段后，请完全复制代码段而不进行编辑。
在你要跟踪的网站上的每个网页上的结束标记之前粘贴跟踪代码段（未完整更改）。
成功安装 Google Analytics 跟踪后，最多可能需要 24 小时才能在报告中显示流量引荐信息，用户特征和浏览信息等数据

参考，

第 2 步：获取令牌

Google 项目：

要创建 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 来源设置限制，重定向 URI 以指向你计划显示数据的网站，然后单击创建。
记下 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 =力＆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

查询资源管理器： 访问嵌入 API 查询资源管理器并进行授权

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 country ＆access_token = { {}的 access_token}

将 POST 请求发送到 URI 以在浏览器中获取数据。

例：

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/

以下示例将在 div 中绘制带有 id =‘countryChart’ 的 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 以查看上述操作中的 exple。