如何使用来自 Google Analytics 的数据在我的网站中显示页面访问？答案

【问题标题】：How to display page visits in my web site using data from Google Analytics?如何使用来自 Google Analytics 的数据在我的网站中显示页面访问？
【发布时间】：2019-08-03 22:27:50
【问题描述】：

我有一个网站，我希望在我发布的每篇文章中显示访问该页面的人数。

我的想法是通过从我的 Google Analytics（分析）帐户中获取此数据来显示页面访问次数。

通过关注tutorial on Google Analytics 处理报告，我创建了一小段代码来检索特定页面的访问次数：

let analytics_api_controller = (function () {
    const API_KEY = "<secret>";
    const CLIENT_ID = "<secret>";

    function authenticate() {
        return gapi.auth2.getAuthInstance()
            .signIn({ scope: "https://www.googleapis.com/auth/analytics https://www.googleapis.com/auth/analytics.readonly" })
            .then(function () { console.log("Sign-in successful"); },
                function (err) { console.error("Error signing in", err); });
    }

    function loadClient() {
        gapi.client.setApiKey(API_KEY);
        return gapi.client.load("https://content.googleapis.com/discovery/v1/apis/analyticsreporting/v4/rest")
            .then(function () { console.log("GAPI client loaded for API"); },
                function (err) { console.error("Error loading GAPI client for API", err); });
    }

    function execute() {
        return gapi.client.analyticsreporting.reports.batchGet({
            "resource": {
                "reportRequests": [{
                    "viewId": "<secret>",
                    "dateRanges": [{
                        "startDate": "2018-03-01",
                        "endDate": "2019-05-01"
                    }],
                    "metrics": [{ "expression": "ga:pageviews" }],
                    "dimensions": [{ "name": "ga:pagePath" }],
                    "dimensionFilterClauses": [{
                        "filters": [{
                            "operator": "EXACT",
                            "dimensionName": "ga:pagePath",
                            "expressions": ["/articles/2019/05/10/myarticle.html"]
                        }]
                    }]
                }]
            }
        }).then(function (response) {
            // Handle the results here (response.result has the parsed body).
            console.log("Response", response);
        }, function (err) {
            console.error("Execute error", err);
        });
    }

    function _viewsPerPage(pageUrl) {
        return execute();
    }

    // Ctor
    window.addEventListener("load", function(e) {
        gapi.load("client:auth2", function () {
            gapi.auth2.init({ client_id: CLIENT_ID });
        });

        this.window.setTimeout(function() {
            authenticate().then(loadClient);
        }, 2000);
    });

    return {
        viewsPerPage: _viewsPerPage
    };
})();

setTimeout 是我添加的，用于快速解决一些时间问题（我需要等待 API 加载，稍后我会妥善解决）。

问题

代码运行良好，结果如下：

页面加载完毕。
代码启动并要求我登录以授予从我的 Google 帐户访问我的分析报告的权限。
我同意。
在 F12 工具中我手动运行：analytics_api_controller.viewsPerPage()，它会在控制台中为我提供报告。

问题是第2点！每次我加载页面时，都会要求我登录并给予许可。这个东西应该投入生产，所以每个用户都会被提示访问我的分析信息？我假设如果他们尝试他们会失败......

为什么要求我登录才能使用此 API？
我是否使用正确的 API 来解决此问题？

我想我并没有真正理解我应该如何使用 Google Analytics API。我究竟做错了什么？应该如何实现这个目标？

【问题讨论】：

标签： javascript google-analytics web-site-project

【解决方案1】：

您使用的Client-side Application 需要用户登录才能访问您的谷歌分析数据。您应该使用Service Application，允许您的应用登录并访问您的谷歌分析数据（服务器端）。

PHP quickstart for service accounts

【讨论】：