Отслеживаем взаимодействие пользователей с формами при помощи Google Tag Manager

Отслеживаем взаимодействие пользователей с формами при помощи Google Tag Manager

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

Большинство интернет-маркетологов норовят знать с каких конкретно источников приходят на площадку посетители, отправившие формы, и это не может не радовать. Но кроме успешной отправки, есть и другие способы взаимодействия с формами, и именно их отслеживание помогает понять, почему часть заинтересованных пользователей так и не совершили обращение. Мы разберем, как отслеживать следующие способы взаимодействия пользователя с формами (перечень от простого к сложному):

Интересно? Тогда давайте по-быстрее приступим.

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

Начнем с простого: клик по кнопке отправки формы, и нам понадобится:

  • Включить встроенные переменные типа Clicks. Для этого перейдите в раздел Переменные > Встроенные переменные и нажмите кнопку Настроить:

Включаем встроенные переменные GTM типа Clicks

  • Узнать идентификатор, класс или CSS-селектор необходимой нам кнопки. Зачастую у необходимого элемента отсутствует класс или ID, поэтому мы пойдем по пути селектора CSS. В браузере Chrome нажмите правой кнопкой мыши на интересующем элементе и выберите пункт Просмотреть код. В открытом новом окне, на выделенном коде нажмите еще раз правой кнопкой мыши и выберите Copy > Copy selector:

Как узнать идентификатор, класс или CSS-селектор необходимой кнопки

  • Создать триггер с необходимым условием. Выбираем тип триггера- Все элементы. Условие активации — Некоторые клики. И задаем следующее условие:

Создание тригера по клику на определенную кнопку формы

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

  • Создать тег для отправки данных в Google Analytics. Тип необходимого тега Google Analytics — Universal Analytics. Тип отслеживания — Событие. Категорию, Действие и Ярлык события можно задать на своё усмотрение:

Тег отправки события по клику на кнопку формы

На этом настройка отслеживания клика по кнопке успешно завершена. Но на практике, у большинства форм есть валидация, и хорошо бы понимать, какой процент пользователей вводит корректные данные, а какой процент это делает с ошибками.

Передача значения введенного в поля формы

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

Перед использованием необходимо заменить YOUR_SELECTOR на CSS-селектор необходимого поля. Получить его можно по аналогии с CSS-селекторами кнопки. Только кликать правой кнопкой теперь нужно не на кнопку, а на соответствующее поле:

Как узнать CSS-селектор поля ввода формы

Чтобы проверить, действительно ли вы скопировали необходимый селектор, запустите в консоли разработчика следующий код:

Если все верно, получите текущее значение поля:

Проверка CSS-селектора в консоли разработчика

Созданная переменная будет выглядеть следующим образом:

Переменная для хранения информации с инпутов формы

Теперь сможете использовать эту переменную для передачи данных в любую внешнюю систему. Рады? Я тоже! Самое время перейти к настройке валидации формы через Google Tag Manager.

Проверка валидации формы при клике

Для этого решения нам понадобиться еще одна пользовательская переменная, назовем её {{JS — valid form}}, типа Собственный код JavaScript:

Переменная Google Tag Manager для валидации формы при клике

Для удобства можно скопировать код ниже:

где вместо значений YOUR_SELECTOR_NAME, YOUR_SELECTOR_EMAIL, YOUR_SELECTOR_TEL необходимо ввести значение CSS-селекторов для соответствующих полей формы. Как это сделать мы разбирали выше.

Теперь, когда мы настроили валидацию внутри переменной GTM самое время создать триггер и тег для отправки данных в Google Analytics. Первый создаем по аналогии с обычным кликом на кнопку, единственное отличие — созданная нами переменная для проверки валидации должна иметь значение true.

Тригер для настройки проверки валидации формы при клике

Тег будет выглядеть примерно так:

Тег Google Analytics для отправки данных об успешной отправке формы

Изменение данных в полях формы

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

Здесь нам понадобится:

  • Тег для отслеживания взаимодействия с полями формы. Создайте тег типа Пользовательский HTML со следующими настройками:

Пользовательский HTML тег для отслеживания взаимодействия с полями формы в GTM

Код который используется:

Вместо значения YOUR_SELECTOR необходимо ввести значение CSS-селектора формы.

Триггером для данного тега выбираем событие Window Loaded. Лучше всего ограничить трегер только теми страницами, на которых есть соответствующая форма. Например для главной:

Тригер Window Loaded для отслеживания взаимодействия с полями формы

И в момент когда пользователь изменяет значение в любом из полей формы, мы передаем на уровень данных информацию о событии change form, что позволит в следующем пункте настроить на это событие соответствующий триггер.

  • Тег для отправки данных в Google Analytics с соответствующим триггером. Для отправки данных создаем триггер типа Пользовательское событие и указываем имя события change form:

Тригер пользовательского события для отслеживания формы в Google Tag Manager

При создании тега для передачи данных в Google Analytics важно в пункте Расширенные настройки > Настройки активации тега указать значение Один раз на страницу. Мы же не хотим, чтобы событие отправлялось каждый раз при смене значения в полях формы? Сам тег будет выглядеть следующим образом:

Тег для отправки данных в Google Analytics о взаимодействии с полями формы

С полученных данных вполне можно  построить следующую воронку, которая даст нам понимание, на каком этапе взаимодействия с формой мы теряем вовлеченных пользователей:

  • пользователи, которые взаимодействовали с полями формы;
  • пользователи, которые пытались отправить форму;
  • пользователи, которые успешно отправили форму.

Если у вас остались вопросы по отслеживанию форм с помощью Google Tag Manager — пишите их в комментариях.

 

P.S. Необходимо ли расписывать в новых статьях, что именно делает определенный Java Script код, или и так понятно?