How to load Youtube Monetary data to HTML based on contentOwner

Question

I am trying to take input from an html form and display youtube analytics for a content owner. I have modified the below sample:

https://developers.google.com/youtube/analytics/v1/sample-application

I am using the following scopes

var OAUTH2_SCOPES = [ 'https://www.googleapis.com/auth/yt-analytics.readonly', 'https://www.googleapis.com/auth/yt-analytics-monetary.readonly', 'https://www.googleapis.com/auth/youtube.readonly', 'https://www.googleapis.com/auth/youtubepartner' ];

The getUserMetrics() function is executed from my html form:

  <div class="form">
Earnings and Ad Performance Metrics
<form name="metrics" action="form.asp">
  CMS Name: <input type="text" name="ownerName"/><br />
  Start date: <input type="date" name="startDate"/>
  End date: <input type="date" name="endDate"/>
  <input type="button"  value="Submit" onclick="getUserMetrics(ownerName,startDate,endDate)"/>
</form>

function getUserMetrics(ownerName,startDate,endDate){
  var owner = ownerName.value;
  var start = startDate.value;
  var end = endDate.value;
  var request = gapi.client.youtubeAnalytics.reports.query({
      'start-date': start,
      'end-date': end,
       ids: 'contentOwner=='+owner,
       metrics : 'views,earnings,grossRevenue,playbackBasedCpm,monetizedPlaybacks,impressions,impressionBasedCpm',
       filter: 'claimedStatus==claimed'
  });


request.execute(function(response){
    if("error" in response){
        console.log(response);
    }
    else{
        console.log("success");
    }
});

This works well in the API Explorer: https://developers.google.com/apis-explorer/#p/youtubeAnalytics/v1/youtubeAnalytics.reports.query

with the same metrics, filter, etc.. but when running it from my form I get the error: The query is not supported.. I eventually want to display the results on the html page but cant seem to get past this error.

Answer 1

I got some help with this and realized that I was doing a POST command to get this information and the API Explorer was doing a GET. I removed the entire request function and performed a $.getJSON(url) function and this solved my issues with a lot less code.