Отслеживание брошенных форм с помощью GTM

Сентябрь 30, 2020

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

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

В качестве примера я опишу процесс отслеживания данных формы на моем сайте gtm.osipenkov.ru. Сама форма содержит три поля: имя, e-mail и комментарий пользователя.

Отслеживание брошенных форм с помощью GTM

Пример формы

Наша задача – передать информацию по всем трем полям в веб-аналитику даже в том случае, если пользователь не нажмет на кнопку Отправить.

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

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

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

В GTM для поля Имя из моей формы это выглядит так:

Отслеживание брошенных форм с помощью GTM

Код для извлечения данных из текстового поля

Имя переменной vashePole может быть любым. Лично я называю их по имени самого поля в форме на сайте. Для Имя – formName, для E-mailformMail, для комментария пользователя – formMessage.

Отслеживание брошенных форм с помощью GTM

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

Чтобы узнать CSS-селектор конкретного поля, откройте в браузере консоль разработчика (клавиша F12 для Google Chrome). Выделите поле, которое хотите отследить. Нажмите на него правой кнопкой мыши и выберите CopyCopy selector.

Отслеживание брошенных форм с помощью GTM

Копирование селектора поля

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

где, вместо CSS-селектор вы вставляете селектор собственной формы.

Отслеживание брошенных форм с помощью GTM

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

Для моей формы код в Google Tag Manager будет выглядеть вот так:

Отслеживание брошенных форм с помощью GTM

Код для тега Пользовательский HTML

Триггер активации – Все страницы (All Pages). Добавьте триггер типа Пользовательское событие с именем formChange:

Отслеживание брошенных форм с помощью GTM

Триггер "Пользовательское событие"

На заключительном шаге создайте тег Google Аналитика – Universal Analytics с типом отслеживания Событие. В качестве условия активации выберите пользовательское событие formChange.

Отслеживание брошенных форм с помощью GTM

Настройка тега

На рисунке выше приведен пример, в котором три переменных, созданных на предыдущих шагах, передаются в Google Analytics в поле Ярлык. Сохраните полученные настройки.

Проверьте передачу данных и активацию триггера в режиме предварительного просмотра Google Tag Manager. Начните заполнять форму: введите данные в поле Имя и переведите курсор в следующее поле E-mail. В этот момент должно сработать событие formChange и активироваться тег, в котором передастся значение поле Имя в Google Analytics.

Отслеживание брошенных форм с помощью GTM

Событие formChange в режиме отладки

В отчете Google Analytics В режиме реального времени вы увидите значение первого поля:

Отслеживание брошенных форм с помощью GTM

Заполнено одно поле

Если пользователь заполнит и второе поле, тогда в аналитику передастся еще одно событие formChange, но уже с двумя переменными:

Отслеживание брошенных форм с помощью GTM

Заполнены два поля

Если пользователь заполнит все три поля, тогда в аналитику передастся еще одно событие formChange, но уже с тремя переменными:

Отслеживание брошенных форм с помощью GTM

Заполнены три поля

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

Метки:

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

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