API de informes Hello Analytics, versión 4: inicio rápido en JavaScript para aplicaciones web

Con la ayuda de este tutorial podrás seguir los pasos para acceder a la versión 4 de la API de informes de Analytics.

1. Habilitar la API

Para empezar a utilizar la versión 4 de la API de informes de Analytics, primero debes usar la herramienta de configuración, que te guiará por los pasos necesarios para crear un proyecto en la consola de APIs de Google, habilitar la API y crear las credenciales.

Nota: Para crear un ID de cliente web o un cliente para la aplicación descargada, debes definir un nombre de producto en la pantalla de consentimiento. Si todavía no lo has hecho, se te pedirá rellenes los datos de la pantalla de consentimiento.

Crear credenciales

  • Abre la página Credentials (Credenciales).
  • Haz clic en Create credentials (Crear credenciales) y selecciona OAuth client ID (ID de cliente de OAuth).
  • En Application type (Tipo de aplicación), selecciona Web application (Aplicación web).
  • En el campo del ID de cliente, indica quickstart y haz clic en Create (Crear).
  • Asigna el valor http://localhost:8080 a Orígenes de JavaScript autorizados.
  • Haz clic en Create (Crear).

2. Configurar el código de muestra

Debes crear un archivo llamado HelloAnalytics.html, que incluirá el código HTML y JavaScript del ejemplo.

  • Copia o descarga el siguiente código fuente en HelloAnalytics.html.
  • Sustituye <REPLACE_WITH_CLIENT_ID> por el ID de cliente que has creado anteriormente.
  • Sustituye <REPLACE_WITH_VIEW_ID> por un ID de vista, que puedes obtener 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. Ejecutar el código de muestra

  • Publica HelloAnalytics.html en tu servidor web y carga la página en el navegador.
  • Haz clic en el botón Sign in (Iniciar sesión) y autoriza el acceso a Google Analytics.

Cuando finalices estos pasos, el código de muestra enviará el número de sesiones de los últimos siete días correspondiente a la vista indicada.