API Hello Analytics: inicio rápido en JavaScript para aplicaciones web

Este tutorial te guiará a través de los pasos necesarios para acceder a una cuenta de Google Analytics, consultar las API de Google Analytics, gestionar las respuestas de la API y extraer los resultados. Para ello, se usan la API de informes centrales v3.0, la API de administración v3.0 y OAuth 2.0.

Paso 1: Habilitar la API de Analytics

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

Crear un ID de cliente

En la página de credenciales:

  1. Haz clic en Create credentials (Crear credenciales) y selecciona OAuth client ID (ID de cliente de OAuth).
  2. En Tipo de aplicación, selecciona Aplicación web.
  3. Asigna un nombre a las credenciales.
  4. Asigna el valor http://localhost:8080 a Orígenes de JavaScript autorizados.
  5. Asigna el valor http://localhost:8080/oauth2callback a URIs de redirección autorizados.
  6. Haz clic en Create (Crear).

Paso 3: configurar el código de muestra

Crea un archivo llamado HelloAnalytics.html, que contendrá el código HTML y JavaScript de nuestro ejemplo.

  1. Copia o descarga el siguiente código fuente en HelloAnalytics.html.
  2. Reemplaza '&ltYOUR_CLIENT_ID&gt' por el ID de cliente que has creado anteriormente.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Analytics - A quickstart guide for JavaScript</title>
</head>
<body>

<button id="auth-button" hidden>Authorize</button>

<h1>Hello Analytics</h1>

<textarea cols="80" rows="20" id="query-output"></textarea>

<script>

  // Replace with your client ID from the developer console.
  var CLIENT_ID = '<YOUR_CLIENT_ID>';

  // Set authorized scope.
  var SCOPES = ['https://www.googleapis.com/auth/analytics.readonly'];

  function authorize(event) {
    // Handles the authorization flow.
    // `immediate` should be false when invoked from the button click.
    var useImmdiate = event ? false : true;
    var authData = {
      client_id: CLIENT_ID,
      scope: SCOPES,
      immediate: useImmdiate
    };

    gapi.auth.authorize(authData, function(response) {
      var authButton = document.getElementById('auth-button');
      if (response.error) {
        authButton.hidden = false;
      }
      else {
        authButton.hidden = true;
        queryAccounts();
      }
    });
  }

function queryAccounts() {
  // Load the Google Analytics client library.
  gapi.client.load('analytics', 'v3').then(function() {

    // Get a list of all Google Analytics accounts for this user
    gapi.client.analytics.management.accounts.list().then(handleAccounts);
  });
}

function handleAccounts(response) {
  // Handles the response from the accounts list method.
  if (response.result.items && response.result.items.length) {
    // Get the first Google Analytics account.
    var firstAccountId = response.result.items[0].id;

    // Query for properties.
    queryProperties(firstAccountId);
  } else {
    console.log('No accounts found for this user.');
  }
}

function queryProperties(accountId) {
  // Get a list of all the properties for the account.
  gapi.client.analytics.management.webproperties.list(
      {'accountId': accountId})
    .then(handleProperties)
    .then(null, function(err) {
      // Log any errors.
      console.log(err);
  });
}

function handleProperties(response) {
  // Handles the response from the webproperties list method.
  if (response.result.items && response.result.items.length) {

    // Get the first Google Analytics account
    var firstAccountId = response.result.items[0].accountId;

    // Get the first property ID
    var firstPropertyId = response.result.items[0].id;

    // Query for Views (Profiles).
    queryProfiles(firstAccountId, firstPropertyId);
  } else {
    console.log('No properties found for this user.');
  }
}

function queryProfiles(accountId, propertyId) {
  // Get a list of all Views (Profiles) for the first property
  // of the first Account.
  gapi.client.analytics.management.profiles.list({
      'accountId': accountId,
      'webPropertyId': propertyId
  })
  .then(handleProfiles)
  .then(null, function(err) {
      // Log any errors.
      console.log(err);
  });
}

function handleProfiles(response) {
  // Handles the response from the profiles list method.
  if (response.result.items && response.result.items.length) {
    // Get the first View (Profile) ID.
    var firstProfileId = response.result.items[0].id;

    // Query the Core Reporting API.
    queryCoreReportingApi(firstProfileId);
  } else {
    console.log('No views (profiles) found for this user.');
  }
}

function queryCoreReportingApi(profileId) {
  // Query the Core Reporting API for the number sessions for
  // the past seven days.
  gapi.client.analytics.data.ga.get({
    'ids': 'ga:' + profileId,
    'start-date': '7daysAgo',
    'end-date': 'today',
    'metrics': 'ga:sessions'
  })
  .then(function(response) {
    var formattedJson = JSON.stringify(response.result, null, 2);
    document.getElementById('query-output').value = formattedJson;
  })
  .then(null, function(err) {
      // Log any errors.
      console.log(err);
  });
}

  // Add an event listener to the 'auth-button'.
  document.getElementById('auth-button').addEventListener('click', authorize);
</script>

<script src="https://apis.google.com/js/client.js?onload=authorize"></script>

</body>
</html>

Paso 3: Ejecutar el código de muestra

Después de haber habilitado la API de Analytics y de haber configurado el código fuente, la muestra está lista para ejecutarse.

  1. Publica HelloAnalytics.html en tu servidor web y carga la página en el navegador.
  2. Para autorizar el acceso a Google Analytics, haz clic en el botón Autorizar.

Cuando finalices estos pasos, la muestra envía el nombre de la primera vista (perfil) de Google Analytics del usuario autorizado y el número de sesiones de los últimos siete días.

Con el objeto de servicio de Analytics autorizado ya puedes ejecutar cualquiera de las muestras de código que se encuentran en los documentos de referencia de la API de administración. Por ejemplo, podrías intentar cambiar el código para usar el método accountSummaries.list.