Отслеживание брошенных форм с помощью GTM
Пользователь частично или полностью заполняет форму, но не отправляет ее нам по какой-либо причине: отвлекли, передумал, нечаянно закрыл вкладку браузера и не знает, как вернуться назад и т.д. Это и есть брошенная форма. С помощью Google Tag Manager вы можете отслеживать и такие.
Примечание: все действия, которые описаны в этом материале, носят исключительно образовательный характер. Автор не призывает отслеживать персональные данные пользователей (телефон, e-mail и т.д.) и передавать их в инструменты веб-аналитики.
В качестве примера я опишу процесс отслеживания данных формы на моем сайте gtm.osipenkov.ru. Сама форма содержит три поля: имя, e-mail и комментарий пользователя.
Наша задача – передать информацию по всем трем полям в веб-аналитику даже в том случае, если пользователь не нажмет на кнопку Отправить.
Реализация завязана на браузерном событии change, которое происходит по окончании изменения значения элемента формы, когда это изменение зафиксировано. Для текстовых элементов это означает, что событие произойдет не при каждом вводе, а при потере фокуса. Например, пока вы набираете что-то в текстовом поле ниже – события нет. Но как только вы уведете фокус на другой элемент, например, нажмете кнопку – произойдет событие. Другими словами, пользователь сначала ввел данные в одно поле, потом перешел на другое. В этот момент вы в Google Analytics отправляете данные со значением этого поля. И так по всем полям.
Для того, чтобы передавать значения полей в Google Analytics, нам сначала необходимо эту информацию извлечь, сохранить в переменных. Для этого создайте в Google Tag Manager пользовательскую переменную типа Собственный код JavaScript с таким кодом:
1 2 3 4 |
function(){ var vashePole = $('CSS-селектор').val(); return vashePole; } |
где, вместо CSS-селектор вы вставляете селектор из собственного поля.
В GTM для поля Имя из моей формы это выглядит так:
Имя переменной vashePole может быть любым. Лично я называю их по имени самого поля в форме на сайте. Для Имя – formName, для E-mail – formMail, для комментария пользователя – formMessage.
Чтобы узнать CSS-селектор конкретного поля, откройте в браузере консоль разработчика (клавиша F12 для Google Chrome). Выделите поле, которое хотите отследить. Нажмите на него правой кнопкой мыши и выберите Copy – Copy selector.
После извлечения данных полей форм создайте тег типа Пользовательский HTML со следующими настройками:
1 2 3 4 5 6 7 8 9 10 |
<script> (function() { var formSelector = 'CSS-селектор'; document.querySelector(formSelector).addEventListener('change', function() { dataLayer.push ({ 'event':'formChange', }) }); })(); </script> |
где, вместо CSS-селектор вы вставляете селектор собственной формы.
Для моей формы код в Google Tag Manager будет выглядеть вот так:
Триггер активации – Все страницы (All Pages). Добавьте триггер типа Пользовательское событие с именем formChange:
На заключительном шаге создайте тег Google Аналитика – Universal Analytics с типом отслеживания Событие. В качестве условия активации выберите пользовательское событие formChange.
На рисунке выше приведен пример, в котором три переменных, созданных на предыдущих шагах, передаются в Google Analytics в поле Ярлык. Сохраните полученные настройки.
Проверьте передачу данных и активацию триггера в режиме предварительного просмотра Google Tag Manager. Начните заполнять форму: введите данные в поле Имя и переведите курсор в следующее поле E-mail. В этот момент должно сработать событие formChange и активироваться тег, в котором передастся значение поле Имя в Google Analytics.
В отчете Google Analytics В режиме реального времени вы увидите значение первого поля:
Если пользователь заполнит и второе поле, тогда в аналитику передастся еще одно событие formChange, но уже с двумя переменными:
Если пользователь заполнит все три поля, тогда в аналитику передастся еще одно событие formChange, но уже с тремя переменными:
Таким образом, вы можете отправлять в Google Analytics данные из полей форм тех пользователей, кто начал ее заполнять, но по какой-либо причине не сделал этого до конца или не отправил ее вам. Поскольку вы отправляете данные как события, то увидеть их можно в отчете Поведение - События - Лучшие события.