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 😉
Поделиться ссылкой:
