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

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

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

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

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

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

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

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

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

Данный триггер нам нужен для того, чтоб теги срабатывали только после того, как полное 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>

Скрин тега:

Тег прослушки формы Contact Form 7

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

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

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

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

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

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

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

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

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

Тег для Analytics в GTM

Категория – значение которое мы укажем в настройках цели Analytics
Действие – аналогично
Идентификатор отслеживания – это ваш счетчик Analytics (в данном примере он подставляется через переменную)
Триггер — наше созданное пользовательское событие

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

Добавляем новую цель, выбираем «собственная», она же «специальная цель».
Тип цели – «событие»
В «категорию» и «действие» прописываем то же, что и в тег GTM для Analytics

Цель для Analytics

 

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

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

Тег для Яндекс Метрики

<script>
yaCounterХХХХХХ.reachGoal(‘sent-contact-form’);
</script>

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

ХХХХХХ – это номер вашего счетчика
sent-contact-form – название события (идентификатор)

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

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

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

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

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

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

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

Тег конверсий Google Adowrds в GTM

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

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

Тег конверсии Google Adwords

Значение AW – это идентификатор конверсии
Далее, после знака «/» — это ярлык конверсии

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

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

Если статья вам помогла, делитесь ею с друзьями, подписывайтесь на нашу e-mail рассылку, на страницу в facebook. Периодически мы публикуем интересный и полезный контент, как для разработчиков, специалистов, так и для тех, кто просто хочет быть в курсе основных событий web-рекламы.