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

Ноябрь 12, 2019

Пользователь зашел к вам на сайт, начал заполнять форму, дошел до определенного поля с вводом контактных данных, заполнил его, но заявку не отправил? Или вам она не дошла? Но вы все равно можете узнать, что он ввел в нее. Как? Разбираемся в этой статье.

Примечание: все действия, которые описаны в этом материале, носят исключительно образовательный характер. Автор не призывает отслеживать персональные данные пользователей (телефон, e-mail и т.д.) и передавать их в инструменты аналитики.

В предыдущей статье я показывал, как с помощью виртуальных страниц и стандартных событий blur и focus можно отслеживать заполнение полей и строить визуализированные воронки в Google Analytics.

На этом же принципе построено и отслеживание заполнения полей формы, а также получение данных из них с помощью Google Tag Manager. Реализация завязана на событии blur, которое срабатывает тогда, когда идет переход фокуса от одного элемента к другому. Другими словами, пользователь сначала ввел данные в одно поле, потом перешел на другое. В этот момент мы в Google Analytics отправляем данные со значением этого поля. И так по всем полям.

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

Данные заполненный поле в GA. Форма не отправлена

Что для этого нужно?

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

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

Пример отслеживаемой формы

Далее заходим в GTM и создаем Пользовательский HTML тег. Вставляем код:

В 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. Вставляем следующий код:

В Google Tag Manager код выглядит так:

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

Собственный код JavaScript — GenericEvent

Сохраняем. И создаем еще одну переменную типа Переменная уровня данных со значением gtm.element.value, которая будет извлекать значение из нашего поля.

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

Переменная уровня данных

В качестве триггера активации создаем Пользовательское событие со значением custom.event.blur.

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

Пользовательское событие custom.event.blur

Теперь нам осталось создать тег Universal Analytics с типом отслеживания Событие, куда мы будем передавать данные о введенных пользователем значений. В качестве условия активации выбираем пользовательское событие custom.event.blur

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

Тег Universal Analytics

Главное – передать значение переменной gtm.element.value в категорию, действие или ярлык события. Сохраняем полученные настройки.

Для наглядности записал коротенькое видео о том, как это работает:

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

Таким образом, вы можете получать данные из полей форм тех пользователей, кто начал ее заполнять, но по какой-либо причине не сделал этого до конца и не отправил ее вам. Поскольку это события, то увидеть данные можно в отчете Поведение — События — Лучшие события.

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике