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

例

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

示例：可以使用实例

https://newtonjoshua.com

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

第1步：设置Google Analytics

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

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

参考

• https://support.google.com/analytics/answer/1008080?hl=en
• https://analytics.google.com

第2步：获取令牌

Google项目

要创建Google Cloud Platform项目，请打开Goog​​le Developers Console（ https://console.developers.google.com ），然后单击“ 创建项目”。

启用OAuth 2.0 API访问权限：

您的应用需要访问用户数据并代表您与其他Google服务联系。使用OAuth 2.0授予您的应用API访问权限。

要启用它，您需要一个客户端ID：

1. 打开Goog​​le API控制台凭据页面（ https://console.developers.google.com/apis/credentials） 。
2. 从项目下拉列表中，选择您的项目。
3. 选择“ 创建凭据”，然后选择“ OAuth客户端ID” 。
4. 在应用程序类型下，选择Web应用程序 ，输入名称和
5. 通过输入JavaScript来源设置限制， 重定向URI以指向您计划显示数据的网站，然后单击创建 。
6. 记下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以查看上述操作中的example。