Отслеживание форм Google Tag Manager

Отслеживание форм Google Tag Manager


Отслеживание форм через GTM

Отслеживание форм через Google Tag Manager можно выполнять разными способами, среди которых и event [code]gtm.formSubmit[/code] и другие, более интересные варианты. Сегодня я расскажу вам о том, как можно отследить специфическую форму с помощью Google Tag Manager. Ранее мы уже смотрели основные моменты в базовой настройке Google Tag Manager 2.0, теперь пора углубляться. Особенностью такой формы является тот факт, что при заполнении, а также ее конечным результатом не обновляется страница. Именно это и усложняет процесс настройки отслеживания формы. Не заполненная форма:

Форма не заполненная для отслеживания через GTM

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

Форма заполнененная  GTM

Рассмотрим пример такой формы и этапы настройки ее отслеживания с помощью Google Tag Manager. Итак, привязываемся к заполнению формы — [code]id=»success_page»[/code]. Для того, чтобы получить значение success_page от элемента id и понять, что это именно то, что нам нужно — мы создаем макрос, который будет вытягивать значение id из элемента.

Макрос Custom Java Script для отслеживания формы

Имя макросу даем осмысленное, если этот макрос отвечает за правильно заполненную форму, в которой есть текст по типу спасибо за заполненную форму, то называем его, например, ThankYou. Тип макроса выбираем Custom Java Script. Обо всех типах макросов и их применениях можно найти информацию на сайте. Данная функция на JS означает примерно следующее — найти элемент, id которого содержит succes_page и вернуть либо значение id, либо пустоту.

Выполняем подготовительные работы. Создаем тег прослушивание таймера или timer listener с интервалом порядка 1000 миллисекунд. Задаем ему правило активации — страницу контактов. В нашем случае таймер будет срабатывать на сайте через каждую секунду.

Timer listener для Google Tag Manager

Создаем тег, который будет останавливать таймер, если форма будет заполнена. Тег stop timer when submit, тип тега Custom HTML Tag и прописываем небольшой скрипт. Все это вы можете увидеть на скриншоте ниже:

Остановить таймер в Google Tag Manager

Внутри скрипта используется макрос timerId, который был создан немного ранее. Функция [code]window.clearInterval[/code] — убирает интервал для таймера, после чего он перестает работать. Макрос timerId можно увидеть ниже:

Макрос Data Layer Variable для события gtm.timerId

Теперь для тега остановки таймера и нашего основного тега [code]contact.click.FormSubmit[/code] нужно создать правило активации. Ниже показан новый тег, который отвечает за форму.

Тег для отслеживания формы через GTM

Для основного тега необходимо не забыть прописать Category и Action. В нашем случае Категория — Form_Submit, а Действие — click. Правило активации для двух тегов, которые описаны выше будет выглядеть следующим образом:

Правило для тега отслеживания форм через Google Tag Manager

Название даем для правила осмысленное — submit. В правиле указываем событие, при котором сработает тег, итак, событие gtm.timer, который мы создали ранее и макрос {{ThankYou}} должен равняться succes_page. Таймер будет срабатывать на сайте каждую секунду, и проверять макрос {{ThankYou}} содержит succes_page или пустоту.

В этом случае тег [code]contact.click.FormSubmit[/code] будет активирован только когда будет заполнена правильно форма, а тег stop timer when submit — будет останавливать таймер после правильного заполнения формы.

Приступаем к созданию цели в Universal Analytics или Google Analytics.

Создание цели для отслеживания формы в Google Analytics

После всех настроек не забываем проверять правильность работы всех созданных тегов, при этом используем — Режим реального времени в Google Analytics и, конечно же, режим debug у Google Tag Manager. Вопросы в комментарии, удачной настройки!

Есть вопрос или комментарий?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *