Среди трех основных способов оставить свою заявку на сайте, а именно: отправить форму, совершить звонок и написать в чат, первый занимает львиную долю в общем количестве и отслеживается намного чаще, чем остальные.
Большинство интернет-маркетологов норовят знать с каких конкретно источников приходят на площадку посетители, отправившие формы, и это не может не радовать. Но кроме успешной отправки, есть и другие способы взаимодействия с формами, и именно их отслеживание помогает понять, почему часть заинтересованных пользователей так и не совершили обращение. Мы разберем, как отслеживать следующие способы взаимодействия пользователя с формами (перечень от простого к сложному):
- отправка события при клике по кнопке отправки формы;
- передача значения введенного в поля формы;
- проверка валидации формы при клике;
- отслеживание изменения данных в полях формы.
Интересно? Тогда давайте по-быстрее приступим.
Отслеживание клика по кнопке отправки формы
Начнем с простого: клик по кнопке отправки формы, и нам понадобится:
- Включить встроенные переменные типа Clicks. Для этого перейдите в раздел Переменные > Встроенные переменные и нажмите кнопку Настроить:
- Узнать идентификатор, класс или CSS-селектор необходимой нам кнопки. Зачастую у необходимого элемента отсутствует класс или ID, поэтому мы пойдем по пути селектора CSS. В браузере Chrome нажмите правой кнопкой мыши на интересующем элементе и выберите пункт Просмотреть код. В открытом новом окне, на выделенном коде нажмите еще раз правой кнопкой мыши и выберите Copy > Copy selector:
- Создать триггер с необходимым условием. Выбираем тип триггера- Все элементы. Условие активации — Некоторые клики. И задаем следующее условие:
где, вместо YOUR_SELECTOR указываем скопированное значение CSS-селектора.
- Создать тег для отправки данных в Google Analytics. Тип необходимого тега Google Analytics — Universal Analytics. Тип отслеживания — Событие. Категорию, Действие и Ярлык события можно задать на своё усмотрение:
На этом настройка отслеживания клика по кнопке успешно завершена. Но на практике, у большинства форм есть валидация, и хорошо бы понимать, какой процент пользователей вводит корректные данные, а какой процент это делает с ошибками.
Передача значения введенного в поля формы
Чтобы настроить проверку валидации формы при клике на кнопку отправки нам необходимо сначала научиться сохранять значения, которые вводит пользователь в поля формы. Для этого нам понадобится пользовательская переменная типа Собственный код JavaScript со следующим кодом:
function() {
var value = jQuery('YOUR_SELECTOR').val();
return value;
}
Перед использованием необходимо заменить YOUR_SELECTOR на CSS-селектор необходимого поля. Получить его можно по аналогии с CSS-селекторами кнопки. Только кликать правой кнопкой теперь нужно не на кнопку, а на соответствующее поле:
Чтобы проверить, действительно ли вы скопировали необходимый селектор, запустите в консоли разработчика следующий код:
jQuery('YOUR_SELECTOR').val()
Если все верно, получите текущее значение поля:
Созданная переменная будет выглядеть следующим образом:
Теперь сможете использовать эту переменную для передачи данных в любую внешнюю систему. Рады? Я тоже! Самое время перейти к настройке валидации формы через Google Tag Manager.
Проверка валидации формы при клике
Для этого решения нам понадобиться еще одна пользовательская переменная, назовем её {{JS — valid form}}, типа Собственный код 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.
Тег будет выглядеть примерно так:
Изменение данных в полях формы
Мы разобрали, как с помощью Google Tag Manager отслеживать попытки, а также успешные отправки формы. Но есть еще одна серая зона: посетители, которые начали заполнять форму, но так её и не отправили. Сейчас это исправим!
Здесь нам понадобится:
- Тег для отслеживания взаимодействия с полями формы. Создайте тег типа Пользовательский HTML со следующими настройками:
Код который используется:
<script>
(function() {
var formSelector = 'YOUR_SELECTOR';
document.querySelector(formSelector).addEventListener('change', function() {
dataLayer.push ({
'event':'change form',
})
});
})();
</script>
Вместо значения YOUR_SELECTOR необходимо ввести значение CSS-селектора формы.
Триггером для данного тега выбираем событие Window Loaded. Лучше всего ограничить трегер только теми страницами, на которых есть соответствующая форма. Например для главной:
И в момент когда пользователь изменяет значение в любом из полей формы, мы передаем на уровень данных информацию о событии change form, что позволит в следующем пункте настроить на это событие соответствующий триггер.
- Тег для отправки данных в Google Analytics с соответствующим триггером. Для отправки данных создаем триггер типа Пользовательское событие и указываем имя события change form:
При создании тега для передачи данных в Google Analytics важно в пункте Расширенные настройки > Настройки активации тега указать значение Один раз на страницу. Мы же не хотим, чтобы событие отправлялось каждый раз при смене значения в полях формы? Сам тег будет выглядеть следующим образом:
С полученных данных вполне можно построить следующую воронку, которая даст нам понимание, на каком этапе взаимодействия с формой мы теряем вовлеченных пользователей:
- пользователи, которые взаимодействовали с полями формы;
- пользователи, которые пытались отправить форму;
- пользователи, которые успешно отправили форму.
Если у вас остались вопросы по отслеживанию форм с помощью Google Tag Manager — пишите их в комментариях.
P.S. Необходимо ли расписывать в новых статьях, что именно делает определенный Java Script код, или и так понятно?
