Почему страница на русском?

Этот блог начинался давно, когда писать материалы на английском языке для меня было сложно, и для достижения большей аудитории он велся на русском. Но с началом полномасштабного вторжения в феврале 2022 года я решил прекратить писать на этом языке. Моя страна переживает тяжелые времена, но мы с верой смотрим в будущее, и я больше не хочу поддерживать использование русского языка для новых материалов. Те статьи, что уже есть, остаются на сайте как часть истории блога, напоминая о предыдущих этапах его развития.Як і Україна, цей блог продовжує активно зростати та зміцнюватись без використання російської мови, незважаючи на всі випробування, і впевнено рухається до майбутнього 💙💛

Главная/Отслеживаем взаимодействие пользователей с формами при помощи Google Tag Manager

Google Tag Manager

вс, 2 сентября 2018 г.

Отслеживаем взаимодействие пользователей с формами при помощи Google Tag Manager

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

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

отправка события при клике по кнопке отправки формы;
передача значения введенного в поля формы;
проверка валидации формы при клике;
отслеживание изменения данных в полях формы.

Интересно? Тогда давайте по-быстрее приступим.

Отслеживание клика по кнопке отправки формы

Начнем с простого: клик по кнопке отправки формы, и нам понадобится:

Включить встроенные переменные типа Clicks. Для этого перейдите в раздел Переменные > Встроенные переменные и нажмите кнопку Настроить:

30.1 Built-in GTM variables of the Clicks type

А теперь мы видим блок Configure Built-In Variables

30.1.1 How to find the ID, class, or CSS selector of the desired button

Узнать идентификатор, класс или CSS-селектор необходимой нам кнопки. Зачастую у необходимого элемента отсутствует класс или ID, поэтому мы пойдем по пути селектора CSS. В браузере Chrome нажмите правой кнопкой мыши на интересующем элементе и выберите пункт Просмотреть код. В открытом новом окне, на выделенном коде нажмите еще раз правой кнопкой мыши и выберите Copy > Copy selector:

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

30.2 Як-дізнатися-ідентифікатор-клас-або-CSS-селектор-необхідної-кнопки

Создать триггер с необходимым условием. Выбираем тип триггера- Все элементы. Условие активации - Некоторые клики. И задаем следующее условие:

30.3 Creating a trigger for clicking a specific button

где, вместо YOUR_SELECTOR указываем скопированное значение CSS-селектора.

Создать тег для отправки данных в Google Analytics.

30.4 Event tag for clicking the form button

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

Передача значения введенного в поля формы

тобы настроить проверку валидации формы при клике на кнопку отправки нам необходимо сначала научиться сохранять значения, которые вводит пользователь в поля формы. Для этого нам понадобится пользовательская переменная типа Собственный код JavaScript со следующим кодом:

javascript

function() { 
var value = jQuery('YOUR_SELECTOR').val(); 
return value; 
}

Перед использованием необходимо заменить YOUR_SELECTOR на CSS-селектор необходимого поля. Получить его можно по аналогии с CSS-селекторами кнопки. Только кликать правой кнопкой теперь нужно не на кнопку, а на соответствующее поле:

30.5 How to find the CSS selector of a form input field

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

javascript

jQuery('YOUR_SELECTOR').val()

Если все верно, получите текущее значение поля:

30.6 Checking CSS selectors in the developer console

Созданная переменная будет выглядеть следующим образом:

30.7 Variable for storing information from form inputs

Теперь сможете использовать эту переменную для передачи данных в любую внешнюю систему. Рады? Я тоже! Самое время перейти к настройке валидации формы через Google Tag Manager.

Проверка валидации формы при клике

Для этого решения нам понадобиться еще одна пользовательская переменная, назовем её {{JS - valid form}}, типа Собственный код JavaScript:

30.8 GTM variable for form validation on click

Для удобства можно скопировать код ниже:

javascript

function(){
 
   var name = jQuery('YOUR_SELECTOR_NAME').val();
 
   var email = jQuery('YOUR_SELECTOR_EMAIL').val();
 
   var tel = jQuery('YOUR_SELECTOR_TEL').val();
 
   var emailReg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
 
   var telReg = /^?[0-9()\- ]{10,20}$/;
 
 
 
   if(name.length > 0 && emailReg.test(email) && telReg.test(tel)) {
 
      return true;
 
   } else {
 
      return false;
 
   }
 
}

где вместо значений YOUR_SELECTOR_NAME, YOUR_SELECTOR_EMAIL, YOUR_SELECTOR_TEL необходимо ввести значение CSS-селекторов для соответствующих полей формы. Как это сделать мы разбирали выше.

Теперь, когда мы настроили валидацию внутри переменной GTM самое время создать триггер и тег для отправки данных в Google Analytics. Первый создаем по аналогии с обычным кликом на кнопку, единственное отличие - созданная нами переменная для проверки валидации должна иметь значение true.

30.9 Trigger for setting up form validation check on click

Тег будет выглядеть примерно так:

30.10 GA4 tag for sending data about successful form submission

Изменение данных в полях формы

Мы разобрали, как с помощью Google Tag Manager отслеживать попытки, а также успешные отправки формы. Но есть еще одна серая зона: посетители, которые начали заполнять форму, но так её и не отправили. Сейчас это исправим!

Здесь нам понадобится:

Тег для отслеживания взаимодействия с полями формы. Создайте тег типа Пользовательский HTML со следующими настройками:

30.11 Custom HTML tag for tracking interaction with form fields in GTM

Код который используется:

javascript

<script>
 
(function() {
 
   var formSelector = 'YOUR_SELECTOR';
 
   document.querySelector(formSelector).addEventListener('change', function() {
 
      dataLayer.push ({
 
         'event':'change form',
 
      })
 
   });
 
})();
 
</script>

Вместо значения YOUR_SELECTOR необходимо ввести значение CSS-селектора формы.

Триггером для данного тега выбираем событие Window Loaded. Лучше всего ограничить трегер только теми страницами, на которых есть соответствующая форма. Например для главной:

30.12 Window Loaded trigger for tracking interaction with form fields

И в момент когда пользователь изменяет значение в любом из полей формы, мы передаем на уровень данных информацию о событии change form, что позволит в следующем пункте настроить на это событие соответствующий триггер.

Тег для отправки данных в Google Analytics с соответствующим триггером. Для отправки данных создаем триггер типа Пользовательское событие и указываем имя события change form:

30.13 Event trigger for form tracking in GTM

При создании тега для передачи данных в Google Analytics важно в пункте Расширенные настройки > Настройки активации тега указать значение Один раз на страницу. Мы же не хотим, чтобы событие отправлялось каждый раз при смене значения в полях формы? Сам тег будет выглядеть следующим образом:

30.14 Tag for sending data to GA4 about interaction with form fields

С полученных данных вполне можно построить следующую воронку, которая даст нам понимание, на каком этапе взаимодействия с формой мы теряем вовлеченных пользователей:

пользователи, которые взаимодействовали с полями формы;
пользователи, которые пытались отправить форму;
пользователи, которые успешно отправили форму.

Если у вас остались вопросы по отслеживанию форм с помощью Google Tag Manager - пишите их в комментариях.

P.S. Необходимо ли расписывать в новых статьях, что именно делает определенный Java Script код, или и так понятно?

Google AnalyticsGoogle Tag ManagerJava Script

Автор

Макс Гапчук

Вебаналитик, Маркетолог