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

En este instructivo, se explican los pasos necesarios para acceder a la API de Analytics Reporting v4.

1. Habilita la API

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

Nota: Para crear un ID de cliente web o un cliente de la aplicación instalada, debes establecer un nombre de producto en la pantalla de consentimiento. Si aún no lo hiciste, se te solicitará 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ígnale el nombre quickstart al ID de cliente y haz clic en Create.
  • Configura los Orígenes autorizados de JavaScript como http://localhost:8080.
  • Haz 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 anteriormente.
  • Reemplaza <REPLACE_WITH_VIEW_ID> por un ID de vista. Se puede obtener un ID de vista en 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 tu navegador.
  • Haz clic en el botón Acceder y autoriza el acceso a Google Analytics.

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