Как передавать данные в Google Analytics

Последняя строка кода отслеживания JavaScript добавляет в очередь команд ga() команду send, отправляющую в Google Analytics информацию об обращении типа просмотр страницы.

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

Отправку выполняет трекер, созданный в предыдущей строке кода. При этом передаются сохраненные в нем данные.

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

Типы обращений и Measurement Protocol

Счетчик отправляет в Google Analytics данные об обращениях различных типов. Так, фрагмент отслеживания JavaScript отправляет обращения типа pageview (просмотр страницы); прочие типы обращений включают screenview (просмотр экрана), event (событие), transaction (транзакция), item (товар), social (социальное взаимодействие), exception (исключение), and timing (пользовательское время). В этом руководстве рассмотрены общие принципы и методы, характерные для всех типов обращений. Подробные руководства по каждому из них представлены в разделе Отслеживание стандартных действий пользователей в панели слева.

Обращение – это HTTP-запрос Measurement Protocol, содержащий пары полей и значений.

Если при загрузке страницы, содержащей analytics.js, вы откроете инструменты разработчика своего браузера, то на вкладке Network (Сеть) увидите отправленные обращения. Запросы будут отправляться на адрес google-analytics.com/collect.

Какие данные отправляются в Google Analytics

При отправке обращения трекеры пересылают все имеющиеся поля, являющиеся допустимыми параметрами Measurement Protocol. Например, поля title и location отправляются, а cookieDomain и hitCallback – нет.

В некоторых случаях необходимо отправлять в Google Analytics только поля для конкретного обращения (но не последующих) – например, в случае с событиями, где поля eventAction и eventLabel имеют отношение только к данному обращению.

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

Метод send

Метод send счетчика может быть вызван непосредственно в самом счетчике или задан командой send в очереди команд функции ga(). Так как в большинстве случаев ссылка на объект счетчика отсутствует, рекомендуется отправлять данные в Google Analytics с помощью очереди команд ga().

Использование очереди команд ga()

Добавить команду send в очередь команд ga() можно следующим способом:

ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);

Как уже отмечалось, значения параметров hitType, ...fields и fieldsObject отправляются только для текущего обращения. Они не сохраняются в объекте счетчика и не отправляются в последующих обращениях.

Если поля, отправленные в команде send, уже присутствуют в объекте счетчика, то новые значения переопределяют имеющиеся.

Вызовы команды send должны содержать указание на тип обращения – hitType. Кроме того, в зависимости от указанного типа могут понадобиться дополнительные параметры. Более подробно об этом читайте в соответствующих статьях раздела Отслеживание стандартных действий пользователей.

Простейший способ использования команды send, подходящий для всех типов обращений, – передавать все поля с помощью параметра fieldsObject. Пример:

ga('send', {
  hitType: 'event',
  eventCategory: 'Video',
  eventAction: 'play',
  eventLabel: 'cats.mp4'
});

Для удобства некоторые типы обращений поддерживают отправку широко используемых полей в виде аргументов команды send. Например, указанная выше команда send для типа обращения event (событие) может выглядеть так:

ga('send', 'event', 'Video', 'play', 'cats.mp4');

Полный список полей, которые можно указывать в виде аргументов для различных типов обращений, приводится в разделе "Параметры" Справки по методу send.

Использование счетчика с именем

Если вместо счетчика по умолчанию вы используете вариант с именем, его название можно передать в строке команды.

Приведенная ниже команда send будет вызвана в счетчике под названием myTracker:

ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');

Использование самого объекта счетчика

Если у вас есть ссылка на объект счетчика, его метод send можно вызвать напрямую:

ga(function(tracker) {
  tracker.send('event', 'Video', 'play', 'cats.mp4');
});

Как определить момент отправки обращения

В некоторых случаях вам нужно знать, когда завершается отправка обращения в Google Analytics, чтобы сразу после этого предпринять те или иные действия. Например, если вам нужно зарегистрировать определенное взаимодействие, при выполнении которого пользователь переходит на другую страницу. Многие браузеры отключают выполнение JavaScript при выгрузке страницы, в результате чего ваши команды отправки обращений в analytics.js могут быть не выполнены.

Например, вам нужно отправить в Google Analytics событие отправки формы. В большинстве случаев, когда пользователь нажимает на кнопку "Отправить", сразу начинает загружаться следующая страница, и команды ga('send', ...) не выполняются.

Для решения проблемы необходимо перехватить это событие и остановить выгрузку страницы. Затем вы можете обычным способом отправить обращение в Google Analytics, а после этого отправить форму программно.

hitCallback

Узнать о том, что обращение отправлено, можно с помощью поля hitCallback. Функция hitCallback вызывается сразу после успешной отправки обращения.

В примере ниже показано, как отменить отправку формы, отправить обращение в Google Analytics и отправить форму повторно с помощью функции hitCallback:

// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: function() {
      form.submit();
    }
  });
});

Время ожидания

Код в примере выше справляется со своими функциями, однако у него есть один серьезный недостаток. Если по тем или иным причинам библиотека analytics.js не загрузилась, функция hitCallback никогда не будет выполнена. А в этом случае пользователь не сможет отправить форму.

Если в функции hitCallback содержится код, необходимый для правильной работы сайта, следует всегда использовать функцию времени ожидания (в расчете на случаи, когда библиотека analytics.js не загружается).

В нижеприведенном примере в код, показанный выше, добавлено время ожидания. Если в течение 1 секунды после нажатия кнопки "Отправить" не срабатывает функция hitCallback, выполняется повторная отправка формы.

// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Creates a timeout to call `submitForm` after one second.
  setTimeout(submitForm, 1000);

  // Keeps track of whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where `hitCallback` fires normally.
  var formSubmitted = false;

  function submitForm() {
    if (!formSubmitted) {
      formSubmitted = true;
      form.submit();
    }
  }

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: submitForm
  });
});

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

Приведенная ниже служебная функция получает функцию ввода и возвращает новую функцию. Если возвращенная функция вызывается до времени ожидания (по умолчанию 1 секунда), то время обнуляется и вызывается функция ввода. Если возвращенная функция не вызывается до времени ожидания, все равно вызывается функция ввода.

function createFunctionWithTimeout(callback, opt_timeout) {
  var called = false;
  function fn() {
    if (!called) {
      called = true;
      callback();
    }
  }
  setTimeout(fn, opt_timeout || 1000);
  return fn;
}

Теперь вы можете объединить все функции hitCallback с временем ожидания, обеспечив корректную работу сайта даже в тех случаях, когда возникают ошибки при отправке обращений или загрузке библиотеки analytics.js.

// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: createFunctionWithTimeout(function() {
      form.submit();
    })
  });
});

Как указать различные механизмы передачи данных

По умолчанию для отправки обращений analytics.js выбирает оптимальный HTTP-метод и механизм передачи данных из следующих вариантов: 'image' (с помощью объекта Image), 'xhr' (с помощью объекта XMLHttpRequest) и 'beacon' (с помощью нового метода navigator.sendBeacon).

При использовании первых двух методов возникают проблемы, описанные в предыдущем разделе (ошибки отправки обращений при выгрузке страницы). Для борьбы с ними был создан метод navigator.sendBeacon.

Если эта функция поддерживается вашим браузером, то вы можете указать beacon в качестве механизма передачи данных (transport) и забыть об обратных вызовах.

Приведенный ниже код устанавливает в поддерживаемых браузерах механизм передачи данных beacon.

ga('create', 'UA-XXXXX-Y', 'auto');

// Updates the tracker to use `navigator.sendBeacon` if available.
ga('set', 'transport', 'beacon');

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

Отслеживание некоторых действий пользователей требует сложной реализации. Однако во многих случаях решения уже разработаны и доступны в виде плагинов analytics.js. В следующем руководстве описано, как использовать плагины analytics.js с очередью команд ga().