Обработка событий DataLayer в Contact Form 7 с помощью Google Tag Manager

Вам будет полезна статья по настройке событий, если:

  • вы используете плагин Contact Form 7 на своем сайте WordPress;
  • вы хотите настроить отправку контактных данных в качестве цели в Google Analytics (или как событие);
  • у вас на сайте размещен код отслеживания GA при помощи Google Tag Manager.

Чтобы передать данные с помощью Data Layer, нужно выполнить несколько шагов:

  1. Создайте тег GTM, который передает событие Data Layer при успешной отправке формы (и включает идентификатор формы, если необходимо).
  2. Создайте триггер GTM, который ищет событие уровня данных при отправке формы и запускает второй тег.
  3. Создайте тег GTM, который отправляет события в Google Analytics на основе события Data Layer.
  4. Создайте переменную уровня данных идентификатора формы.
  5. Настройте конверсию целей в Google Analytics на основе события.

Шаг 1. Войдите в Google Tag Manager и создайте тег №1

При нажатии кнопки «Отправить» в форме «Contact Form 7» запускается событие отправки формы. К сожалению, событие срабатывает вне зависимости от того, была форма заполнена правильно или нет. То есть оно сработает, даже если обязательные поля не были заполнены.

К счастью, плагин запускает события DOM для нескольких разных сценариев, а они уже, в свою очередь, различают успешные представления форм и неуспешные. Что это значит? Что нам нужно будет передавать Data Layer только в случае успешной отправки формы на сайте:

  • wpcf7invalid — запускается, когда сообщение формы Ajax успешно завершено, но почта не отправляется, потому что есть поля с недопустимым вводом;
  • wpcf7spam — запускается, когда сообщение формы Ajax успешно завершено, но почта не отправлена, поскольку обнаружена возможная активность спама;
  • wpcf7mailsent — запускается, когда сообщение формы Ajax успешно завершено, и почта отправлена;
  • wpcf7mailfailed — запускается, когда подача формы Ajax завершена успешно, но она не удалась при отправке почты;
  • wpcf7submit — срабатывает, когда подача формы Ajax успешно завершена, независимо от других инцидентов.

Среднее значение ключа: wpcf7mailsent. Как описано, этот триггер срабатывает, когда форма успешно отправлена. Мы собираемся использовать Javascript для создания события уровня данных. Войдите в систему GTM и выберите поле «Новый тег» или перейдите к разделу «Теги» и создайте его. Создайте новый тег GTM (CF7FeedBackSend) со следующей конфигурацией:

Создание тега GTM CF7FeedBackSend
Тип тега: Custom HTML

Триггер: All pages
Что здесь происходит? Прослушивание события wpcf7mailsent DOM и запуск событие в слой данных, называемый «CF7FeedBackSend». Триггер также фиксирует идентификатор формы в коде для Contact Form 7 и помещает его в слой данных (на скриншоте ниже видно, что идентификатор формы — «1717»).

Конфигурация тега

Затем мы создадим триггер, который использует это событие Data Layer для запуска событий Google Analytics, на которых будет основываться конверсия цели.

Шаг 2. Создание триггера в GTM

Здесь нам нужно создать новый триггер в Google Tag Manager, я назвал его CF7 Trigger.
Тип триггера: пользовательское событие.
Условия активации триггера: все пользовательские события.

Создание триггера в GTM

Этот триггер использует пользовательское событие Data Layer, которое мы создали на шаге 1, чтобы вызвать тег события Google Analytics, который мы установим на шаге 3.

Шаг 3. Создание тега №2

Войдите в GTM и выберите поле «Новый тег». Назовите новый тег, так, как вы хотите.

Заполните следующие поля, как таковые:

Тип тега: Universal Analytics
Идентификатор отслеживания: идентификатор отслеживания Google Analytics. У меня это переменная {{GA Tracking Code}}
Тип трека: событие

Затем нужно установить категорию, действие, ярлык и значение для создаваемого события. Если вы не знакомы с этими полями, на странице справки Google Analytics для событий есть дополнительная информация.

Категория: вы можете написать любое название и оно будет отображаться в Google Analytics, когда вы перейдете в отчет о событиях.
Действие: опять же, выбор за вами.
Ярлык: если вы хотите отслеживать разные формы отдельно, вам нужно поместить в поле переменную {{CF7formID}} и внимательно следовать дальнейшим инструкциям.

Значение добавлять не нужно.

Настройка тега в Google Tag Manager

Шаг 4. Создайте переменную уровня данных идентификатора формы

На шаге 2 мы добавили идентификатор кода для контактной формы. Когда форма отправляется, идентификаторы форм добавляются в Data Layer, и нам нужно передавать их в события Google Analytics.

Добавьте новую пользовательскую переменную под названием CF7formID. Задайте следующее имя переменной: CF7formID (с учетом регистра).

 Создание переменной уровня данных идентификатора формы

Шаг 5. Настройка конверсии цели

Перейдите в Google Analytics, откуда в Администратор > Представление > Цели. Нажмите на «Создать цель» и настройте ее как таковую.

Настройка цели: выберите «Собственная»

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

Описание цели
Имя: назовите, как вам нравится.
Тип: выберите событие.

Установка, описание цели

Информация о цели
Категория: contact-form(или как вы назвали ее в GTM)
Действие: successful-form-submit (или как вы назвали в GTM)
Ярлык: выберите идентификатор формы, которую вы хотите отслеживать, например 1717. Если вы не хотите отслеживать разные формы отдельно, вы можете оставить это поле пустым.
Значение: здесь вы можете добавить другую переменную, например URL страницы и т. д.

Настройка конверсии цели, преобразование цели

Сохраняем: преобразование цели и соответствующее отслеживание настроено. Если вы хотите настроить другие цели для разных идентификаторов форм, просто повторите процесс, но измените метку в конверсии целей.

Проверка внедрения Data Layer для Contact Form 7

Для того, чтобы проверить правильность внедрения отправки событий в Google Analytics, необходимо протестировать цель. Отправьте тестовое сообщение с вашего сайта, но не забудьте: цель отображаться не будет, если у вас установлен фильтр для ip-адреса отправленного сообщения.

Перейдите по следующему пути в GA: в режиме реального времени > Конверсия.

Проверка внедрения Data Layer для Contact Form 7, конверсия в режиме реального времени

После отправки тестового сообщения на сайте должна отобразиться отработанная цель Contact Form (или другое заданное название).

Проверка внедрения Data Layer для Contact Form 7, отображение отработанной цели Contact Form.

Данное событие передается с помощью Data Layer только в том случае, если вы используете новую версию плагина Contact Form, и форма отрабатывается за счет технологии (без перезагрузки страницы). Если при отправке формы с сайта страница перезагружается, цель отрабатываться не будет.

Как настроить Data Layer, используя другие плагины контактных форм

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