[GTM + Analytics] Как отслеживать брошенные формы

Брошенная форма — это когда посетитель частично или полностью заполняет форму, но не отправляет ее нам. Мы думаем, что посетителю не нравится товар, а он просто не хочет писать полностью ФИО. Разобрались, как анализировать брошенные формы на сайте, чтобы не терять посетителей.

Форма — это то, что требует ввода со стороны посетителя: оставить номер телефона, вбить почту для рассылки или поставить галочку напротив «согласия о персональных данных». Когда посетитель «бросает» форму, по умолчанию мы не знаем, почему он ушел: какие данные успел ввести, на каком поле остановился, с какого товара покинул страницу. Мы рискуем сделать неправильные выводы и потерять деньги.

Решать проблему будем с помощью 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. За это отвечает эта часть кода:

Создадим триггер, чтобы тег срабатывал только там, где есть формы. В поле ниже выбираем тип триггера «Отправка формы» и вбиваем настройки:

В названии триггера укажите страницу, на которой находится форма. Замените /o-nas на адрес страницы, где находится форма.

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

Отправляем данные в Google Analytics

GTM теперь собирает информацию по брошенным формам. Теперь нужно сделать так, чтобы информация отображалась в отчетах Analytics. Для этого нужно создать тег Universal Analytics, который будет передавать эти данные из GTM в Analytics.

Прежде чем создавать этот тег, создадим триггер и две переменные.

Создаем триггер, выбираем тип «Пользовательское событие» и называем его formAbandonment (брошенная форма):


Затем создаем две переменные: eventCategory и eventAction.

eventCategory — это «Категория событий» в Analytics. Когда посетитель бросит форму, в Analytics отобразится надпись Form Abandonment — так вы сразу узнаете, что посетитель бросил форму.

eventAction — в нем отобразятся поля формы, которые были заполнены посетителем.

Переменные выглядят так:

После того как мы создали триггер и две переменные, соберем все в одном теге Universal Analytics. Тег будет передавать эти данные из GTM в Analytics:

Поскольку обработка брошенной формы запускается в момент, когда посетитель уходит со страницы, есть риск, что тег не успеет сработать вовремя. Если данные отправятся раньше, часть информации потеряется, если позже — потеряется вся информация. Чтобы снизить риск, в настройках тега дополнительно указываем beacon — небольшую встроенную программу, которая  помогает собрать полные данные:

Название поле — transport
Значение — beacon
После того, как вы настроили тег, наша схема выглядит так:

  1. Посетитель заходит на сайт, вбивает данные в форму, передумывает и уходит со страницы.
  2. Код прослушивания увидит момент, когда посетитель бросит форму, и отправит пользовательское событие в dataLayer с переменными eventCategory и eventAction.
  3. Событие отправляется в Google Analytcs, а значения eventCategory и eventAction отобразятся в отчете по событиям (Analytics → Отчеты в реальном времени → События).

Протестируем работоспособность — сыграем роль посетителя, который бросает форму:

  1. Запускаем GTM в режиме предварительного просмотра и обновляем страницу с формой.
  2. Заполняем несколько полей и закрываем страницу.
  3. В Analytics открываем отчеты в режиме реального времени, нажимаем на «События за последние 30 мин».

Видим результат в Analytics (Analytics → Отчеты в реальном времени → События):

EventCategory — Категория событий, EventAction — Действия по событию (список заполенных полей формы)

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

Основная проблема с отслеживанием форм в GTM — это то, что нет единого стандарта разработки форм. Например, разработчик может сделать форму на HTML, а может в AJAX — в этом случае отслеживание не сработает, а в Analytics мы ничего не увидим.

Типовые причины, по которым брошенные формы могут не отслеживаться:

Устаревший браузер. Если посетитель заходит с устаревшего браузера, отслеживание не сработает:

Красным выделены браузеры, на которых не получится отследить брошенные формы


Не прописан тег <form>
. Есть формы, которые используют только <div>, без <form>:

Убедитесь, что форма сделана с помощью тега <form>


Отсутствует атрибут name
. Каждое поле формы должно иметь свое имя:

Неправильное event-событие. Когда посетитель нажимает на кнопку «Отправить», в браузере срабатывает событие submit. Если событие срабатывает, то наш скрипт не срабатывает, потому что это значит, что посетитель заполнил все поля и успешно отправил форму. Если ваша форма сделана с помощью AJAX, то тогда скрипт будет срабатывать всегда.

Кейс

Для примера возьмем сайт с арендой яхт. На сайте представлены несколько типов яхт, на которых можно покататься. Под каждой яхтой есть кнопка «Оставить заявку», по которой открывается контактная форма:


Задача — отследить, на каком моменте посетитель бросает форму, и передать данные в Analytics. Последовательность действий:

Создаем тестовый GTM-контейнер. Повторяем все действия: добавляем пользовательский HTML-тег с прослушиванием Form Abandonment, создаем триггер и две переменные, собираем все в теге Universal Analytics.

С помощью расширения Tag Manager Injector вставляем тег в код сайта (Изменения видите только вы: код вставляется в вашем браузере и не влияет на работоспособность сайта).
Установить Tag Manager Injector (для Chrome)

Проверяем работу тега через «Предварительный просмотр». Включаем режим предварительного просмотра и обновляем страницу сайта — появится консоль:

Тег сработал, поэтому продолжаем тестирование

 

Заполняем в форме половину полей, бросаем форму и сразу же проверяем результат в Analytics:

Хорошее начало: событие Form Abandonment было зафиксировано, а действие по событию (your name > your-email) показывает, что посетитель смог заполнить только первые два поля формы и ушел со страницы

 

Названия всех полей формы подтянулись в Analytics, потому что у каждого поля есть атрибут name:


Форма на HTML-е, поэтому отслеживание удалось:


Есть две проблемы:

  1. Форма некорректно отправляет событие event и перенаправляет посетителя на страницу «Спасибо за обращение».
    Решениеправильно настроенное event-событие.
  2. Не получилось выяснить через GTM какая именно форма под какой яхтой была покинута. Поскольку под каждой яхтой есть такая форма, это важно понимать, потому что можно выявить непопулярную яхту.
    Решение — Настроить срабатывание события dataLayer.push каждый раз, когда посетитель открывает форму:

Затем создаем переменную уровня данных под названием product, и добавляем ее в тег Universal Analytics в качестве ярлыка. Результат выглядит так:

Теперь в Analytics будет попадать название каждой лодки

Что в итоге

Отслеживайте брошенные формы, чтобы лучше понимать, почему посетитель ушел с сайта. Существуют готовые решения, которые помогают отслеживать формы: это проще, чем настраивать отслеживание вручную, но на это нужны деньги. Отслеживание форм через связку GTM + Analytics бесплатно и помогает анализировать информацию в одном месте. Если вы понимаете, что вам тяжело настраивать отслеживание форм (например, вы обнаружили, что на всех страницах сайта отсутствует тег <form>, обратитесь к помощи программистов.

Идеально, если брошенных форм будет мало. Вот статьи, которые помогут вам снизить показатель отказов и сделать сайт удобнее для посетителей:

GTM. Как отслеживать прокрутку на сайте
Основные принципы интерактивного дизайна
Работа с офлайн-пользователями в Google Analytics

Перевод и адаптация статьи Form abandonment tracking with GTM