Отслеживание форм через Google Tag Manager можно выполнять разными способами, среди которых и event [code]gtm.formSubmit[/code] и другие, более интересные варианты. Сегодня я расскажу вам о том, как можно отследить специфическую форму с помощью Google Tag Manager. Ранее мы уже смотрели основные моменты в базовой настройке Google Tag Manager 2.0, теперь пора углубляться. Особенностью такой формы является тот факт, что при заполнении, а также ее конечным результатом не обновляется страница. Именно это и усложняет процесс настройки отслеживания формы. Не заполненная форма:
Далее необходимо посмотреть на внешний вид после заполненной формы. Такая форма выглядит следующим образом:
Рассмотрим пример такой формы и этапы настройки ее отслеживания с помощью Google Tag Manager. Итак, привязываемся к заполнению формы — [code]id=»success_page»[/code]. Для того, чтобы получить значение success_page от элемента id и понять, что это именно то, что нам нужно — мы создаем макрос, который будет вытягивать значение id из элемента.
Имя макросу даем осмысленное, если этот макрос отвечает за правильно заполненную форму, в которой есть текст по типу спасибо за заполненную форму, то называем его, например, ThankYou. Тип макроса выбираем Custom Java Script. Обо всех типах макросов и их применениях можно найти информацию на сайте. Данная функция на JS означает примерно следующее — найти элемент, id которого содержит succes_page и вернуть либо значение id, либо пустоту.
Выполняем подготовительные работы. Создаем тег прослушивание таймера или timer listener с интервалом порядка 1000 миллисекунд. Задаем ему правило активации — страницу контактов. В нашем случае таймер будет срабатывать на сайте через каждую секунду.
Создаем тег, который будет останавливать таймер, если форма будет заполнена. Тег stop timer when submit, тип тега Custom HTML Tag и прописываем небольшой скрипт. Все это вы можете увидеть на скриншоте ниже:
Внутри скрипта используется макрос timerId, который был создан немного ранее. Функция [code]window.clearInterval[/code] — убирает интервал для таймера, после чего он перестает работать. Макрос timerId можно увидеть ниже:
Теперь для тега остановки таймера и нашего основного тега [code]contact.click.FormSubmit[/code] нужно создать правило активации. Ниже показан новый тег, который отвечает за форму.
Для основного тега необходимо не забыть прописать Category и Action. В нашем случае Категория — Form_Submit, а Действие — click. Правило активации для двух тегов, которые описаны выше будет выглядеть следующим образом:
Название даем для правила осмысленное — submit. В правиле указываем событие, при котором сработает тег, итак, событие gtm.timer, который мы создали ранее и макрос {{ThankYou}} должен равняться succes_page. Таймер будет срабатывать на сайте каждую секунду, и проверять макрос {{ThankYou}} содержит succes_page или пустоту.
В этом случае тег [code]contact.click.FormSubmit[/code] будет активирован только когда будет заполнена правильно форма, а тег stop timer when submit — будет останавливать таймер после правильного заполнения формы.
Приступаем к созданию цели в Universal Analytics или Google Analytics.
После всех настроек не забываем проверять правильность работы всех созданных тегов, при этом используем — Режим реального времени в Google Analytics и, конечно же, режим debug у Google Tag Manager. Вопросы в комментарии, удачной настройки!
