Обработка событий 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) со следующей конфигурацией:

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

Тип тега: Custom HTML

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

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

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

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

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

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

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

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

Войдите в GTM и выберите поле «Новый тег». Назовите новый тег, так, как вы хотите.
Заполните следующие поля, как таковые:

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

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

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

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

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

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

На шаге 2 мы добавили идентификатор кода для контактной формы. Когда форма отправляется, идентификаторы форм добавляются в Data Layer, и нам нужно передавать их в события Google Analytics.
Добавьте новую пользовательскую переменную под названием CF7-formID. Задайте следующее имя переменной: CF7formID (с учетом регистра).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Татьяна Бондарь

главный редактор блога Inweb

Подпишитесь и будьте в курсе!

Татьяна пишет о главных новостях интернет-маркетинга
Пользовательского соглашения

Если вы нашли ошибку, выделите участок текста и нажмите Ctrl + Enter или , чтобы сообщить нам.