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

Июнь 17, 2020

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

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

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

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

Плагин Contact Form 7

Я опускаю процесс установки и настройки данного плагина в 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. Например, вот так выглядят идентификаторы моих форм:

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

Идентификаторы контактных форм

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

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

Тег с обработчиком

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

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

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

Пользовательское событие

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

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

Переменная уровня данных

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

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

Тег Google Аналитика - Universal Analytics

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

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

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

Событие formComplete

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

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

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

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

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

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

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

ID форм заменены на названия с помощью таблицы поиска в GTM

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике