Manipulating returned Google Analytics API data in Javascript

Question

I'm trying to use the Google Analytics Embed API to create text-based statements on KPI-performance, to sit above a dashboard. An example statement might be something like: "There were X online transactions this week, which was a change of Y% on last week's performance, this came from Z sessions giving an approximate value-per-session of $abc". And so on.. The intent is that this would be useful insights from the data that, could be automatically generated and should take less space on a page than say a graph or chart.

To achieve this I need to be able to:

1. Query the API
2. Manipulate the returned results/perform basic calculations
3. Send these results to my HTML page

Seems I am able to do steps 1 and 3. I can perform queries on the API and send these to my HTML page but I am stuck on step 2 - manipulating / changing the returned results in the way I want to.

Taking a real example - let's say I want to show week-on-week change in my session data. I can get the last 7 days worth of data and send these to the element (box1) on my page using the following code:

 var lastSevenDays = new gapi.analytics.report.Data({
      query: {
     ids: 'ga:123456789',
          'start-date':'7daysAgo',
          'end-date':'today',
          'metrics': 'ga:sessions'
        }
       });

       lastSevenDays.on('success', function(lastSevenDays) {
             for (var prop in lastSevenDays) {
              var outputDiv = document.getElementById('box1');
              outputDiv.innerHTML = lastSevenDays[prop];   
         }  
            console.log(lastSevenDays);

    }); 
  lastSevenDays.execute();

  //profile id: 123456789 isn't real in this example. 

This works fine and session data for the last 7 days is written to my page.

However, when I try and combine this with my second query, the data from the previous 7 days, send this to the page as box2 (second query) and finally box3 (difference in the numbers) something doesn't work.

Code attempt below. I'm thinking it could be possible my first query is returning an array from the Google Analytics API, which when outputted to a HTML page seems to work, since there is only one value in the array.

  var lastSevenDays = new gapi.analytics.report.Data({
  query: {
    ids: 'ga:123456789',
      'start-date':'7daysAgo',
      'end-date':'today',
      'metrics': 'ga:sessions'
    }
   });  
   lastSevenDays.on('success', function(lastSevenDays) {
         for (var prop in lastSevenDays) {
          var outputDiv = document.getElementById('box1');
          outputDiv.innerHTML = lastSevenDays[prop];   
         }  
            console.log(lastSevenDays);             
    }); 
  lastSevenDays.execute();

  // The previous 7 days 

  var previousSevenDays = new gapi.analytics.report.Data({
  query: {
    ids: 'ga:123456789',
      'start-date':'7daysAgo',
      'end-date':'today',
      'metrics': 'ga:sessions'
    }
   });  
   previousSevenDays.on('success', function(previousSevenDays) {
         for (var prop in previousSevenDays) {
          var outputDiv = document.getElementById('box2');
          outputDiv.innerHTML = previousSevenDays[prop];   
         }  
            console.log(previousSevenDays);

    }); 
  previousSevenDays.execute();

  // Week on week change, where I am going wrong:

  var weekOnWeekChange = lastSevenDays - previousSevenDays; 
     weekOnWeekChange.on('success', function(weekOnWeekChange) {
         for (var prop in weekOnWeekChange) {
          var outputDiv = document.getElementById('box3');
          outputDiv.innerHTML = weekOnWeekChange[prop];   
         }  
            console.log(weekOnWeekChange);

    }); 
  weekOnWeekChange.execute();


  //profile id: 123456789 isn't real in this example. 

I'm a marketeer just trying to learn a bit more, not a coder. Therefore I am not too familiar with Javascript. So I really appreciate the advice of anyone who can point me in the right direction.

So please excuse any massive errors of mine and thank you in advance for any help.

Answer 1

I would start by adding some logging

....
'success', function(weekOnWeekChange) {
   console.log(weekOnWeekChange);

Use cmd+alt+j (on a mac) to open the console. then you will be able to see what is being returned by the functions