Fetch data from Google Analytics API

Question

What I Want: The website should show the analytics data without Authorization.

What I Did: I have a app on google app engine and enabled API and created service account which gave a json file.

I tried to do same as: https://ga-dev-tools.appspot.com/embed-api/custom-components/ but didn't succeed.

Then I came across this issue: http://code.google.com/p/analytics-issues/issues/detail?id=496 and changed my code as this

<!DOCTYPE html>
<html>
<head>
  <title>Embed API Demo</title>
</head>
<body>

<!-- Step 1: Create the containing elements. -->

<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>

<!-- Step 2: Load the library. -->

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

<script>
gapi.analytics.ready(function() {

  // Step 3: Authorize the user.


  gapi.analytics.auth.authorize({
    serverAuth: '<server auth key>' 
  });

  // Step 4: Create the view selector.

  var viewSelector = new gapi.analytics.ViewSelector({
    container: 'view-selector'
  });

  // Step 5: Create the timeline chart.

  var timeline = new gapi.analytics.googleCharts.DataChart({
    reportType: 'ga',
    query: {
      'dimensions': 'ga:date',
      'metrics': 'ga:sessions',
      'start-date': '30daysAgo',
      'end-date': 'yesterday',
    },
    chart: {
      type: 'LINE',
      container: 'timeline'
    }
  });

  // YOU MUST CALL THIS MANUALLY HERE INSTEAD OF WAITING FOR CALLBACK
  viewSelector.execute();

  // Step 6: Hook up the components to work together.

  gapi.analytics.auth.on('success', function(response) {
    viewSelector.execute();
  });

  viewSelector.on('change', function(ids) {
    var newIds = {
      query: {
        ids: ids
      }
    }
    timeline.set(newIds).execute();
  });
});
</script>
</body>
</html>

I tried seeing couple of documents to get server auth key, but I failed getting it.

Can anyone help in setting the server auth key and by this will my purpose of displaying charts without authentication will resolved?

Thanks, Sharad Soni

This Q&A might help: stackoverflow.com/questions/31057968/… — Dan Cornilescu

DaImTo DaImTo · Accepted Answer · 2015-07-13T06:58:06

Embeded API Getting started

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.

The embedded API was designed to work with Oauh2 and ask a user for authentication it is not designed to work with a service account. I have never seen code for a service account working in JavaScript. That is probably due to the fact that a lot of people myself included do not feel that a service account in client sided JavaScript would be secure, and may even be against Goggles new terms of use.

If you want to use a service account you will need to switch to a server sided language for authentication. the embedded API simply uses Google charts so you can also code that manually.

Fetch data from Google Analytics API

1 Answers