Question

我正在尝试按照示例here在我的网络应用中嵌入一些Google Analytics统计信息。

我的HTML如下所示：

<div class="page-header">
    <h3 class="text-center">WAND Sessions</h3>
</div>

<br/>
<br/>

<div id="embed-api-auth-container"></div>
<div id="chart-container"></div>
<div id="view-selector-container"></div>

@section Scripts {
    <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 src="~/Scripts/GoogleAnalytics/viewSessions.js"></script>
}

我的viewSessions.js文件如下所示：

$(document).ready(function () {
    gapi.analytics.ready(function () {

        /**
         * Authorize the user immediately if the user has already granted access.
         * If no access has been created, render an authorize button inside the
         * element with the ID "embed-api-auth-container".
         */
        gapi.analytics.auth.authorize({
            container: 'embed-api-auth-container',
            clientid: 'xxxxxxxxx'
        });

        /**
         * Create a new ViewSelector instance to be rendered inside of an
         * element with the id "view-selector-container".
         */
        var viewSelector = new gapi.analytics.ViewSelector({
            container: 'view-selector-container'
        });

        // Render the view selector to the page.
        viewSelector.execute();


        /**
         * Create a new DataChart instance with the given query parameters
         * and Google chart options. It will be rendered inside an element
         * with the id "chart-container".
         */
        var dataChart = new gapi.analytics.googleCharts.DataChart({
            query: {
                metrics: 'ga:sessions',
                dimensions: 'ga:date',
                'start-date': '30daysAgo',
                'end-date': 'yesterday'
            },
            chart: {
                container: 'chart-container',
                type: 'LINE',
                options: {
                    width: '100%'
                }
            }
        });


        /**
         * Render the dataChart on the page whenever a new view is selected.
         */
        viewSelector.on('change', function (ids) {
            dataChart.set({ query: { ids: ids } }).execute();
        });

    });
});

当我加载页面时，我看到的只有：

如果我点击此处，我会收到一个Google错误对话框

401 Error: invalid_client

The OAuth client was not found.

知道什么是错的吗？

Answer 1

该页面上的文档不是很好。我过去曾向谷歌提过这一点。

您需要访问Google Developers控制台并使用OAuth凭据创建自己的客户端ID。

Google Analytics Embeded API getting started页面会告诉您如何执行此操作。

创建新客户ID

Embed API为您处理几乎所有授权过程   通过提供使用熟悉的一键式登录组件   OAuth 2.0流程。为了让这个按钮在你的页面上运行   你需要一个客户ID。

如果您从未创建过客户端ID，可以按照以下步骤进行操作   指令。

当您查看说明时，重要的是不要   忽略这两个关键步骤：•启用Analytics API
•设置   正确的起源

起源控制允许哪些域使用此代码   授权用户。这可以防止其他人复制您的代码和   在他们的网站上运行它。

例如，如果您的网站托管在域example.com上，请生成   确保为您的客户端ID设置以下来源   http://example.com。如果您想在本地测试代码，则需要   添加本地服务器的原点，例如：   http://localhost:8080

Google Analytics（分析） - 嵌入API - 获取OAuth错误

1 个答案: