Как отслеживать пользовательское время с помощью gtag.js

Сокращение времени загрузки страниц улучшает общее впечатление от сайта. В этой статье описывается, как отправлять в Google Analytics информацию о пользовательском времени.

Настройка

Чтобы отправить событие timing_complete, используйте команду event:

gtag('event', 'timing_complete', {<timing_parameters>});

Вместо <timing_parameters> необходимо указать одну или несколько пар "параметр-значение", разделяя их запятыми. Приведенная ниже команда отправляет обращение типа timing в Google Analytics и указывает, что на загрузку всех внешних зависимостей JavaScript ушло 3549 миллисекунд.

gtag('event', 'timing_complete', {
  'name' : 'load',
  'value' : 3549,
  'event_category' : 'JS Dependencies'
});

Параметры пользовательского времени

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

Параметр Тип данных Обязательное? Описание
name string Да Строка, которая используется для идентификации записываемой переменной. Пример: 'load'.
value integer Да Истекшее время в миллисекундах, которое регистрируется в Google Analytics. Пример: 20.
event_category string Нет Строка, которая используется для разбивки всех переменных пользовательского времени на логические группы. Пример: 'JS Dependencies'.
event_label string Нет Строка, которая может использоваться для более гибкой визуализации времени в отчетах. Пример: 'Google CDN'.

Измерение времени

Для события timing_complete нужно указать время в миллисекундах в параметре value. Вы должны написать код для его расчета самостоятельно.

Самый простой способ – создать временные отметки в начале и в конце периода, а зачем вычислить разность между второй и первой.

Большинство современных браузеров поддерживают Navigation Timing API, в котором для точного измерения времени загрузки страниц используются методы объекта window.performance.

В примере ниже показано, как использовать метод performance.now(), который возвращает время, прошедшее с момента начала загрузки страницы.

// Feature detects Navigation Timing API support.
if (window.performance) {
  // Gets the number of milliseconds since page load
  // (and rounds the result since the value must be an integer).
  var timeSincePageLoad = Math.round(performance.now());

  // Sends the timing event to Google Analytics.
  gtag('event', 'timing_complete', {
    'name': 'load',
    'value': timeSincePageLoad,
    'event_category': 'JS Dependencies'
  });
}

Примечания по выборкам

Google Analytics создает выборки обращений по времени, чтобы обеспечить равномерное распределение системных ресурсов.

Коэффициент выборки зависит от общего числа просмотров страниц для ресурса за предыдущий день. Подробнее смотрите в таблице ниже.

Общее количество просмотров страницы (предыдущий день) Максимальный размер выборки (сколько просмотров будет обработано)
0–1000 100
1000–100 000 10% от общего количества просмотров страницы
100 000–1 000 000 10 000
Более 1 000 000 1% от общего количества просмотров страницы