Одна вещь, которую я усвоил из многолетней работы с веб-аналитикой, заключается в том, что люди хотят знать больше о поведении клиентов на своих веб-сайтах, но большинство из них не прилагают ни малейших усилий для просмотра данных. Вы можете дать им доступ к платформе аналитики или даже отправлять регулярные отчеты, но вскоре они теряют интерес. И я могу это понять. Некоторые отчеты непросты для чтения/понимания, и для их усвоения может потребоваться драгоценное время, данные огромны, не имеют отношения к их работе, бесполезны или поступают слишком поздно.

Имея это в виду, а также потому, что я люблю сложные задачи, я увидел возможность разработать аналитическую панель для нашего веб-сайта, которая должна соответствовать следующим требованиям:

  • Он должен представлять актуальные и, по возможности, действенные данные.
  • Поскольку мы используем Google Analytics, он должен использовать GA API v3 (отчеты и в режиме реального времени) для получения аналитических данных.
  • Он должен использовать только распространенные технологии, такие как HTML и Javascript, и работать в браузере Google Chrome.
  • Макет должен быть адаптивным, чтобы его можно было просматривать на телевизорах, планшетах и ​​смартфонах.
  • Панель инструментов должна состоять из нескольких экранов/слайдов, которые появляются в фиксированное время.
  • Панель инструментов должна иметь анимацию и некоторые графические элементы, чтобы сделать ее более привлекательной.

Отправной точкой для всего этого была страница Демо и инструменты из Google Analytics. Google предоставил достаточно информации и примеров для изучения реализации API.

В первой версии дашборда параметры запроса (размеры, метрики, сортировка…) были внутри функции API Javascript, как в демо от Google.

gapi.analytics.ready(function() {

  gapi.analytics.auth.authorize({
    container: 'embed-api-auth-container',
    clientid: 'REPLACE WITH YOUR CLIENT ID'
  });


  var mainChart = new gapi.analytics.googleCharts.DataChart({
    query: {
      'dimensions': 'ga:browser',
      'metrics': 'ga:sessions',
      'sort': '-ga:sessions',
      'max-results': '6'
    }

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

Решением стали атрибуты данных HTML5. Используя настраиваемые атрибуты, я мог определить все необходимые параметры (идентификатор, показатели, измерения, фильтры, дату начала/окончания и максимальные результаты) в каждом элементе HTML. Функция API захватывает эти значения и возвращает значение запроса соответствующему элементу.

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

<h1 data-ids="00000000|11111111" data-metrics="rt:activeUsers"
data-dimensions="rt:userType">0</h1>

<img data-ids="00000000" data-metrics="ga:users"
data-dimensions="ga:pagePath" src="[include].jpg" data-filter=""
data-start="" data-end="">

Те, кто уже работал с API GA, могли заметить, что я использую два идентификатора, тогда как API поддерживает только один идентификатор на запрос. Ну, это было непросто обойти, но скрипт может сделать оба запроса (или больше) и вернуть их сумму. Он также может возвращать относительный процент для другого элемента на странице.

Итак, как это выглядит? Ниже вы можете увидеть первый слайд из 10. Он показывает общее количество активных пользователей, процент пользователей на веб-сайте и в приложении, а также относительный процент пользователей в каждом приложении. Как дизайнер я знаю, что детали имеют значение, поэтому внешний вид каждого слайда и каждого элемента на нем анимирован. Ничего кричащего. Тонкие анимации, чтобы сделать его более динамичным и привлекательным.

Я не хотел тратить слишком много времени на структуру панели инструментов, поэтому я использовал плагин fullPage.js для создания веб-страницы с полноэкранной прокруткой. Он прост в использовании, обеспечивает горизонтальную или вертикальную прокрутку, поддерживает навигацию с помощью клавиш со стрелками и имеет множество параметров настройки. За фантастическую анимацию главного счетчика отвечает плагин Одометр. Другие анимации были сделаны только с помощью CSS3, путем добавления/удаления классов.

Слайды меняются каждую минуту, и именно здесь моя функция оживает. Он ищет элементы с атрибутами данных на этом слайде и, если находит, делает соответствующий запрос к API Google Analytics. С этого момента пределом является небо. Я могу получить активных пользователей по магазинам, устройствам и источникам трафика, облаку слов с самыми популярными поисковыми запросами или даже разбросу пользователей по поведению (изображение ниже).

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

Ограничения

API Google Analytics имеет следующие ограничения и квоты на запросы API:

  • 50 000 запросов на проект в день
  • 10 запросов в секунду (QPS) на IP-адрес

Вы можете запросить дополнительную квоту, но исходя из этого опыта, квота по умолчанию вполне разумна. При необходимости можно выполнить некоторую оптимизацию запросов. Например, хотя данные API являются более точными и доступны раньше, чем на веб-сайте Google Analytics, некоторые данные обновляются только один раз в час (или позже), поэтому нет необходимости извлекать эту информацию заранее.

Кроме того, если некоторые данные можно использовать повторно (например, данные за прошлый год для сравнения с текущим годом), вы можете сохранить их в базе данных. Таким образом, вам не нужно тянуть его снова.

Следующие шаги

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

Настройка новой информационной панели настолько проста, что следующим шагом, вероятно, будет панель для каждой команды на планшете с наиболее релевантными для них показателями. Например, безрезультатные поиски по веб-сайтам — это тип информации, которую команда каталогов должна иметь в режиме реального времени, чтобы решить проблему как можно быстрее.

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

Другие кредиты

Спасибо моим талантливым товарищам по команде, Джессике Авелар, за макет слайдов, и Мафальде Петре, ответственной за определение метрик, представленных на приборной панели.