Search code examples
google-apigoogle-apps

Google Analytics - Embed API - Getting an OAuth Error


I am trying to follow the example here to embed some Google Analytics statistics in my web app.

My HTML looks as follows:

<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>
}

My viewSessions.js file looks like this:

$(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();
        });

    });
});

When I load my page, all I see is this:

enter image description here

If I click on this, I get a Google error dialog saying

401 Error: invalid_client

The OAuth client was not found.

Any idea what's wrong?


Solution

  • The documentation on that page is not very good. I have mentioned this to Google in the past.

    You need to go to Google Developers console and create your own client id using an OAuth credentials.

    The Google Analytics Embeded API getting started page tells you how to do that.

    Create a New Client ID

    The Embed API handles almost all of the authorization process for you by providing a one-click sign-in component that uses the familiar OAuth 2.0 flow. In order to get this button working on your page you'll need a client ID.

    If you've never created a client ID, you can do so by following these instructions.

    As you go through the instructions, it's important that you not overlook these two critical steps: • Enable the Analytics API
    • Set the correct origins

    The origins control what domains are allowed to use this code to authorize users. This prevents other people from copying your code and running it on their site.

    For example, if your website is hosted on the domain example.com, make sure to set the following origin for your client ID http://example.com. If you want to test your code locally, you'll need to add the origin for your local server as well, for example: http://localhost:8080.