Google Analytics - Embed API - Getting an OAuth Error - google-api

Question

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:
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?

Answer 1

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.