谷歌Analytics(分析)API嵌入:如何自动验证?(Google Analytics Embe

2019-10-22 14:33发布

我使用的是谷歌Analytics(分析)API嵌入嵌入在定制仪表板的一些GA数据。 我使用的是从演示站点的方法:

https://ga-dev-tools.appspot.com/embed-api/

gapi.analytics.auth.authorize({
   container: 'embed-api-auth-container',
   clientid: 'MY CLIENT ID',
});

工作正常。 但是,它需要用户进行身份验证,他们可以看到数据之前。 如何解决这个问题,或使用这种方法自动authenicate(所以任何人都可以访问该页面没有登录)?

A码的例子是在这一点上的理想。 感谢您提供任何帮助。

Answer 1:

从本质上讲,你问代表访问者,授权服务器端。

这个问题的各种形式的被要求之前,因此而不是重新答案我只是给你一些链接:

  • 使用谷歌Analytics(分析)显示的数据子集使用嵌入API的Web应用程序的客户
  • 谷歌Analytics(分析)API嵌入:如何retireve访问令牌?

下面是对文件auth方法,其中讨论了serverAuth选项:
https://developers.google.com/analytics/devguides/reporting/embed/v1/component-reference#auth



Answer 2:

我想使用谷歌Analytics(分析)嵌入在我的管理仪表板。 几个小时后,通过搜索谷歌搜索发现计算器类似的帖子,以及任何其他网站,我已经解决了我的身份验证问题。 然后我想分享。

首先,你要知道,你需要一些凭证。 从您的client_id和client_secret键https://console.developers.google.com 。 您的网站(example.com)添加到认证JS源...并按照指示...

其次,去https://developers.google.com/oauthplayground/并选择API(谷歌分析报告API V4)检查https://www.googleapis.com/auth/analytics和https://www.googleapis.com /auth/analytics.readonly这一点很重要:在按授权蜜蜂按钮,您应该按在页面顶部分辩侧设置按钮。 然后检查设置弹出的“使用自己的OAuth认证”,写自己的client_id client_secret现在你可以按授权蜜蜂按钮。 然后按“为令牌兑换授权码”按钮,复制刷新令牌代码。 似乎是1 / gwPrtXcdqpC_pDXXXXXXXXXXXXXXXXXzvVA。

所以,你已经CLIENT_ID,client_secret和refresh_token(通过设置弹出通过自己的权威性拍摄)

让我们看看JavaScript代码:

当然,加

<script>
        (function (w, d, s, g, js, fs) {
            g = w.gapi || (w.gapi = {}); g.analytics = { q: [], ready: function (f) { this.q.push(f); } };
            js = d.createElement(s); fs = d.getElementsByTagName(s)[0];
            js.src = 'https://apis.google.com/js/platform.js';
            fs.parentNode.insertBefore(js, fs); js.onload = function () { g.load('analytics'); };
        }(window, document, 'script'));
</script>

然后你可以使用这个脚本例子:

<script>

    //CX Google Auth Process   
    var client_id = "111XXXXXXXXXXXXXXXXson.apps.googleusercontent.com";
    var client_secret = "edXXXXXXXXXXXXXXXXabW";    

    function CXAuth(parameters) {
        var credits= { client_secret: client_secret, grant_type: 'refresh_token', refresh_token: '1/AXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXi7', client_id: client_id };
        $.ajax({
            type: "POST",
            url: "https://www.googleapis.com/oauth2/v4/token",
            contentType: "application/x-www-form-urlencoded",
            data: credits,
            dataType: "json",
            success: function (credits) {
                //console.log("CX Auth success");

                gapi.analytics.auth.authorize({
                    serverAuth: {
                        "access_token": credits.access_token,
                        "expires_in": credits.expires_in,
                        "token_type": credits.token_type
                    },
                    container: 'embed-api-auth-container', //Your auth div id in html
                    clientid: client_id,
                    clientsecret: client_secret
                });

            }, error: function (xhr, textStatus, errorThrown) {
                    console.log("cx ajax post error:" + xhr.statusText);                   
                }
        });
    }    

    gapi.analytics.ready(function () {

        CXAuth();

        //CX Get your ids no from https://ga-dev-tools.appspot.com/query-explorer/

        var report = new gapi.analytics.report.Data({
            query: {
                ids: 'ga:18XXXXX',  //Your ids no                  
                //CX ga:visits,ga:sessions,ga:users for Tekil kullanıcı Sayısı-Unique user count
                metrics: 'ga:pageviews',  // Not unique user count  
                dimensions: 'ga:date',
                'start-date': '2018-01-01',
                'end-date': 'today'
            }
        });

        var total = 0;
        report.on('success', function handleCoreAPIResponse(resultsAsObject) {
            if (resultsAsObject.rows.length > 0) {
                resultsAsObject.rows.forEach(function pushNumericColumn(row) {
                    total = Number(total) + Number(row[1]);
                });                    
                document.getElementById("totalCounter").textContent = total;
            }
        });
        report.execute();


        var dataChart = new gapi.analytics.googleCharts.DataChart({
            query: {
                'ids': 'ga:18XXXXX', // <-- Replace with the ids value for your view.
                'start-date': '30daysAgo',
                'end-date': 'today',
                'metrics': 'ga:sessions,ga:users',
                'dimensions': 'ga:date'
            },
            chart: {
                'container': 'site_statistics', //Your div id
                'type': 'LINE',
                'options': {
                    'width': '100%'
                }
            }
        });


        //CX Responsive Google Charts
        window.addEventListener('resize', function () {
            dataChart.execute();                               
        });
        $(document).ready(function () {
            dataChart.execute();             
        });


    });


</script>

终于在你的HTML这样的:

<div id="embed-api-auth-container"></div>
<div id="site_statistics" class="chart"> </div>
<div id="totalCounter">0</div >

如果所有步骤正确,你就可以用你的管理仪表板的js自动刷新令牌,而不在按钮按下的标志手动每次。



Answer 3:

我建议你遵循这样的:

  1. 去这个网站: 谷歌Analytics(分析)
  2. 注册一个谷歌Analytics帐户
  3. 转到管理标签
  4. 创建一个新的属性 (把你的网站URL)
  5. 在新的财产跟踪信息>跟踪代码 ,并有一段代码
  6. 复制,并把每个页面的每一个JS文件,你想在你的网站跟踪
  7. 转到对谷歌分析和实时左侧点击报告选项卡
  8. 开始看到你的网页的用户的实时数据



文章来源: Google Analytics Embed API: How to Auto-Authenticate?