Часто возникает необходимость в отслеживании отправки данных через форму. Это могут быть формы обратной связи, подписки на рассылки, обратный звонок (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
и сохранить
Поделиться ссылкой:
