POST vs. GET request differences in Google Analytics API Version 4

Question

Google Analytics v4 API now uses POST requests instead of GET request. And there are no good javascript examples out there yet for me to follow. I'm getting empty object Object { }, but I'm sure that data is there and ViewID is correct!

Any advice on what I am doing wrong? or are there any fully working example that I can follow? Thanks.

requestData = function () {
var url = "https://analyticsreporting.googleapis.com/v4/reports:batchGet?";

var params = {
    "reportRequests":[{
        "viewId":"12345678",
        "dateRanges":[{
            "startDate":"yesterday",
            "endDate":"today"
        }],
        "metrics":[{
          "expression":"ga:users"
        }],
        "dimensions": [{
          "name":"ga:pagePath"
        }]
    }]
}

$.ajax({       
    url: url,
    type: "POST",
    data: params,
    dataType: "json",
    success: function(results) {
        console.log(results)
    },
    error: function(xhr, ajaxOptions, thrownError) {
        alert('failed');
        alert(xhr.status);
        alert(thrownError);
    }
});

Answer 1

I would highly recommend you use the Google Javascript Client Library to simplify your life greatly. There are plenty of Code Samples using said library:

var DISCOVERY = 'https://analyticsreporting.googleapis.com/$discovery/rest';

// Load the API from the client discovery URL.
gapi.client.load(DISCOVERY).then(function() {

// Call the Analytics Reporting API V4 batchGet method.
gapi.client.analyticsreporting.reports.batchGet( {
  "reportRequests":[{
    "viewId":"12345678",
    "dateRanges":[{ "startDate":"7daysAgo", "endDate":"today"}],
    "metrics":[{"expression":"ga:users"}],
    "dimensions": [{"name":"ga:pagePath"}]
  }]
}).then(function(response) {
  var formattedJson = JSON.stringify(response.result, null, 2);
  document.getElementById('query-output').value = formattedJson;
}).then(null, function(err) {
  // Log any errors.
  console.log(err);
});

As for getting jQuery to work, a similar question was asked about nodejs Their solution was to set the content-type=application/json which fortunatly has been Asked and answered as well.

var url = "https://analyticsreporting.googleapis.com/v4/reports:batchGet?";

var data = {
  "reportRequests":[{
    "viewId":"12345678",
    "dateRanges":[{ "startDate":"7daysAgo", "endDate":"today"}],
    "metrics":[{"expression":"ga:users"}],
    "dimensions": [{"name":"ga:pagePath"}]
  }]
}

$.ajax({
  url: url,
  type: "POST",
  data: data,
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(results) {
    console.log(results)
  },
  error: function(xhr, ajaxOptions, thrownError) {
    alert('failed');
    alert(xhr.status);
    alert(thrownError);
  }
});