Последняя строка кода отслеживания JavaScript добавляет команду send в очередь команд ga(), чтобы передать обращение типа pageview в Google Аналитику:
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
Отправку выполняет объект отслеживания, создание которого запланировано в предыдущей строке кода. При этом передаются сохраненные в нем данные.
В этом документе описаны различные способы отправки данных в Google Аналитику, а также показано, как настроить отправляемые данные.
Типы обращений и Measurement Protocol
Объект отслеживания отправляет в Google Аналитику данные об обращениях, и каждое обращение должно быть определенного типа. Тег Google Аналитики отправляет обращения типа pageview (просмотр страницы). Другие возможные типы обращений: screenview (просмотр экрана), event (событие), transaction (транзакция), item (товар), social (социальное взаимодействие), exception (исключение) и timing (время). В этом руководстве рассмотрены общие принципы и методы, характерные для всех типов обращений. Подробные руководства по каждому из них представлены в разделе Отслеживание типичных действий пользователей (его можно выбрать на панели навигации слева).
Обращение – это HTTP-запрос, содержащий пары "поле-значение", закодированные в строке запроса, и отправляемый с помощью Measurement Protocol.
Если при загрузке страницы, где используется библиотека analytics.js, вы откроете инструменты разработчика в своем браузере, то на вкладке Network (Сеть) увидите отправленные обращения. Найдите запросы, отправляемые по адресу google-analytics.com/collect.
Какие данные отправляются в Google Аналитику
При отправке обращения трекеры пересылают все имеющиеся поля, являющиеся допустимыми параметрами Measurement Protocol. Например, поля title и location пересылаются, а cookieDomain и hitCallback – нет.
Вам может потребоваться отправлять в Google Аналитику только поля текущего обращения (но не последующих): например, если обращение имеет тип event (событие) и значения полей eventAction и eventLabel важны только для текущего события.
Чтобы отправить только поля текущего обращения, передайте их в виде аргументов метода send. Чтобы данные полей отправлялись с каждым последующим обращением, обновите объект отслеживания с помощью метода set.
Метод send
Метод send объекта отслеживания можно вызвать напрямую через объект отслеживания или добавив команду send в очередь команд ga(). Так как в большинстве случаев нет возможности указать объект отслеживания, рекомендуется отправлять данные в Google Аналитику с помощью очереди команд 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 Аналитику, чтобы сразу после этого предпринять те или иные действия. Например, если вам нужно зарегистрировать определенное взаимодействие, при выполнении которого пользователь переходит на другую страницу. Многие браузеры отключают выполнение JavaScript при выгрузке страницы, в результате чего ваши команды отправки обращений в analytics.js могут быть не выполнены.
Допустим, вам нужно отправить в Google Аналитику событие, означающее, что пользователь заполнил форму и нажал кнопку "Отправить". На большинстве сайтов при нажатии этой кнопки сразу начинает загружаться следующая страница, поэтому команды ga('send', ...) не выполняются.
Поэтому необходимо перехватить это событие и остановить выгрузку страницы. Затем вы можете обычным способом отправить обращение в Google Аналитику, а после этого отправить форму программно.
hitCallback
Чтобы получать уведомление, когда отправка обращения завершается, можно задать значение поля hitCallback. hitCallback – это функция, которая вызывается сразу после успешной отправки обращения.
В примере ниже показано, как отменить отправку формы, отправить обращение в Google Аналитику и отправить форму с помощью функции 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 не будет выполнена, пользователь не сможет отправить форму.
Если в функции hitCallback содержится код, необходимый для правильной работы сайта, следует всегда использовать функцию времени ожидания для случаев, когда библиотека analytics.js не загружается).
Ниже в наш пример кода добавлено время ожидания. Если в течение одной секунды после нажатия кнопки "Отправить" не срабатывает функция 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 – это новая функция HTML, созданная для решения этой проблемы.
Если браузер пользователя поддерживает метод navigator.sendBeacon, вы можете выбрать 'beacon' в качестве механизма для передачи данных (transport) – тогда использовать функцию hitCallback будет не нужно.
Приведенный ниже код устанавливает механизм передачи данных '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().