Брошенная форма — это когда посетитель частично или полностью заполняет форму, но не отправляет ее нам. Мы думаем, что посетителю не нравится товар, а он просто не хочет писать полностью ФИО. Разобрались, как анализировать брошенные формы на сайте, чтобы не терять посетителей.
Форма — это то, что требует ввода со стороны посетителя: оставить номер телефона, вбить почту для рассылки или поставить галочку напротив «согласия о персональных данных». Когда посетитель «бросает» форму, по умолчанию мы не знаем, почему он ушел: какие данные успел ввести, на каком поле остановился, с какого товара покинул страницу. Мы рискуем сделать неправильные выводы и потерять деньги.
Решать проблему будем с помощью GTM и Analytics. Из статьи вы узнаете:
- как отслеживать брошенные формы в GTM;
- как передавать данные о брошенных формах в Analytics;
- почему не всегда получается отслеживать брошенные формы.
В конце будет кейс c рабочим решением по настройке отслеживания.
Прослушивание брошенных форм
Прослушивание (listener) — это скрипт, который привязывается к событию. Сначала мы создаем событие, затем настраиваем прослушивание, которое запускает событие в нужный момент. Пример — всплывающее окно, которое появляется ровно тогда, когда посетитель хочет закрыть вкладку:
На Гитхабе есть уже , который автоматически отслеживает незаполненные формы, даже если их несколько. Если посетитель оставил форму незаполненной и покинул сайт, скрипт запустит событие dataLayer, которое покажет нам, с какими полями взаимодействовал посетитель. В Analytics отчет выглядит так:
Form Abandonment — это событие, которое мы будем использовать. Если посетитель оставил форму незаполненной, в отчете мы увидим это событие.
Your-name и your-email — это те поля, которые посетитель успел заполнить. Из отчета неизвестно, сколько полей в форме, но если предположить, что полей три, то незаполненное поле может быть причиной того, что посетитель решил оставить форму незаполненной (посчитал, что сайт хочет знать о нем слишком много).
Но со скриптом есть проблема: он не отслеживает последовательность взаимодействия с полями. С какого бы места посетитель ни начал заполнять форму, последовательность останется. Вот пример, где посетитель полностью заполнил форму, а потом бросил ее:
Наш план:
1. В пользовательском HTML-теге указываем код прослушивания, который будет отслеживать брошенные формы. Тег запускаем только на страницах с формами.
2. Код будет отправлять данные каждый раз, когда посетитель бросит форму. Чтобы GTM правильно обрабатывал данные и отправлял их в Analytics, мы создадим триггер и две переменные.
3. Затем мы собираем всё в одном месте — создаем тег Universal Analytics, который будет формировать отчет.
Создаем код прослушивания
В HTML-теге мы пропишем код прослушивания, который будет отслеживать брошенные страницы. Идем в GTM → Теги → Создать → Пользовательский HTML и вставляем код прослушивания:
Прослушивание отслеживает заполненные поля, выпадающее меню, чекбоксы и радиокнопки. Как только посетитель бросит форму, прослушивание отправит событие formAbandonment в Analytics. За это отвечает эта часть кода:
dataLayer.push({
'event' : 'formAbandonment',
'eventCategory' : 'Form Abandonment',
'eventAction' : it.history.join(" > ") /*Поля формы, которые были заполнены посетителем*/
})
Создадим триггер, чтобы тег срабатывал только там, где есть формы. В поле ниже выбираем тип триггера «Отправка формы» и вбиваем настройки:
Сохраните тег и триггер. Пока что мы не можем протестить работоспособность тега, потому что событие сработает только тогда, когда будет закрыта вкладка браузера с формой, или посетитель уйдет на другую страницу.
Отправляем данные в Google Analytics
GTM теперь собирает информацию по брошенным формам. Теперь нужно сделать так, чтобы информация отображалась в отчетах Analytics. Для этого нужно создать тег Universal Analytics, который будет передавать эти данные из GTM в Analytics.
Прежде чем создавать этот тег, создадим триггер и две переменные.
Создаем триггер, выбираем тип «Пользовательское событие» и называем его formAbandonment (брошенная форма):
Затем создаем две переменные: eventCategory и eventAction.
eventCategory — это «Категория событий» в Analytics. Когда посетитель бросит форму, в Analytics отобразится надпись Form Abandonment — так вы сразу узнаете, что посетитель бросил форму.
eventAction — в нем отобразятся поля формы, которые были заполнены посетителем.
Переменные выглядят так:
После того как мы создали триггер и две переменные, соберем все в одном теге Universal Analytics. Тег будет передавать эти данные из GTM в Analytics:
Поскольку обработка брошенной формы запускается в момент, когда посетитель уходит со страницы, есть риск, что тег не успеет сработать вовремя. Если данные отправятся раньше, часть информации потеряется, если позже — потеряется вся информация. Чтобы снизить риск, в настройках тега дополнительно указываем beacon — небольшую встроенную программу, которая помогает собрать полные данные:
Название поле — transport
Значение — beacon
После того, как вы настроили тег, наша схема выглядит так:
- Посетитель заходит на сайт, вбивает данные в форму, передумывает и уходит со страницы.
- Код прослушивания увидит момент, когда посетитель бросит форму, и отправит пользовательское событие в dataLayer с переменными eventCategory и eventAction.
- Событие отправляется в Google Analytcs, а значения eventCategory и eventAction отобразятся в отчете по событиям (Analytics → Отчеты в реальном времени → События).
Протестируем работоспособность — сыграем роль посетителя, который бросает форму:
- Запускаем GTM в режиме предварительного просмотра и обновляем страницу с формой.
- Заполняем несколько полей и закрываем страницу.
- В Analytics открываем отчеты в режиме реального времени, нажимаем на «События за последние 30 мин».
Видим результат в Analytics (Analytics → Отчеты в реальном времени → События):
Проблемы с отслеживанием форм
Основная проблема с отслеживанием форм в GTM — это то, что нет единого стандарта разработки форм. Например, разработчик может сделать форму на HTML, а может в AJAX — в этом случае отслеживание не сработает, а в Analytics мы ничего не увидим.
Типовые причины, по которым брошенные формы могут не отслеживаться:
Устаревший браузер. Если посетитель заходит с устаревшего браузера, отслеживание не сработает:
Не прописан тег