Настройка отслеживания Contact Form 7 через Google Tags Manager (GTM)

Относительно недавно, популярный модуль «Contact Form 7» для сайтов на WordPress изменил свои алгоритмы отслеживания событий отправки форм. Раньше это можно было сделать одной строчкой в настройках форм в админке сайта. Теперь же этот метод не работает. Разработчики плагина предлагают настраивать отслеживание через внешние изменения в коде сайта.

В данной статье мы рассмотрим вариант отслеживания Contact Form 7 через пользовательские события. Почему именно этот метод? — потому что он уникальный. Если получится создать передачу пользовательского события используя DOM events, то на основании него можно настроить любой тег, будь то цель Analytics, Метрики или конверсия Google Ads.

План действий отслеживания Contact Form 7. Что необходимо создать в GTM

  1. Переменная уровня данных
  2. Триггер с типом «модель DOM Готова»
  3. Тег для прослушки фактической отправки формы
  4. Триггер с типом «пользовательское событие»
  5. Примеры тегов отслеживания для Analytics, Метрики и Google Ads

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

Тут все просто. Создаем новую переменную, присваиваем ей соответствующий тип и имя:

Триггер с типом «модель DOM готова»

Данный триггер нам нужен для того, чтоб теги срабатывали только после того, как полное DOM дерево сайта прогрузилось и переменная уровня данных успела получить нужное значение.

Тег для прослушки фактической отправки формы

Создаем тег с типом «Пользовательский HTML», триггером для которого будет «модель DOM готова». Вставляем следующий код:

 

<script>

document.addEventListener( 'wpcf7mailsent', function( event ) {

  if ( '45' == event.detail.contactFormId ) {

   dataLayer.push({'wpcf7FormID' :  event.detail.contactFormId , 'event': 'sent-contact-form'});

   }

}, false );

</script>

 

Скрин тега:

Подробнее о теге:

  • wpcf7mailsent – это метод обработки формы при успешной отправке данных. Подробнее для разработчиков на сайте Contact Form 7.
  • 45 – это номер формы, который вы можете увидеть в админке сайта. Происходит условие: если номер формы = «45» и она заполнена, то отправить событие «sent-contact-form». Если форма имеет другой номер, то событие не сработает. Если у вас несколько форм, то для каждой нужно создавать отдельный тег со своим номером и названием события. Иначе все формы будут генерировать одно и то же событие.
  • wpcf7FormID – название нашей ранее созданной переменной уровня данных.
  • sent-contact-form – имя, которое мы присваиваем событию (идентификатор события)

Триггер с пользовательским событием

Данный триггер срабатывает в тот момент, когда активируется событие в момент успешной отправки формы. Для этого просто прописываем название нашего события, которое мы указали в теге прослушки:

В принципе, на этом можно было бы статью заканчивать. Самое главное — создан триггер, который срабатывает на факт отправки формы. Активировать этим триггером можно любой тег.

На всякий случай распишу весь процесс до конца для основных тегов.

Для всех этих тегов триггером будет выступать пользовательское событие.

Отслеживание событий Contact Form 7 в Google Analytcis

Создаем тег с типом Universal Analytics:

Категория – значение которое мы укажем в настройках цели Analytics

Действие – аналогично

Идентификатор отслеживания – это ваш счетчик Analytics (в данном примере он подставляется через переменную)

Триггер — наше созданное пользовательское событие

Настройка цели в Analytics

Добавляем новую цель, выбираем «собственная», она же «специальная цель».

Тип цели – «событие»

В «категорию» и «действие» прописываем то же, что и в тег GTM для Analytics

Отслеживание событий Contact Form 7 в Яндекс Метрике

Создаем тег с типом «Пользовательский HTML»:

 

<script>

yaCounterХХХХХХ.reachGoal(‘sent-contact-form’);

</script>

 

Функция, которая передает событие в Метрику, где:

ХХХХХХ – это номер вашего счетчика

sent-contact-form – название события (идентификатор)

Настройка цели в Метрике

В качестве типа условия выбираем «JavaScript-событие». Прописываем идентификатор события, такой же как в теге. Сохраняем.

Отслеживание конверсий Contact Form 7 в Google Ads

Создаем конверсию в Google Ads:

  1. Переходим: «настройки» — «отслеживание» — «конверсии»
  2. Создаем конверсию, даем ей имя и прописываем необходимые параметры учета. Сохраняем.

Создаем тег с типом «Отслеживание конверсий Google Ads»:

Прописываем идентификатор и ярлык конверсии.

Взять их можно из настроек тега конверсии в Google Ads:

Значение AW – это идентификатор конверсии

Далее, после знака «/» — это ярлык конверсии

На этом все. Надеюсь было полезно и информативно. Если остались вопросы, пишите в комментариях.

Так же Вам может понравится статья «Настройка показателя отказов в Analytics через GTM» и «Основные требования к сайту перед запуском рекламы».

Сергей Угнивенко

Возникли вопросы?
Оставте свой телефон или email и наш менеджер с Вами свяжется.