Отслеживание отправки форм Contact Form 7 (WordPress) с помощью GTM

Руководство по отслеживанию отправки форм Contact Form 7 (плагина для WordPress) с помощью Google Tag Manager.

WordPress - самый популярный CMS-движок в мире. Благодаря тому, что он бесплатный, быстро устанавливается, имеет одно из самых больших сообществ разработчиков, понятную и простую административную панель, постоянно обновляется, для него можно скачать или купить шаблоны на любой вкус и цвет, он является №1 среди всех CMS. Сейчас каждый третий сайт планеты работает на WordPress. К слову, мой сайт osipenkov.ru тоже сделан на WP.

Одной из главных причин почему WordPress так популярен в последние время, является наличие огромного количества плагинов для любых задач. Есть менее известные решения, а есть определенный список плагинов (топ), которые устанавливают практически все владельцы сайтов. Среди них бесплатный плагин создания контактных форм Contact Form 7 (более 5 миллионов установок).

Я опускаю процесс установки и настройки данного плагина в WordPress по понятным причинам. Давайте перейдем к непосредственной настройке отслеживания отправки форм с помощью GTM.

В официальной документации плагина есть информация о том, как можно настроить передачу данных в Google Analytics. Но как это сделать с помощью диспетчера тегов Google? Ответа там нет. Для того, чтобы настроить отслеживание с помощью Google Tag Manager, необходимо:

• создать 2 тега;
• создать 1 триггер;
• создать несколько переменных.

Давайте разберемся подробнее.

Последовательность действий

Для начала создадим тег типа Пользовательский HTML тег со следующим кодом:

Мы хотим отслеживать событие отправки формы в том случае, когда форма была успешно отправлена. Contact Form 7 запускает пользовательское событие wpcf7mailsent, когда успешно отправляет форму и почту адресату, поэтому создается обработчик с функций, внутри которой с помощью уровня данных (dataLayer) методом .push () отправляется нужное нам событие (formComplete) с переменной formId, в которой передается идентификатор контактной формы.

Список пользовательских событий, которые предопределены (заложены) в плагин Contact Form 7:

• wpcf7invalid - срабатывает, когда форма успешно была отправлена на сервер, но почта не была отправлена, потому что были поля с недопустимым вводом;
• wpcf7spam - срабатывает, когда форма успешно была отправлена на сервер, но почта не была отправлена, поскольку обнаружена возможная активность спама;
• wpcf7mailsent - срабатывает, когда форма успешно была отправлена на сервер и почта отправлена адресату;
• wpcf7mailfailed - срабатывает, когда форма успешно была отправлена на сервер, но отправить почту не удалось. Это может быть вследствии того, что на хостинге не работает почтовый сервер;
• wpcf7submit - срабатывает, когда форма успешно была отправлена на сервер, независимо от других результатов. Нажали кнопку "Отправить" - сработало это действие.

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

Свойства объекта события (event), которые вы можете использовать в своем обработчике:

• detail.contactFormId - идентификатор контактной формы;
• detail.pluginVersion - версия плагина Contact Form 7;
• detail.contactFormLocale - код локали контактной формы;
• detail.unitTag - блок-тег контактной формы;
• detail.containerPostId - идентификатор поста, в котором находится контактная форма.

Нам достаточно переменной detail.contactFormId. Например, вот так выглядят идентификаторы моих форм:

В GTM это будет выглядеть так:

Триггер активации - All Pages (Все страницы). Сохраняем изменения.

На следующем этапе нам необходимо создать триггер типа Пользовательское событие с именем formComplete:

Теперь создадим пользовательскую переменную типа Переменная уровня данных с именем formId, чтобы получить значение идентификатора отправленной формы:

Все, что осталось сделать - это создать тег Google Аналитика - Universal Analytics с типом Событие, в котором мы зададим Категорию, Действие и Ярлык (по желанию) события:

Триггер активации - наше пользовательское событие formComplete. Я в примере передаю значение идентификатора формы (formId) в Категории события, используя конструкцию Форма - {{formId}}. Вы можете передать как-то иначе.

Сохраняем изменения. В режиме отладки GTM можно проверить корректность настройки отслеживания отправки формы Contact Form 7. После отправки формы сработает наше событие formComplete:

Открыв вкладку Data Layer, увидим, как передалось событие, а вместе с ним и значение идентификатора формы (6241) в переменной formId.

В режиме реального времени Google Analytics:

Поскольку мы настроили отслеживание отправки форм как событие, то через некоторое время все данные по событиям появятся в отчете Поведение — События — Лучшие события.

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