Введение в Google Analytics API: краткое руководство по JavaScript для веб-приложений

В этом руководстве описывается, как получить доступ к аккаунту Google Analytics, отправлять запросы в API этого сервиса, обрабатывать ответы и извлекать результаты обработки с применением Core Reporting API 3.0, Management API 3.0 и OAuth 2.0.

Шаг 1. Включите Google Analytics API

Перед началом работы с Google Analytics API используйте инструмент настройки, чтобы создать проект в Google API Console, включить API и зарегистрировать учетные данные.

Создайте идентификатор клиента

Откройте раздел "Учетные данные" и выполните следующие действия:

  1. Нажмите Создать учетные данные и выберите вариант Идентификатор клиента OAuth.
  2. В качестве типа приложения выберите веб-приложение.
  3. Введите название.
  4. В поле Authorized JavaScript origins (Авторизованные источники JavaScript) укажите http://localhost:8080.
  5. В поле Authorized redirect URIs (Авторизованные URI переадресации) введите http://localhost:8080/oauth2callback.
  6. Нажмите кнопку Создать.

Шаг 2. Настройте пример

Вам необходимо создать файл с названием HelloAnalytics.html, где будет содержаться код HTML и JavaScript.

  1. Скопируйте или скачайте приведенный ниже исходный код для HelloAnalytics.html.
  2. Замените <YOUR_CLIENT_ID> на свой идентификатор клиента, созданный ранее.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Analytics – краткое руководство по JavaScript</title>
</head>
<body>

<button id="auth-button" hidden>Авторизация</button>

<h1>Hello Analytics</h1>

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

<script>

  // Замена на собственный идентификатор клиента из консоли разработчика.
  var CLIENT_ID = '<YOUR_CLIENT_ID>';

  // Определение авторизованной области применения.
  var SCOPES = ['https://www.googleapis.com/auth/analytics.readonly'];


  function authorize(event) {
    // Обработка потока авторизации.
    // При вызове по нажатию кнопки переменной "immediate" должно быть присвоено значение "false".
    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() {
  // Загрузка клиентской библиотеки Google Analytics.
  gapi.client.load('analytics', 'v3').then(function() {

    // Получение списка всех аккаунтов Google Analytics для этого пользователя.
    gapi.client.analytics.management.accounts.list().then(handleAccounts);
  });
}


function handleAccounts(response) {
  // Обработка ответа от метода accounts.list.
  if (response.result.items && response.result.items.length) {
    // Получение первого аккаунта Google Analytics.
    var firstAccountId = response.result.items[0].id;

    // Запрос списка ресурсов.
    queryProperties(firstAccountId);
  } else {
    console.log('No accounts found for this user.');
  }
}


function queryProperties(accountId) {
  // Получение списка всех ресурсов этого аккаунта.
  gapi.client.analytics.management.webproperties.list(
      {'accountId': accountId})
    .then(handleProperties)
    .then(null, function(err) {
      // Запись всех ошибок в журнал.
      console.log(err);
  });
}


function handleProperties(response) {
  // Обработка ответа от метода webproperties list.
  if (response.result.items && response.result.items.length) {

    // Получение первого аккаунта Google Analytics.
    var firstAccountId = response.result.items[0].accountId;

    // Получение идентификатора первого ресурса.
    var firstPropertyId = response.result.items[0].id;

    // Запрос представлений (профилей).
    queryProfiles(firstAccountId, firstPropertyId);
  } else {
    console.log('No properties found for this user.');
  }
}


function queryProfiles(accountId, propertyId) {
  // Получение списка всех представлений (профилей) для первого ресурса
  // первого аккаунта.
  gapi.client.analytics.management.profiles.list({
      'accountId': accountId,
      'webPropertyId': propertyId
  })
  .then(handleProfiles)
  .then(null, function(err) {
      // Запись всех ошибок в журнал.
      console.log(err);
  });
}


function handleProfiles(response) {
  // Обработка ответа от метода profiles list.
  if (response.result.items && response.result.items.length) {
    // Получение идентификатора первого представления (профиля).
    var firstProfileId = response.result.items[0].id;

    // Запрос к Core Reporting API.
    queryCoreReportingApi(firstProfileId);
  } else {
    console.log('No views (profiles) found for this user.');
  }
}


function queryCoreReportingApi(profileId) {
  // Запрос к Core Reporting API о количестве сессий
  // за последние семь дней.
  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) {
      // Запись всех ошибок в журнал.
      console.log(err);
  });
}

  // Добавление блока прослушивания событий к кнопке авторизации (auth-button).
  document.getElementById('auth-button').addEventListener('click', authorize);
</script>

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

</body>
</html>

Шаг 3. Запустите пример

После того как вы включили Google Analytics API и настроили код примера, он готов к запуску.

  1. Загрузите HelloAnalytics.html на свой веб-сервер и откройте эту страницу в браузере.
  2. Нажмите кнопку "Авторизация", чтобы открыть доступ к Google Analytics.

После выполнения всех шагов будет выведено название первого профиля авторизованного пользователя в Google Analytics и количество сеансов за последние семь дней.

Имея авторизованный служебный объект Analytics, вы можете запустить любой из примеров кода, приведенных в справочных материалах по Management API. Например, можно попробовать изменить код, чтобы использовать метод accountSummaries.list.