在我的网站上显示 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

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

由于我使用的是 MVC 应用程序，因此最好通过在控制器中应用 Google Analytics 逻辑并将其显示在视图中来实现这一点。 或类似的东西。

谷歌在这里提供了一个查询工具来试验，所以不应该从谷歌分析中硬提取数据并将数据显示在网站上： https : //ga-dev-tools.appspot.com/explorer/

有没有人能够在他们的网站上成功显示谷歌分析数据？

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 Dashboard 中显示任何统计信息。

带有 CLIENT_ID、CLIENT SECRET 和电子邮件地址的 OAuth 授权（API 密钥）（这不是您的普通电子邮件，而是在您进行 OAuth 授权时为您创建的服务帐户电子邮件）。 console.developers.google.com/

服务器密钥，也可以在此处创建：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 API 核心库
• Google API 客户端库
• Google APIs Auth 客户端库
• Google APIs Analytics.v3 库
• Google GData 客户端（提供用于查询数据、指标、维度等的属性）
• 谷歌 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

最后，这是我的一些代码。 注意我正在创建一个新的分析，就像谷歌的代码一样应该是“新的 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 ) 并单击Create Project。

启用 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以查看上述示例。

Answer 3

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

不幸的是，谷歌还没有可用的示例代码（请参阅此问题），但是关于 SO 的这个问题应该会有所帮助。

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

Answer 4

我花了几天时间在 Internet 上搜寻一些示例 ASP.NET 代码，但没有走运。 我使用了 Koffe14 的身份验证方法，以及Linda Lawton 出色的 ASP.NET 分析示例。

我已经在我的网站上发布了代码。 它不是 MVC，但它可能会帮助需要使用 v3 Google API 将数据从 Google 分析获取到 ASP.NET 网页的其他人。

Answer 5

迄今为止，最简单的解决方案是在 Google Data Studio（免费，GA 的本机连接器）中创建您的 Google Analytics 数据报告，然后共享该报告以嵌入<iframe>

请参阅https://support.google.com/datastudio/answer/7450249?hl=en 上的详细信息

你得到

• 灵活的可视化
• 共享数据的安全性和控制
• 0 代码或维护
• 结果被缓存以获得更好的性能

Answer 6

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

这是一个简单但功能强大的解决方案，适用于不想学习 GA API 然后不得不将其链接到可视化（例如图表/图形）的人。

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