Часто возникает необходимость в отслеживании отправки данных через форму. Это могут быть формы обратной связи, подписки на рассылки, обратный звонок (callback), анкеты посетителей и т.д. В данной статье рассмотрим пример отслеживания отправки сообщений с сайта через форму обратной связи с помощью Google Tag Manager, Google Аналитики и Яндекс Метрики. В качестве формы обратной связи используются 3 плагина WordPress в связке Contact Form + Contact Form to DB (чтобы читать письма прямо из личного кабинета) + Google Captcha компании-разработчика BestWebSoft.
Процесс установки и настройки плагинов нет необходимости описывать. Стоит только учесть пару важных деталей.
1.Contact Form:
- Во вкладке Дополнительные настройки необходимо поставить галочки в таблице (конструкторе) формы, какие необходимо использовать поля и какие из них – обязательные для заполнения
- Добавить в форму Google Captcha (reCAPTCHA by BestWebSoft)
2. Google Captcha, вкладка Настройки:
- В пункте Идентификация ввести Ключ сайта и Секретный ключ
- В пункте Общее поставить галочку Включить reCAPTCHA для – Внешние плагины – Contact Form
Всё остальное там и так понятно.
Если GTM ещё не подключён, это надо сделать обязательно. После подключения приступаем к настройке.
В Диспетчере тегов заходим в Переменные, в блоке Встроенные переменные нажимаем Настроить
Находим разделы Клики и Формы и в них выделяем все пункты
и в списке переменных должна получиться вот такая картина:
На сайте переходим на страницу с формой, жмём на ней правой кнопкой, выпадет контекстное меню
Если работа в Гугл Хроме, выбираем пункт Просмотреть код, если в Яндекс Браузере – Исследовать элемент
Появится окошко с выделенным элементом и там мы увидим идентификатор в теге form – cntctfrm_contact_form
Это то, что нужно!
Теперь переходим в Яндекс Метрику. Добавляем цель типа JavaScript-событие с идентификатором feedback-form-message
и цель появляется в списке
Переходим в ГТМ в Триггеры, создаём триггер типа Отправка формы из категории Взаимодействие пользователей
- называем его Feedback Form
- ставим галочку в пункте Проверка ошибок
- Включить триггер при выполнении условий
| Page Path | содержит | contacts |
contacts – страница, на которой размещена форма
- Условия активации триггера – Некоторые формы
- Активировать триггер при наступлении события и выполнении всех этих условий
| Form ID | равно | cntctfrm_contact_form |
Сохраняем.
Далее создадим тег для Яндекс Метрики.
Переходим в Теги, создаём с типом Пользовательский HTML, назовём его Feedback Form – YM, и добавляем в него код:
<script>
yaCounterXXXXXXXX.reachGoal('feedback-form-message');
</script>где XXXXXXXX – это ID счётчика Яндекс Метрики
Выбираем для него триггер активации Feedback Form
Теперь создадим тег для Google Analytics. Переходим в Теги, и создаём тег с типом Google Аналитика – Universal Analytics.
Назовём его Feedback Form – GA, тип тега – Google Аналитика, тип отслеживания – Событие, категория – Feedback Form, действие – Send, ярлык – Sent, настройки Google Analytics — {{Google Analytics}}, ставим галочку Включить переопределение настроек в этом теге, и идентификатор отслеживания — UA-XXXXXXXXX-1
UA-XXXXXXXXX-1 — это идентификатор счётчика Google Аналитики
Выбираем для него триггер активации Feedback Form
Созданные теги появятся в списке
Сохраняем и опубликовываем
Настройка завершена.
Проверяем
жмём кнопку Отправить
Спустя немного времени после отправки сообщения появятся результаты.
В Яндекс Метрике надо зайти в Отчёты – Стандартные отчёты – Конверсии
В Google Аналитике – Поведение – События – Обзор или Поведение – События – Лучшие события
Также в Google Analytics можно добавить цель. Для этого необходимо:
- Установка цели — указать Собственная
- Описание цели — обозвать её как-нибудь, например Отправили сообщение через ФОС и выбрать тип Событие
- Подробные сведения о цели — указать категорию Feedback Form, действие Send и ярлык Sent
и сохранить
Поделиться ссылкой: