Отправка данных в Google Аналитику с помощью кода gtag.js

В этой статье описывается, как использовать код gtag.js для отправки данных с вашего сайта в Google Аналитику.

Отправка данных с помощью команды event

После добавления на веб-страницу глобального тега вы сможете отправлять данные в Google Аналитику с помощью команды event. Например, чтобы сообщить, что пользователь выполнил вход в аккаунт Google, используйте следующую команду event:

gtag('event', 'login', {'method': 'Google'});

Подробную информацию о команде event можно найти в справочнике по API.

Распределение данных по группам и ресурсам

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

Ниже показано, как направить событие sign_in в группу agency, в которую входят два ресурса Google Аналитики.

// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });

// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });

Подробнее…

Как узнать, когда было отправлено событие

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

Допустим, вам нужно передать в Google Аналитику событие отправки формы. В большинстве случаев, когда пользователь нажимает на кнопку "Отправить", сразу начинает загружаться следующая страница, и команды event не выполняются.

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

Как реализовать функции обратного вызова для событий

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

В примере ниже показано, как отменить действие отправки формы по умолчанию, отправить событие в Google Аналитику, а затем повторно отправить форму с помощью функции обратного вызова.

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

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

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

  // Send the event to Google Analytics and
  // resubmit the form once the hit is done.
  gtag('event', 'signup_form_complete', {
    'event_callback': function() {
      form.submit();
    }
  });
});

Создание задержек

В приведенном выше примере есть один недостаток. Если библиотека gtag.js не загрузилась, функция обратного вызова событий не будет выполнена, а пользователи не смогут отправить форму.

Если в функции обратного вызова содержится код, необходимый для правильной работы сайта, обязательно используйте вместе с ней функцию задержки на случай, если библиотека gtag.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();

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

  // Monitors whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where the event callback function 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.
  gtag('event', 'signup_form_complete', {
    'event_callback': submitForm
  });
});

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

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

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

Теперь вы можете объединить все функции обратного вызова для событий с временем ожидания, обеспечив корректную работу сайта даже в случаях ошибок при отправке событий или загрузке библиотеки gtag.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.
  gtag('event', 'signup_form', { 'event_callback': {
    createFunctionWithTimeout(function() {
      form.submit();
    })
  }});
});

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

По умолчанию для отправки обращений код gtag.js выбирает оптимальный HTTPS-метод и механизм передачи данных из следующих вариантов:

  • image (с использованием объекта Image);
  • xhr (с использованием объекта XMLHttpRequest);
  • beacon (с использованием метода navigator.sendBeacon).

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

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

gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});