API Hello Analytics: guide de démarrage rapide JavaScript pour les applications Web

Ce tutoriel décrit les étapes à suivre pour accéder à un compte Google Analytics, interroger les API Analytics, gérer les réponses de l'API et générer les résultats. Ce tutoriel utilise les versions 3.0 de l'API Core Reporting, API Management v3.0 et OAuth2.0.

Étape 1: Activer l'API Analytics

Pour commencer à utiliser l'API Google Analytics, vous devez d'abord utiliser l'outil de configuration, qui vous guide tout au long de la création d'un projet dans la console Google APIs, de l'activation de l'API et de la création d'identifiants.

Créer un ID client

Sur la page "Identifiants" :

  1. Cliquez sur Créer des identifiants, puis sélectionnez ID client OAuth.
  2. Sélectionnez Application Web pour APPLICATION TYPE.
  3. Attribuez un nom à l'identifiant.
  4. Définissez AUTHORIZED JAVASCRIPT ORIGINS (ORIGINS JAVASCRIPT AUTORISÉES) sur http://localhost:8080.
  5. Définissez le champ AUTHORIZED REDIRECT URIS (URI DE REDIRECT AUTORISÉS) sur http://localhost:8080/oauth2callback.
  6. Cliquez sur Créer.

Étape 2: Configurer l'exemple

Vous devez créer un fichier nommé HelloAnalytics.html, qui contiendra le code HTML et JavaScript de notre exemple.

  1. Copiez ou téléchargez le code source suivant dans HelloAnalytics.html.
  2. Remplacez '<YOUR_CLIENT_ID>' par votre ID client. créées ci-dessus.
<!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>

Étape 3: Exécutez l'exemple

Une fois que vous avez activé l'API Analytics et configuré l'exemple de code source, celui-ci est prêt à être exécuté.

  1. Publiez HelloAnalytics.html sur votre serveur Web, puis chargez la page dans votre navigateur.
  2. Cliquez sur le bouton Autoriser et autorisez l'accès à Google Analytics.

Une fois ces étapes terminées, l'exemple génère le nom de la première vue Google Analytics (profil) de l'utilisateur autorisé, ainsi que le nombre de sessions au cours des sept derniers jours.

Avec l'objet de service Analytics autorisé, vous pouvez désormais exécuter n'importe quel exemple de code disponible dans la documentation de référence de l'API Management. Par exemple, vous pouvez essayer de modifier le code pour utiliser la méthode accountSummaries.list.