Hello Analytics Reporting API v4; JavaScript quickstart for web applications

user_19560544 0
Viewed 116

I am trying to make a functional connection to GA API according to the official docs - https://developers.google.com/analytics/devguides/reporting/core/v4/quickstart/web-js. I did everything needed to set it up however the solution is not working. The weird thing is that the button for the authentication is loaded and its working up until the point where I select the google account to login with. After that however loading appears and the auth window gets closed. There is no error in the console, nothing happens at all.

I use it on localhost currently but I've also tried it on a server with the same result. After selecting the account, every next attempt doesn't even require choosing the account so the window just opens, loading appears and closes again without anything happening.localhost
Credentials Google_Analytics_View

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Analytics Reporting API V4</title>
  <meta name="google-signin-client_id" content="1086039826600-2r3481ge270o57vau3kshic6l4vrg4gg.apps.googleusercontent.com">
  <meta name="google-signin-scope" content="https://www.googleapis.com/auth/analytics.readonly">
</head>
<body>

<h1>Hello Analytics Reporting API V4</h1>

<!-- The Sign-in button. This will run `queryReports()` on success. -->
<p class="g-signin2" data-onsuccess="queryReports"></p>

<!-- The API response will be printed here. -->
<textarea cols="80" rows="20" id="query-output"></textarea>

<script>
  // Replace with your view ID.
  var VIEW_ID = '271208943';

  // Query the API and print the results to the page.
  function queryReports() {
    gapi.client.request({
      path: '/v4/reports:batchGet',
      root: 'https://analyticsreporting.googleapis.com/',
      method: 'POST',
      body: {
        reportRequests: [
          {
            viewId: VIEW_ID,
            dateRanges: [
              {
                startDate: '7daysAgo',
                endDate: 'today'
              }
            ],
            metrics: [
              {
                expression: 'ga:sessions'
              }
            ]
          }
        ]
      }
    }).then(displayResults, console.error.bind(console));
  }

  function displayResults(response) {
    var formattedJson = JSON.stringify(response.result, null, 2);
    document.getElementById('query-output').value = formattedJson;
  }
</script>

<!-- Load the JavaScript API client and Sign-in library. -->
<script src="https://apis.google.com/js/client:platform.js"></script>

</body>
</html>
google-analytics-api google-analytics javascript
2 Answers

I suspect the issue you are having is that that sample is using Google Sign-In for Websites

We are discontinuing the Google Sign-In JavaScript Platform Library for web. The library will be unavailable for download after the March 31, 2023 deprecation date. Instead, use the new Google Identity Services for Web. By default, newly created Client IDs are now blocked from using the older Platform Library, existing Client IDs are unaffected. New Client IDs created before July 29th, 2022 can set plugin_name to enable use of the Google Platform Library.

Which means it doesn't work any more. I will ping the team, but last I heard they were still working on updating all of the Javascript samples.

Seeing as UA analytics is going to be discontinued in January I question wither or not they will even bother updating the samples for this api.

I will get back to you when i hear anything

user_18418390

So after the suspection that Google Sign-In is not in used anymore, I follow the instruction of migration to Google Identity Services and I add this line meta name="google-signin-plugin_name" content="quickstart" but I still didn't get the data properly loaded or sign-inenter image description hereI am not sure if the plugin-name is the "quickstart" as in the second screenshotenter image description here

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Analytics Reporting API V4</title>
  <meta name="google-signin-client_id" content="1086039826600-2r3481ge270o57vau3kshic6l4vrg4gg.apps.googleusercontent.com">
  <meta name="google-signin-scope" content="https://www.googleapis.com/auth/analytics.readonly">
  <meta name="google-signin-plugin_name" content="quickstart">
</head>
<body>

<h1>Hello Analytics Reporting API V4</h1>

<!-- The Sign-in button. This will run `queryReports()` on success. -->
<p class="g-signin2" data-onsuccess="queryReports"></p>

<!-- The API response will be printed here. -->
<textarea cols="80" rows="20" id="query-output"></textarea>

<script>
  // Replace with your view ID.
  var VIEW_ID = '271208943';

  // Query the API and print the results to the page.
  function queryReports() {
    gapi.client.request({
      path: '/v4/reports:batchGet',
      root: 'https://analyticsreporting.googleapis.com/',
      method: 'POST',
      
      body: {
        reportRequests: [
          {
            viewId: VIEW_ID,
            dateRanges: [
              {
                startDate: '7daysAgo',
                endDate: 'today'
              }
            ],
            metrics: [
              {
                expression: 'ga:sessions'
              }
            ]
          }
        ]
      }
    }).then(displayResults, console.error.bind(console));
  }

  function displayResults(response) {
    var formattedJson = JSON.stringify(response.result, null, 2);
    document.getElementById('query-output').value = formattedJson;
  }
</script>

<!-- Load the JavaScript API client and Sign-in library. -->
<script src="https://apis.google.com/js/client:platform.js"></script>

</body>
</html>
user_195605440
Related