Начало работы

Обзор

В этой статье показан полный пример приложения для работы с Embed API, которое имеет следующий вид:

Скриншот примера из этой статьи
Скриншот примера из этой статьи

Как создать простую сводку

Чтобы получить готовый пример серверного приложения, достаточно выполнить всего два шага:

  1. Создать новый идентификатор клиента.
  2. Скопировать и вставить код.

Далее мы рассмотрим, как работают и взаимодействуют друг с другом все компоненты этого приложения.

Как создать новый идентификатор клиента

Embed API практически полностью реализует процесс авторизации и предоставляет компонент для входа в систему одним нажатием кнопки с использованием хорошо знакомого вам протокола OAuth 2.0. Всё, что для этого нужно – получить идентификатор клиента.

Если вы ещё не работали с идентификатором клиента, узнайте, как получить его, из этой статьи

Обратите внимание на два ключевых действия:

  • Включение Analytics API.
  • Настройка источников.

Источники определяют домены, в которых этот код можно использовать для авторизации пользователей, и не позволяют применять его на других сайтах.

Например, если ваш сайт размещен в домене example.com, настройте для идентификатора клиента источник http://example.com. Если вы хотите протестировать код в локальной среде, укажите в качестве источника локальный сервер, например http://localhost:8080.

Как скопировать и вставить код

Теперь вы можете приступать к созданию демонстрационного приложения. Для этого скопируйте код в HTML-файл на сервере и замените в нем строку "Insert your client ID here" на свой идентификатор клиента.

<!DOCTYPE html>
<html>
<head>
  <title>Embed API Demo</title>
</head>
<body>

<!-- Step 1: Create the containing elements. -->

<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>

<!-- Step 2: Load the library. -->

<script>
(function(w,d,s,g,js,fjs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>

<script>
gapi.analytics.ready(function() {

  // Step 3: Authorize the user.

  var CLIENT_ID = 'Insert your client ID here';

  gapi.analytics.auth.authorize({
    container: 'auth-button',
    clientid: CLIENT_ID,
  });

  // Step 4: Create the view selector.

  var viewSelector = new gapi.analytics.ViewSelector({
    container: 'view-selector'
  });

  // Step 5: Create the timeline chart.

  var timeline = new gapi.analytics.googleCharts.DataChart({
    reportType: 'ga',
    query: {
      'dimensions': 'ga:date',
      'metrics': 'ga:sessions',
      'start-date': '30daysAgo',
      'end-date': 'yesterday',
    },
    chart: {
      type: 'LINE',
      container: 'timeline'
    }
  });

  // Step 6: Hook up the components to work together.

  gapi.analytics.auth.on('success', function(response) {
    viewSelector.execute();
  });

  viewSelector.on('change', function(ids) {
    var newIds = {
      query: {
        ids: ids
      }
    }
    timeline.set(newIds).execute();
  });
});
</script>
</body>
</html>

Обзор кода

В этом разделе мы подробно разберем работу кода, после чего вы сможете создавать собственные приложения, действуя по аналогии.

Шаг 1. Создание контейнеров компонентов

Большинство компонентов Embed API отображают на странице какие-либо элементы и для работы должны быть заключены в контейнеры. В этом примере у нас есть кнопка авторизации, меню выбора представления и диаграмма, которые отображаются внутри следующих HTML-элементов:

<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>

Контейнер, который будет использоваться компонентом, определяется по идентификатору, как показано в следующих примерах.

Шаг 2. Загрузка библиотеки

Чтобы загрузить Embed API, используйте следующий фрагмент кода.

<script>
(function(w,d,s,g,js,fjs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>

После полной загрузки библиотеки выполняются все обратные вызовы, переданные функции gapi.analytics.ready.

<script>
gapi.analytics.ready(function() {
  // Put your application code here...
});
</script>

Шаг 3. Авторизация пользователя

Embed API практически полностью реализует процесс авторизации и предоставляет компонент для входа в систему одним нажатием кнопки с использованием хорошо знакомого вам протокола OAuth 2.0. Чтобы кнопка авторизации заработала, вам нужно передать ссылку на контейнер и идентификатор клиента.

gapi.analytics.auth.authorize({
  container: 'auth-button',
  clientid: CLIENT_ID,
});

Этот код создает в элементе кнопку с идентификатором "auth-button", которая реализует процесс авторизации.

Шаг 4. Создание меню выбора представления

Это меню позволяет получить идентификатор представления, для которого будет выполнен отчет.

Чтобы создать его, вам понадобится ссылка на контейнер, созданный на первом шаге.

var viewSelector = new gapi.analytics.ViewSelector({
  container: 'view-selector'
});

Этот код создает меню выбора, но не отображает его на странице. О том, как сделать это с помощью метода execute(), вы узнаете далее.

Шаг 5. Создание временной диаграммы

Компонент диаграммы в Embed API объединяет в себе функции диаграммы Google и отчета. Он позволяет заметно упростить графическое представление данных и автоматически обновляется по мере поступления новых результатов.

Чтобы создать этот компонент, укажите параметры запроса к API, а также параметры диаграммы, включая ссылку на идентификатор контейнера, созданный на первом шаге.

var timeline = new gapi.analytics.googleCharts.DataChart({
  reportType: 'ga',
  query: {
    'dimensions': 'ga:date',
    'metrics': 'ga:sessions',
    'start-date': '30daysAgo',
    'end-date': 'yesterday',
  },
  chart: {
    type: 'LINE',
    container: 'timeline'
  }
});

Этот код создает компонент диаграммы, но для его отображения на странице вам ещё нужно вызвать метод execute(), как показано ниже.

Шаг 6. Связывание компонентов

Во время работы компоненты Embed API активируют различные события, такие как успешная авторизация, выбор нового представления или полное отображение диаграммы.

В этом примере меню выбора представления отображается только после авторизации, а временная диаграмма обновляется каждый раз, когда пользователь задает новое представление.

gapi.analytics.auth.on('success', function(response) {
  viewSelector.execute();
});

viewSelector.on('change', function(ids) {
  var newIds = {
    query: {
      ids: ids
    }
  }
  timeline.set(newIds).execute();
});

Полный перечень событий, активируемых компонентами, вы найдете в справке по API.

Дополнительная информация

В этой статье мы рассмотрели общие принципы визуализации данных с использованием Embed API. Подробнее читайте в справочном руководстве по API.