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

然而，由于Google网址（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客户端（此处提供用于查询数据，指标，维度等的属性）
Google GData扩展程序库
分析

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

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”一样。这是主要的区别： Retrieve data from Google Analytics API with .NET, multiple metrics?

通过此功能，我可以访问和查询Google Analytics帐户中的数据。最棒的是，您无需登录Google即可，因为密钥和凭据可让您直接访问帐户数据。

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

Answer 2

我建议使用新的Google APIs Client Library for .NET（目前处于测试阶段）。有关Analytics API的信息可以在此处找到。请注意，.NET客户端库（google-api-dotnet-client）取代了Google Data API的.NET库（google-gdata）。

很遗憾，Google尚未提供示例代码（请参阅this issue），但this question on SO应提供帮助。

如果您不想每次访问Google Analytics数据时都登录，则可以使用offline access使用OAuth 2.0授权。但是，您必须授予对Web应用程序的初始访问权限。这需要您登录一次，但稍后可以使用刷新令牌。

Answer 3

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

示例：

中提供了一个实例

https://newtonjoshua.com

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

第1步：设置Google Analytics

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

登录您的Google Analytics帐户。
选择“管理”标签。
从ACCOUNT列的下拉菜单中选择一个帐户。
从PROPERTY列的下拉菜单中选择一个属性。
在“物业”下，点击“跟踪信息” - ＆gt;跟踪代码。
要收集数据，您必须复制并粘贴Google Analytics跟踪代码在您希望跟踪的每个网页上的源代码中。
为您的JavaScript提供JavaScript跟踪代码段属性，完全复制该片段而不进行编辑。
之前粘贴您的跟踪代码段（未完整更改）结束＆lt; / head＆gt;在您希望的网站上的每个网页上标记轨道。
成功安装Google Analytics跟踪后，可能需要执行此操作最多24小时的数据，如交通推荐信息，用户特征以及要在报告中显示的浏览信息

参考：

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

第2步：获取代币

Google Project：

要创建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}}＆amp; 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}} ＆amp; redirect_uri = {{redirect_uri}} ＆amp; grant_type = authorization_code

您将获得

{＆＃34; refresh_token＆＃34;： 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嵌入API是一个JavaScript库，可让您在几分钟内轻松地在网站上创建和嵌入GA仪表板。

请参阅https://developers.google.com/analytics/devguides/reporting/embed/v1/getting-started。

查询资源管理器：

访问Embed API查询资源管理器并授权

https://ga-dev-tools.appspot.com/query-explorer/

选择要获取数据的视图。

选择所需的指标和维度。

示例：的

获取国家/地区数据（我想知道每个国家/地区访问我网站的用户数量）。

要获取该数据，请选择指标为＆＃39;用户＆＃39;和尺寸为＆＃39; country＆＃39;。

点击运行查询。

您将在表格中找到查询的分析数据。

复制 API查询URI 。并将access_token = {{access_token}} 添加到URI。

示例：的

https://www.googleapis.com/analytics/v3/data/ga?ids= {{IDS}}＆安培;开始日期= 2015年7月1日和安培;结束日期=今天＆安培;度量= GA％3Ausers＆安培;尺寸= 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步：显示数据

现在我们收集了数据。最后，我们必须在我们的网站上显示它们。

＆＃34; 在您的网站上显示实时数据＆＃34;是Google Charts的标题。这就是我们要做的事情。

请参阅https://developers.google.com/chart/。

以下示例将使用id =＆＃39; countryChart＆＃39;在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以查看上述示例。

Answer 4

查看embeddedanalytics.com（免责声明 - 我与他们合作）。

这是一个简单但功能强大的解决方案，适合那些不想学习GA API并且必须将其链接到可视化（例如图表/图表）的人。

基本上定义您的图表并在您希望图表显示的位置嵌入一段代码。我们还支持机制，以便可以轻松集成到自定义构建的CMS或其他Web门户中。

Answer 5

到目前为止，最简单的解决方案是在Google Data Studio中创建Google Analytics（分析）数据的报告（免费的，GA的本机连接器），并共享该报告以嵌入到<iframe>

中

查看有关https://support.google.com/datastudio/answer/7450249?hl=en的详细信息

你得到

灵活的个性化
对共享数据的安全和控制
0代码或维护
正在缓存结果以提高性能

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

5 个答案:

第1步：设置Google Analytics

第2步：获取代币

第3步：获取数据

第4步：显示数据