Настройка отслеживания форм Contact Form 7 для WordPress в GA с помощью GTM. Пошаговая инструкция

 

Contact Form 7 – один из самых популярных плагинов для WordPress для организации форм обратной связи на сайте. Также он имеет множество различных настроек содержимого этих форм, добавлять выпадающее меню, чекбоксы, радиокнопки и пр. и позволяет разместить их в любом месте сайта с помощью шорт-кодов (для каждой формы – свой шорт-код).

В этой статье речь пойдёт об отслеживании успешной отправки формы с помощью Google Tag Manager и отправки события об отправке в Google Аналитику.

В первую очередь необходимо убедиться, что код ГТМ присутствует в исходном коде сайта. Если ещё нет – необходимо подключить его вручную, либо с помощью плагина Site Kit by Google.

Шаг 1. Установка скрипта прослушивания отправки формы

Данный скрипт позволяет отследить отправку формы, и в случае успешной отправки запускает событие email-sent.

Для установки этого скрипта переходим в ГТМ в Теги, создадим тег с названием CF7 – Event Listener, выбираем тип Пользовательский HTML

и пропишем следующий код:

<script>
	document.addEventListener( 'wpcf7mailsent', function( event ) {
		window.dataLayer.push({
			"event" : "email-sent",
			"formID" : event.detail.contactFormId,
			"fields" : event.detail.inputs
		})
	});
</script>

Выберем триггер активации для нашего тега All Pages

  • event – это имя события, которое должно выполняться
  • formID – id формы, которая будет прослушиваться (может быть и несколько форм)
  • fields – поля (объекты), в которые должны вводиться данные

После этого включаем режим предварительного просмотра в GTM и пробуем отправить тестовое сообщение. В отладчике GTM увидим событие, которое появилось после отправки сообщения. Переходим во вкладку Data Layer и видим необходимые нам данные по этому событию.

Например, воспользуемся следующими данными для дальнейшей настройки:

  • formID: ‘5’ – это ID нашей формы, пригодится, если на сайте мы отслеживаем несколько форм
  • fields [{name: ‘menu-412’, value: “Продукция”}] – это выпадающее меню, которое характеризует обращение пользователя и имеет следующие пункты: Продукция, Услуги и Поддержка

Затем откроем консоль разработчика и введём команду dataLayer, чтобы получить данные о событии.

Здесь мы также увидим номера нужных нам полей. Они помогут прописать нам переменную Data Layer. В нашем случае – номер объекта, который мы будем прослушивать – 4. Его необходимо запомнить.

Шаг 2. Создание триггера для отправки события email-sent в GTM

Для создания триггера в ГТМ переходим в Триггеры. Создадим триггер с названием email-sent и выберем тип Пользовательское событие

В поле Имя события введём email-sent

 

Шаг 3. Создание переменных Data Layer

В GTM переходим в Переменные, спускаемся к Пользовательским переменным. Создадим переменную с именем dlv – formID и выберем тип Переменная уровня данных.

В поле Имя переменной уровня данных введём formID

Аналогичным образом создадим переменную с именем dlv – selected item типа Переменная уровня данных и в поле Имя переменной уровня данных введём fields.4.value

4 – это номер объекта нашей формы (выпадающее меню), которое мы собираемся отправлять в события (как это упоминалось в Шаге 1).

Шаг 4. Проверка корректности настроек переменных и триггера

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

В консоли отладчика GTM переходим во вкладку Variables и проверяем созданные нами переменные dlv – formID и dlv – selected item. Если в них значения отображаются корректно (как на скриншоте ниже), значит настройка выполнена правильно.

Шаг 5. Создание тега для отправки события с данными в Google Аналитику

Для этого переходим в GTM в Теги, создадим там тег с именем GA – CF7 – Form Submit и выберем тип Google Аналитика – Universal Analytics

В Конфигурации тега зададим следующие параметры:

  • Тип отслеживания: Событие
  • Категория: Отправка формы
  • Действие: ID формы – {{dlv – formID}}
  • Ярлык: Выбранный пункт: {{dlv – selected item}}
  • Настройки Google Analytics: {{Google Analytics}}

и привяжем к нему триггер email-sent

Сохраняем и публикуем контейнер

Проверка

Теперь тег передаёт событие в Google Analytics со всеми необходимыми нам данными. Это можно посмотреть в отладчике GTM:

Для просмотра отчёта в Google Аналитике переходим в Отчёты – Отчёт в реальном времени – События

P.S.: при создании статьи был использован видеоурок Джулиена Джунеманна из MeasureSchool.com на YouTube

Поделиться ссылкой:

 

Читайте также