Лайфхак: Получить данные из полей формы, даже если форма не была отправлена
Пользователь зашел к вам на сайт, начал заполнять форму, дошел до определенного поля с вводом контактных данных, заполнил его, но заявку не отправил? Или вам она не дошла? Но вы все равно можете узнать, что он ввел в нее. Как? Разбираемся в этой статье.
Примечание: все действия, которые описаны в этом материале, носят исключительно образовательный характер. Автор не призывает отслеживать персональные данные пользователей (телефон, e-mail и т.д.) и передавать их в инструменты аналитики.
В предыдущей статье я показывал, как с помощью виртуальных страниц и стандартных событий blur и focus можно отслеживать заполнение полей и строить визуализированные воронки в Google Analytics.
На этом же принципе построено и отслеживание заполнения полей формы, а также получение данных из них с помощью Google Tag Manager. Реализация завязана на событии blur, которое срабатывает тогда, когда идет переход фокуса от одного элемента к другому. Другими словами, пользователь сначала ввел данные в одно поле, потом перешел на другое. В этот момент мы в Google Analytics отправляем данные со значением этого поля. И так по всем полям.
Данные заполненный поле в GA. Форма не отправлена
Что для этого нужно?
Сначала определяем форму, с которой хотим получать данные. В качестве примера я возьму всю ту же с graphanalytics.ru на заявку бесплатного аудита.
Пример отслеживаемой формы
Далее заходим в GTM и создаем Пользовательский HTML тег. Вставляем код:
|
1 2 3 4 5 6 7 8 |
<script> (function() { var eventName = 'blur'; var form = document.querySelector('#popup-audit') || document; var useCapture = true; form.addEventListener(eventName, {{GenericEvent}}, useCapture); })(); </script> |
В GTM это выглядит так:
Пользовательский HTML тег
, где
- eventName = 'blur' – наше отслеживаемое событие;
- form = document.querySelector('#popup-audit') || document – моя форма на сайте с селектором;
- useCapture = true – параметр, который указывает, что пользователь желает начать захват. После инициализации захвата все события указанного типа будут отправлены в зарегистрированный listener.
Подробнее об этом читайте в документации Mozilla.
Триггер активации – All Pages (Все страницы). Тег активируется и регистрирует указанный нами тип события blur на соответствующей форме с объектом {{GenericEvent}}. Что это за объект? Это переменная типа Собственный код JavaScript, про которую Симо Ахава (Simo Ahava) писал в своих публикациях (статья 1 и статья 2), и я в адаптированном материале.
Создаем ее в нашем Google Tag Manager. Вставляем следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function() { return function(event) { window.dataLayer.push({ event: 'custom.event.' + event.type, 'custom.gtm.element': event.target, 'custom.gtm.elementClasses': event.target.className || '', 'custom.gtm.elementId': event.target.id || '', 'custom.gtm.elementTarget': event.target.target || '', 'custom.gtm.elementUrl': event.target.href || event.target.action || '', 'custom.gtm.originalEvent': event }); }; } |
В Google Tag Manager код выглядит так:
Собственный код JavaScript - GenericEvent
Сохраняем. И создаем еще одну переменную типа Переменная уровня данных со значением gtm.element.value, которая будет извлекать значение из нашего поля.
Переменная уровня данных
В качестве триггера активации создаем Пользовательское событие со значением custom.event.blur.
Пользовательское событие custom.event.blur
Теперь нам осталось создать тег Universal Analytics с типом отслеживания Событие, куда мы будем передавать данные о введенных пользователем значений. В качестве условия активации выбираем пользовательское событие custom.event.blur
Тег Universal Analytics
Главное – передать значение переменной gtm.element.value в категорию, действие или ярлык события. Сохраняем полученные настройки.
Для наглядности записал коротенькое видео о том, как это работает:
Таким образом, вы можете получать данные из полей форм тех пользователей, кто начал ее заполнять, но по какой-либо причине не сделал этого до конца и не отправил ее вам. Поскольку это события, то увидеть данные можно в отчете Поведение - События - Лучшие события.
