Настройка отслеживания отправки данных через форму в Яндекс Метрике и Google Аналитике с помощью GTM

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

В Диспетчере тегов заходим в Переменные, в блоке Встроенные переменные нажимаем Настроить

Находим разделы Клики и Формы и в них выделяем все пункты

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

На сайте переходим на страницу с формой, жмём на ней правой кнопкой, выпадет контекстное меню

Если работа в Гугл Хроме, выбираем пункт Просмотреть код, если в Яндекс Браузере – Исследовать элемент

Появится окошко с выделенным элементом и там мы увидим идентификатор в теге formcntctfrm_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

и сохранить

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