Как отслеживать отправку форм в Google Tag Manager, если у вас Contact Form 7

Ваш сайт сделан на Wordpress и вы используете плагин Contact Form 7?

В этой статье вы узнаете, как настроить отслеживание отправки форм через GTM.
Все происходит за четыре простых шага:

Добавление тега
Настройка триггера и переменных
Тег Google Universal Analytics
Настройка целей в Google Analytics

О чем стоит помнить при отслеживании отправки форм Contact Form 7

Плагин Contact Form 7 работает на AJAX, т.е. сама страница, на которой находится эта форма, при ее заполнении и отправке, не перезагружается.
Использовать классический инструмент для отслеживания форм GTM здесь не получится.
Зачастую это касается сайтов одностраничников, но и сайты с большим кол-вом страниц тоже могут иметь такие формы.
Для таких случаев используется отслеживание событий, которые передает сама форма при ее отправлении.

Добавление тега для при отслеживании отправки форм Contact Form 7

Вам нужно добавить тег в GTM: пользовательский HTML.

Добавляем туда вот этот код, он взят с официального сайта Contact Form7:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.dataLayer.push({
"event" : "cf7submission",
"formId" : event.detail.contactFormId,
"response" : event.detail.inputs
})
});
</script>

Смотрим, как все работает. Жмем на «Предварительный просмотр» в правом верхнем углу. Если GTM установлен верно, то вы увидите оранжевую плашку со следующим сообщением

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




Обратите внимание на название события, именно оно нам понадобится для дальнейшей настройки: cf7submission

Настройка триггера и переменных для отслеживания отправки форм Contact Form 7

Нужно создать несколько тригеров
Вам нужно перейти в раздел «Триггеры» в левом меню и нажать «Создать».
Указываем название, по которому вы будите его отличать. Выбираем тип триггера «Пользовательское событие»

Вставляем в имя события "cf7submission"

Пришло время настроить переменные. Давайте внимательнее посмотрим, что именно отдает форма при отправке:

Ответом считается все, что идет после слова «response», а нумерация идет построчно.
Именно в этой форме мне особо интересен email, а вообще у вас может быть другое поле ключевое.
Получилась переменная со значением response.2.value (посчитайте, верно ли я определила строчку)
Идем во вкладку «Переменные» и в разделе «Пользовательские переменные» нажимаем «Создать»

Выбираем «Переменная уровня данных»

В имя вставляем то, что у нас получилось: response.2.value

Если у вас несколько форм на сайте, то я рекомендую добавить переменную formId. Создается таким же образом

Нужно проверить, как все работает. Снова переходим в предварительный просмотр в ГТМ и переходим на страницу нашей формы. Если все настроено корректно, то у вас отобразится корректно, включая formId

Тег Google Universal Analytics для отслеживания отправки форм Contact Form 7

Мы прошли пол пути! Давайте настроим специальный тег Google Universal Analytics.
Идем в Теги и жмем «Создать». Выбираем в конфигурации тега Google Universal Analytics.
Конечно же на этом шаге у вас должен быть установлен Google Analytics.
Если нет, то вот здесь можно узнать как это сделать.

Тип отслеживния: Событие
Категория: Form Submission
Действие наша переменная FormID
Ярлык наша переменная email
Настройки Google Analytics: переменная Google Analytics
Триггер наш тег cf7 submit

Настройка целей в Google Analytics при отслеживании отправки форм Contact Form 7

Идем в Google Analytics.

Заходим в режим Администратора (левый нижний угол экрана), там переходим в раздел «Цели»


Жмем «+Цель». Нам нужна «Собственная»

Даем название цели, к примеру : отправка формы. Тип: событие

Категория: Form Submission
Действие: Form ID: 3807

Поздравляем! Вы настроили отслеживание отправки форм у себя на сайте

Остались вопросы? Напишите мне