Hello Analytics Reporting API v4; guía de inicio rápido de JavaScript para aplicaciones web

En este instructivo, se explican los pasos necesarios para acceder a la versión 4 de la API de Analytics Reporting.

1. Habilitar la API

Para comenzar a usar la versión 4 de la API de informes de Analytics, primero debes usar la herramienta de configuración, que te guiará para crear un proyecto en Google API Console, habilitar la API y crear credenciales.

Nota: Para crear un ID de cliente web o un cliente de aplicación instalada, debes establecer un nombre de producto en la pantalla de consentimiento. Si aún no lo hiciste, se te pedirá que configures la pantalla de consentimiento.

Crea credenciales

  • Abre la página Credenciales.
  • Haz clic en Crear credenciales y selecciona ID de cliente de OAuth.
  • En Tipo de aplicación, selecciona Aplicación web.
  • Asígnele el nombre quickstart al ID de cliente y haga clic en Create.
  • Establece los orígenes JavaScript autorizados en http://localhost:8080.
  • Haga clic en Crear.

2. Configura la muestra

Deberás crear un nombre de archivo HelloAnalytics.html, que contendrá el código HTML y JavaScript de nuestro ejemplo.

  • Copia o descarga el siguiente código fuente en HelloAnalytics.html.
  • Reemplaza <REPLACE_WITH_CLIENT_ID> por el ID de cliente que creaste antes.
  • Reemplaza <REPLACE_WITH_VIEW_ID> por un ID de vista. Se puede recuperar un ID de vista desde el Explorador de cuentas.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Analytics Reporting API V4</title>
  <meta name="google-signin-client_id" content="<REPLACE_WITH_CLIENT_ID>">
  <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 = '<REPLACE_WITH_VIEW_ID>';

  // 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>

3: Ejecuta la muestra

  • Publica HelloAnalytics.html en tu servidor web y carga la página en el navegador.
  • Haga clic en el botón Acceder y autorice el acceso a Google Analytics.

Cuando finalice estos pasos, la muestra mostrará la cantidad de sesiones de los últimos siete días para la vista determinada.