Настройка цели на форму через Google Tag Manager

Необходимо было настроить цели на формы. Решили установить отслеживание на нажание кнопки формы и её успешну отправку. Всего на сайте насчитали 6 форм. Делать это Яндекс Метрикой посчитали кощунством, а сразу настроить всё через Google Analytics и Google Tag Manager. В пользу GTM играет файл визуально удобной установки всех меток на сайте без применения JS и даже не надо залезать в код, а достаточно использовать консоль разработчика.

Сайт на WordPress, а формы у нас настроены через плагин WPForms. Очень удобный и гибкий в настройке и внедрении форм на сайт.

Каждый шаг, каждая необходимая кнопка в формах WPF размечена уникальным ID. Так, чтобы настроить отслеживание нам пригодилось два ID — кнопка «Отправить» и всплывающее окно с сообщением об успешном отправлении, которое плагином было размечено собственным уникальным ID конкретной формы.

Вызов на дом
#wpforms-submit-3502
#wpforms-confirmation-3502
Задать вопрос
#wpforms-submit-3522
#wpforms-confirmation-3522
Записаться на услугу
#wpforms-submit-2906
#wpforms-confirmation-2906
Записаться на услугу
#wpforms-submit-2906
#wpforms-confirmation-2906
Отправить отзыв
#wpforms-submit-2036
#wpforms-confirmation-2036
Записаться на семинар
#wpforms-submit-1910
#wpforms-confirmation-1910

Кнопка отправления формы помечается триггером «Клик на элемент с ID».

Настройка цели на форму через Google Tag Manager

Так как подтверждение того, что форма отправлена, у нас всплывающее, здесь необходимо указать в настройках триггера «Доступность элемента».

Настройка цели на форму через Google Tag Manager

Затем конфигурируем Тег с типом отслеживания «Событие» и размечаем категория-действие-ярлык понятным нам текстом. Записываем, потому что потом нам это событие надо будет привязывать к целям Google Analytics, чтобы фиксировалась конверсия.

Настройка цели на форму через Google Tag Manager

Триггер для данного Тега выбираем из ранее созданного клика по элементу с ID кнопки.

Настройка цели на форму через Google Tag Manager

Уходим из Google Tag Manager и идём в Google Analytics чтобы настроить фиксированние цели.

Настройка цели на форму через Google Tag Manager

Указываем название цели и записываем текст, который мы указывали в GTM, чтобы в аналитике для Конверсии у нас было понятное название. Можно считать, что у нас соотносится информация из GTM с GA и собирается статистика. Потому что сам GTM не собирает статистику, а лишь является звеном для фиксирования действий на сайте для дальнейшей оценки.

Настройка цели на форму через Google Tag Manager

После сохранения ваша цель появляется в общем списке целей.

Настройка цели на форму через Google Tag Manager

Теперь можно вернуться в Google Tag Manager и проверить с помощью предварительного просмотра, работает ли наш Тег.

Настройка цели на форму через Google Tag Manager

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

‘Tag Not Fired On This Page’ — означает, что Тег ещё не активировался, но факт того, что он есть в данном списке говорит о том, что мы на правильном пути.

Настройка цели на форму через Google Tag Manager

В текущем примере я рассказываю, как внедрить отслеживание события по нажатию на кнопку. Когда нажимаем на кнопку, к которой привязывали событие, при правильной настройке, мы увидим, что наш Тег «Задать вопрос» перешёл в верхний блок, в котором находятся все активированные теги на странице.

Настройка цели на форму через Google Tag Manager

Это подробное описание нашего тега, который активируется по клику на ID равный wpforms-submit-3522.

Настройка цели на форму через Google Tag Manager

Google Analytics зафиксировал Событие нашего Тега:

Настройка цели на форму через Google Tag Manager

А здесь мы видим, что Конверсия также сработала. Значит у нас всё получилось и с данного момента мы будем собирать информацию по нашим формам, насколько они успешны, как часто ими пользуются и на каком пути пользователь отваливается.

Настройка цели на форму через Google Tag Manager

Например, посетитель мог заполнить из пяти полей формы только два, нажал «отправить форму», но форма не отправилась, потому что надо заполнить все 5 полей. Так как у нас создано два Тега и, соответственно, две цели — на нажатие кнопки «отправить» и на момент, когда форма отправлена и показывается благодарственное сообщение — мы сможем понять, что надо сократить количество полей в форме.

Настройка цели на форму через Google Tag Manager

В предварительном просмотре, активированном через Google Tag Manager, наше событие активировалось два раза. Форму заполнили и форму отправили. Теперь в Google Analytics мы сможем увидеть, с какой страницы была отправлена форма, а также собрать другой массив информации.

Настройка цели на форму через Google Tag Manager

Вот такой внушительный список форм

Настройка цели на форму через Google Tag Manager

У меня был момент, когда я не понимал, почему Цель зафиксировалась при просмотре «В режиме реального времени», а Конверсия не засчиталась. Если у вас случилось тоже самое, но вы не знаете что делать, то в данном случае помогает не указывать в поле «Ценность» какое-либо значение, потому что в нашем случае Цель ожидает передачу определённой ценности, а она не передаётся. Именно поэтому мы не видем финсации Конверсии по данной Цели. Оставляйте поле «Ценность» пустой. Она вам не нужна.

Настройка цели на форму через Google Tag Manager

Пишите мне!
Пишите мне!

Site Footer