Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/432.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在我的网站上显示谷歌分析数据?_Javascript_Asp.net Mvc_Google Analytics_Google Analytics Api_Nopcommerce - Fatal编程技术网

Javascript 在我的网站上显示谷歌分析数据?

Javascript 在我的网站上显示谷歌分析数据?,javascript,asp.net-mvc,google-analytics,google-analytics-api,nopcommerce,Javascript,Asp.net Mvc,Google Analytics,Google Analytics Api,Nopcommerce,我正试图找到一种在我的网站上显示从谷歌分析收集的数据的方法。我正在使用NopCommerce,我想在管理部分的视图中显示此信息/统计信息 可能有很多方法可以实现这一点,在搜索web之后,我找到了一些使用JavaScript的示例,但是我找不到关于这一点的好教程 我还研究了将Google Analytics与C#集成的问题,我发现了以下示例: 可以从GitHub下载演示项目,网址为: 然而,由于googleurl()不再使用,这个演示项目似乎不起作用 因为我使用的是MVC应用程序,所以最好是在控制

我正试图找到一种在我的网站上显示从谷歌分析收集的数据的方法。我正在使用NopCommerce,我想在管理部分的视图中显示此信息/统计信息

可能有很多方法可以实现这一点,在搜索web之后,我找到了一些使用JavaScript的示例,但是我找不到关于这一点的好教程

我还研究了将Google Analytics与C#集成的问题,我发现了以下示例: 可以从GitHub下载演示项目,网址为:

然而,由于googleurl()不再使用,这个演示项目似乎不起作用

因为我使用的是MVC应用程序,所以最好是在控制器中应用Google分析逻辑并在视图中显示它。或者类似的

谷歌在这里提供了一个查询工具进行实验,因此,从谷歌分析中提取数据并在网站上显示数据不应该是一件困难的事情:


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

我建议使用新的(目前处于测试阶段)。有关的信息可以在这里找到。请注意,用于.NET的客户端库(google api dotnet客户端)将取代用于google数据api(google gdata)的.NET库

不幸的是,Google还没有提供示例代码(请参阅),但应该会有所帮助


如果您不想每次访问分析数据时都登录,可以使用OAuth 2.0授权。不过,您必须授予对web应用程序的初始访问权限。这要求您登录一次,但您可以在以后使用刷新令牌。

如果其他人也有同样的问题,下面是我所做的,它基本上回答了这个问题

1.

下面是API客户端的基本代码,该客户端通过您的Google服务帐户访问Google Analytics中的数据

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

*谷歌分析账户-一旦注册,就会生成一个“跟踪器”代码,供您放在您想要跟踪的每个网页上。您可能无法立即看到任何统计数据,而且在Google Analytics仪表板中显示任何统计数据之前,可能需要24小时

具有客户ID、客户机密和电子邮件地址的OAuth授权(API密钥)(这不是您的普通电子邮件,而是在您进行OAuth授权时为您创建的服务帐户电子邮件)。 console.developers.google.com/

也可以在这里创建一个serverkey:console.developers.google.com/。 你也可以创建一个浏览器键,但你不知道它是做什么的

最后,您需要一个证书密钥。您的应用程序将只能使用密钥和凭据访问您的Google Analytics帐户。密钥是一个加密的p.12文件。你可以在里面找到钥匙

以下是关键点的指南:

2.

现在,您已经拥有了所需的所有密钥和凭据,是时候开始查看我在“1”中链接的代码了。下面是它的基本原理:

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

注意:您没有制作“Google Plus服务”,因此您必须将这些部分更改为“AnalyticsService”。转到管理nuget并安装软件包:

  • 谷歌API核心库
  • 谷歌API客户端库
  • 谷歌API认证客户端库
  • Google API 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”,就像谷歌的代码一样。这就是主要区别:

有了这个,我可以从谷歌分析账户访问和查询数据。最好的一点是,你不必为此登录谷歌,因为密钥和凭证让你可以直接访问帐户数据

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

请签出(免责声明-我与他们一起工作)

这是一个简单但功能强大的解决方案,适用于那些不想学习GA API并将其与可视化(如图表/图形)联系起来的人


基本上定义图表,并在希望图表显示的位置嵌入一段代码。我们还支持各种机制,因此很容易集成到定制的CMS或其他门户网站中。

我花了几天时间在互联网上搜寻一些ASP.NET代码示例,但运气不好。我使用了Koffe14的方法进行身份验证,并给出了一个示例


我有。它不是MVC,但它可能会帮助其他需要使用v3 Google API从Google analytics获取数据到ASP.NET网页的人。

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

示例:

注意:在下面的所有步骤中使用相同的Gmail帐户


步骤1:设置谷歌分析 按照以下步骤在您的网站上设置Google Analytics

  • 登录到您的分析帐户
  • 选择管理选项卡
  • 从“帐户”列的下拉菜单中选择一个帐户
  • 从“特性”列的下拉菜单中选择特性
  • 在属性下,单击跟踪信息->跟踪代码
  • 要收集数据,必须复制并粘贴分析跟踪代码 在您希望跟踪的每个网页上输入源代码
  • 一旦你有了你的JavaScript跟踪代码片段 属性,完全复制代码段
    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);
                }
            });
    }
    
    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();
            });
    }
    
    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);
                }
    
            });
    }
    
    // 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);
    }