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

Posted 2023-02-22

技术标签:

【中文标题】在我的网站上显示 Google Analytics 数据？【英文标题】：Display Google Analytics data on my web site? 【发布时间】：2014-03-18 06:50:54 【问题描述】：

我正在尝试找出一种方法来在我的网站上显示从 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/

是否有人能够在其网站上成功显示 Google Analytics（分析）数据？

【问题讨论】：

谢谢！会检查的遇到了一些命名空间错误。有点不清楚如何将 GooglChartSharp 添加到项目中，遇到各种错误您可以使用 GoogleAnalyticsAPI。它免费且易于集成。是的，我知道，但是怎么做？一个工作样本会更好.. 我有一个关于它的教程，但还没有发布。今晚我将发布并发送链接给您。 【参考方案1】：

如果其他人遇到同样的问题，这就是我所做的，它几乎回答了这个问题。

以下是 API 客户端的基本代码，该客户端通过您的 Google 服务帐户访问来自 Google Analytics 的数据。 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/

服务器密钥，也可以在这里创建：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)

现在您已经拥有了所需的所有密钥和凭据，是时候开始查看我在“1”中链接的代码了。这是它的基础：https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account

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

注意：您没有制作“Google Plus 服务”，因此您必须为“AnalyticsService”更改这些部分。去管理nuget并安装包：

Google API 核心库 Google API 客户端库 Google API 身份验证客户端库 Google API 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;

最后，这是我的一些代码。请注意，我正在创建一个新的分析，就像 Google 的代码中的“新 ServiceAccountCredentials”一样。这是主要区别： Retrieve data from Google Analytics API with .NET, multiple metrics?

有了这个，我可以访问和查询来自 Google Analytics 帐户的数据。最好的一点是，您不必为此登录 Google，因为密钥和凭据可让您直接访问帐户数据。

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

【讨论】：

你有这方面的博文吗？很遗憾没有。【参考方案2】：

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

示例：在

中提供了一个实时示例

https://newtonjoshua.com

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

第 1 步：设置 Google Analytics

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

登录您的 Google Analytics（分析）帐户。选择“管理”选项卡。从“帐户”列的下拉菜单中选择一个帐户。从“属性”列的下拉菜单中选择一个属性。在属性下，单击跟踪信息 -> 跟踪代码。要收集数据，您必须复制并粘贴 Analytics 跟踪代码到您希望跟踪的每个网页的源代码中。一旦您获得了适用于您的 JavaScript 跟踪代码 sn-p 属性，完全复制 sn-p 而不进行编辑。在之前粘贴您的跟踪代码 sn-p（完整的未更改）您希望网站上每个网页上的结束标记跟踪。成功安装 Analytics 跟踪后，可能需要长达 24 小时的数据，如交通推荐信息、用户报告中显示的特征和浏览信息

参考：

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

创建凭据

OAuth 客户端ID

Web 应用程序

通过输入 JavaScript 来源、重定向 URIs 设置限制，以指向您计划显示数据的网站，然后点击创建。

记下 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国家&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 以查看上面的示例。

【讨论】：

根据要求包含更多详细信息。我已经从您那里删除了 20 个仅文档链接的答案。请不要向我们的网站发送复制粘贴答案的垃圾邮件，尤其是冗余帖子。【参考方案3】：

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

很遗憾，Google 还没有提供示例代码（请参阅 this issue），但 this question on SO 应该会有所帮助。

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

【讨论】：

找到了一个很好的登录解决方案，我直接从 GA 帐户中提取数据，而不是强制登录。效果很好，提供的数据没有不必要的授权问题。我按照本指南将 PlusService 切换到 AnalyticsService ：developers.google.com/api-client-library/dotnet/guide/…【参考方案4】：

我花了几天时间在 Internet 上搜寻一些示例 ASP.NET 代码，但没有成功。我使用了 Koffe14 的方法进行身份验证，还有Linda Lawton's excellent ASP.NET analytics 的例子。

我有posted the code on my website。它不是 MVC，但它可能会帮助需要使用 v3 Google API 将数据从 Google 分析获取到 ASP.NET 网页的其他人。

【讨论】：

【参考方案5】：

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

详情见https://support.google.com/datastudio/answer/7450249?hl=en

你得到

灵活的可视化对共享数据的安全性和控制 0代码也不维护正在缓存结果以获得更好的性能

【讨论】：

【参考方案6】：

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

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

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

【讨论】：

实际上在处理这个项目时注意到了那个页面，但是我想要完全控制并在我的源代码和 .NET/C# 中创建一个客户端。我对最终结果非常满意。我创建了一个客户端，有权访问客户的 Google Analytics 帐户中的数据，查询字符串被发送到 Google API，其中包含来自加密文件的帐户信息，查询参数如“访问者”，开始/结束日期。结果由一个字符串数组组成，其中包含我与查询一起发送的参数。结果数据用 GA 图表可视化。检查我以后的线程。

以上是关于在我的网站上显示 Google Analytics 数据？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用我的管理面板中的Google Analytics记录

Shopify 的传统 Google Analytics 跨域跟踪不传递数据

Azure 上的 Google Analytics API

链接上的Google Analytics事件跟踪

我可以通过 cookie 在 Analytics 中注册用户吗？

来自不同域区域的内容安全策略和 Google Analytics 图像 [重复]