在我的网站上显示Google Analytics数据？

Question

我正在尝试找出一种方法来显示从我的网站上的Google Analytics收集的数据.我正在使用NopCommerce,我想在管理部分的视图中显示此信息/统计信息.

可能有很多方法可以实现这一点,在搜索网页后我发现了一些使用JavaScript的例子,但我找不到一个很好的教程.

我还研究了将Google Analytics与C#集成,我找到了这个例子:http://biasecurities.com/2012/02/using-the-google-analytics-api-with-asp-net-mvc/#comment- 1310 可以从GitHub下载演示项目:https://github.com/jgeurts/Analytics-Example

但是,演示项目似乎不起作用,因为谷歌URL(https://www.google.com/analytics/feeds/accounts/default)已不再使用.

当我使用MVC应用程序时,最好通过在Controller中应用Google Analytics逻辑并在视图中显示它来实现这一点.或类似的东西.

Google提供了一个在此进行实验的查询工具,因此不应该从Google Analytics中提取数据并在网站上显示数据:https://ga-dev-tools.appspot.com/explorer/

有没有人能够在其网站上成功显示Google Analytics数据？

Answer 1

如果其他人有同样的问题,这就是我所做的,它几乎回答了这个问题.

1.

以下是通过您的Google服务帐户访问Google Analytics数据的API客户端的基本代码.https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account

为了使这个应用程序工作,您需要在开始编码之前准备好几件事.

*Google Analytics帐户 - 一旦注册,就会生成一个"跟踪器"代码,供您放置要跟踪的每个网页.您可能无法立即看到任何统计信息,最多可能需要24小时才能在Google Analytics信息中心显示任何统计信息.

具有CLIENT_ID,CLIENT SECRET和EMAIL ADRESS的OAuth授权(API密钥)(这不是您的普通电子邮件,而是在您进行OAuth授权时为您创建的服务帐户电子邮件).console.developers.google.com/

还可以在此处创建serverkey:console.developers.google.com/.你也可以创建一个浏览器密钥,虽然没有打扰它,但不知道它做了什么.

最后,您需要一个证书密钥.您的应用只能使用密钥和凭据访问您的Google Analytics帐户.密钥是加密的p.12文件.您可以在https://code.google.com/apis/console/中找到该密钥 .

以下是该指南的指南:http://www.pimcore.org/wiki/display/PIMCORE/Setup+Google+Analytics+Reporting+with+OAuth2+Service+Accounts+(since+1.4.6)

2.

现在您已经拥有了所需的所有密钥和凭据,现在是时候开始查看我在"1"中链接的代码了.以下是此基本信息:https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account

创建一个控制台应用程序并实现上面的代码.

注意:您没有制作"Google Plus服务",因此您必须更改"AnalyticsService"的这些部分.去管理nuget并安装包:

• Google Apis核心库
• Google Apis客户端库
• Google Apis Auth客户端库
• Google Apis Analytics.v3库
• Google GData Client(提供用于查询数据,指标,维度等的属性)
• Google GData扩展程序库
• Analytics(分析)

可能会忘记一些东西,但这里是我使用的命名空间:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using System.Security.Cryptography.X509Certificates;
using Google.Apis.Auth.OAuth2;
using Google.Apis.Services;
using Google.Apis.Analytics.v3;

3

最后,这是我的一些代码.请注意,我正在创建一个新的Google Analytics,因为它应该像Google的代码中的"新ServiceAccountCredentials"一样.这是主要区别: 使用.NET从多个指标中检索Google Analytics API的数据？

有了这个,我就可以访问和查询Google Analytics帐户中的数据.最好的部分是您不必登录Google,因为密钥和凭据可让您直接访问帐户数据.

我将此代码迁移到MVC现在我可能会在稍后更新如何在Mvc中实现此Analytics客户端.

Answer 2

本文档说明了如何获取 Google Access 令牌并使用它们来获取要在我们网站上显示的 Google Analytics 数据。

示例：一个活生生的例子可在

https://newtonjoshua.com

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

第 1 步：设置 Google Analytics

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

1. 登录您的 Google Analytics（分析）帐户。
2. 选择管理选项卡。
3. 从 ACCOUNT 列的下拉菜单中选择一个帐户。
4. 从属性列的下拉菜单中选择一个属性。
5. 在属性下，单击跟踪信息 -> 跟踪代码。
6. 要收集数据，您必须将 Google Analytics（分析）跟踪代码复制并粘贴到您希望跟踪的每个网页的源代码中。
7. 为您的媒体资源创建 JavaScript 跟踪代码段后，请准确复制该代码段，不要对其进行编辑。
8. 在您要跟踪的网站上的每个网页上的结束 </head> 标记之前粘贴您的跟踪代码段（未更改，全部）。
9. 成功安装 Google Analytics（分析）跟踪后，流量引荐信息、用户特征和浏览信息等数据最多可能需要 24 小时才会显示在您的报告中

参考：

1. https://support.google.com/analytics/answer/1008080?hl=en
2. 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：

1. 打开 Google API 控制台凭据页面 ( https://console.developers.google.com/apis/credentials )。
2. 从项目中，下拉并选择您的项目。
3. 选择Create credential并选择OAuth client ID。
4. 在应用程序类型下，选择Web 应用程序，输入名称和

5. 通过输入JavaScript origins设置限制，重定向 URI以指向您计划显示数据的网站，然后单击Create。

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= 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 country &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以查看上述示例。