Настройка отслеживания форм Ninja Forms для WordPress в GA с помощью GTM

 

Ninja Forms — один из самых удобных конструкторов форм для WordPress, который позволяет собрать формы обратной связи на сайте с богатым набором функций и настроек (выпадающее меню, чекбоксы, загрузка файлов, радиокнопки и пр.). Разместить Ninja Forms на страницах сайта можно с помощью шорт-кодов.

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

Для начала необходимо убедиться, что код Google Tag Manager присутствует на сайте. Если его ещё нет — подключаем вручную или с помощью плагина Site Kit by Google.

В первую очередь создаём форму, вставляем её в нужную страницу с помощью шорт-кода и заполняем какими-нибудь данными

Далее необходимо исследовать код каждого поля, а именно — узнать идентификаторы элементов, которые необходимо будет отслеживать

Как видно из скриншотов выше, один из идентификаторов поля Name — nf-field-1, а поле Email — nf-field-2.

Теперь попробуем добраться до значений каждого из этих полей в Google Chrome с помощью консоли

Если значения совпадают с заполненными данными, переходим в GTM в Переменные и создадим переменную Ninja Form — Name с типом Собственный код JavaScript

Пропишем в нём код для извлечения значения поля Name

function() {
	return document.querySelector('#nf-field-1').value
}

Такие же действия проделаем и для остальных полей формы — Email, Тема сообщения и Message

 

Затем переходим в Триггеры и создадим триггер Form Send — Ninja Form с типом Клик — Все элементы

В условиях активации выбираем Некоторые клики, и для активации зададим следующие условия:

Ninja Form — Nameне соответствует регулярному выражению^$
Ninja Form — Emailне соответствует регулярному выражению^$
Ninja Form — Topicне соответствует регулярному выражению^$
Ninja Form — Messageне соответствует регулярному выражению^$
Click IDравноnf-field-4

Click ID — это событие, при котором происходит отправка формы, а nf-field-4 — это идентификатор этой кнопки. На разных сайтах он может не совпадать. Остальные условия выше указывают на то, что значения полей не могут быть пустыми.

Теперь переходим в Теги и создадим там тег GA — Ninja Form с типом Google Аналитика — Universal Analytics

Выбираем: тип отслеживания — Событие, категория — Ninja Form, действие — SendOK и ярлык — {{Ninja Form — Topic}} (например, Тема сообщения). Также укажем настройки Google Analytics — {{Google Analytics}} и привяжем к нему триггер Form Send — Ninja Form

Теперь переходим в режим предварительного просмотра, заполняем форму и отправляем её.

Тег GA — Ninja Form должен отражаться в секции Tags Fired (как на скриншоте выше). Если всё так и есть, значит форма отслеживается.

Нажав на тег можно увидеть детали отправки события:

В интерфейсе Google Аналитики переходим в Отчёты — Отчёт в реальном времени — События, здесь будут отображаться детали отправленной формы

Всё готово! Не забываем опубликовать контейнер в GTM 😉

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

 

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