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: http://stackoverflow.com/questions/31057968/showing-google-analytics-data-in-real-time/31058732#31058732 — Dan Cornilescu, Jul 14 '15 at 04:36

score 2 · Accepted Answer · answered Jul 13 '15 at 06:58

2

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.

answered Jul 13 '15 at 06:58

Linda Lawton - DaImTo

106,405
32
180
449

Thanks DalmTo, can you share any useful doc to implement the authorization on PHP. – Sharad Soni Jul 13 '15 at 07:01
(Googles tutorial )https://developers.google.com/analytics/devguides/reporting/core/v3/quickstart/service-php (my tutorial )http://www.daimto.com/google_service_account_php/ – Linda Lawton - DaImTo Jul 13 '15 at 07:07
1

To be needlessly nitpicky there is actually a case where this works with javascript (discussed here: http://stackoverflow.com/questions/28070463/google-analytics-embed-api-how-to-retireve-access-token). But that is with node.js where the JS is executed on the server and the key file is never accessible via the browser. – Eike Pierstorff Jul 13 '15 at 07:07
1

@EikePierstorff you still need to contact me so we can debate this. But I still say its against terms of use. Anyone will have access to your data. If google thought it was secure they would document it they haven't makes me think its a bad idea. – Linda Lawton - DaImTo Jul 13 '15 at 07:08
1

@DaImTo, I absolutely do not think it's a good idea, I was just pointing out that someone claims to have done it (I'm afraid I'm a bit of a smartass sometimes, but I try to make up for it by occassionally coming up with a helpful answer). – Eike Pierstorff Jul 13 '15 at 07:12
Thanks, DalmTo. I will see your post and will try to implement, but as EikePierstorff said, it might be possible to use directly from JS, the issue id that I provided has a post from google project member stating that it works and gave this link as reference: http://jsbin.com/vukezoheyeco/3/edit – Sharad Soni Jul 13 '15 at 07:13
I have been wondering if you could hack the embedded API have the authentication back (php) end spit out a access token to the javascript client side. I just haven't had time to play with it – Linda Lawton - DaImTo Jul 13 '15 at 07:16
Hi DalmTo, I had refereed your blog post and tried to set up as per the instruction, but when I hit the web locally, I am having an error: Fatal error: Uncaught exception 'Google_IO_Exception' with message 'HTTP Error: Unable to connect: 'fopen(compress.zlib://https://www.googleapis.com/analytics/v3/data/ga?ids=ga%3A89798036&start-date=2014-12-14&end-date=2014-12-14&metrics=ga%3Ausers%2Cga%3Asessions&dimensions=ga%3AuserType): failed to open stream: operation failed'' Can you please guide me, where I am going wrong. – Sharad Soni Jul 13 '15 at 18:07

Fetch data from Google Analytics API

1 Answers1