Как настроить отправку цели Contact Form 7 с помощью Google Tag Manager в Яндекс.Метрика и Google Analytics

Константин Булгаков
Константин Булгаков
01 Апр.2019
Несколько недель назад столкнулся с небольшой сложностью в настройке популярного плагина отправки заявки через контактную форму Contact Form 7 для WordPress. Попробуем в рамках статьи разобраться как работает передача события плагином в системы веб-аналитики сейчас.

Раньше настройка происходила просто — в дополнительные настройки плагина было достаточно добавить строчку кода с идентификаторов отслеживания для Google Analytics и Яндекс.Метрики, а дальше произвести стандартную настройку цели на стороне аналитических систем и на этом все.

Плагин обновился, а вместе с ним произошло обновление процесса передачи событий. Настройка приобрела немного иной вид, и значительно усложнилась. Если попробовать сейчас настроить отправку события таким образом через on_sent_ok и on_submit, то система скажет, что используются устаревшие настройки.

Инструкция

Процесс отправки события немного отличается своей логикой от стандартной передачи данных в Google Tag Manager. Настройка передачи события Contact Form 7 будет состоять из следующих последовательных шагов:

  • Создаем и отправляем DOM событие wpcf7mailsent в dataLayer;
  • При отправке события запускаем триггер, который будет активировать тег, отправляющий успешное событие в Метрику и GA.

Может звучит немного запутано, но не так сложно как кажется на деле.

Для начала давайте создадим новый тег со специальным кодом, который будет отправлять событие в dataLayer после успешной отправки формы.

  1. Войдите в Google Tag Manager и выберите нужный контейнер;
  2. Нажмите в правом меню Теги и создайте новый;
  3. Выберите тип тега Пользовательский HTML и вставьте код из примера ниже.
  4. В блоке Триггеры добавляем стандартный триггер All Pages;
  5. Придумываем понятное название для созданного тега и нажимаем Сохранить.
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "formSubmit",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
}); 
</script>

Здесь wpcf7mailsent — метод обработки формы при успешной отправке данных. Подробнее можно почитать на официальном сайте плагина по ссылке;
formSubmit — событие отправка формы, которое записывается на уровне данных и передается в пользовательский триггер, который мы создадим на следующим шаге.

Итоговая настройка тега будет такой:

Настройка тега CF7

Теперь переходим к следующему этапу.

Создание пользовательского триггера

На этом шаге создадим специальный пользовательский триггер с событием formSubmit, который будут активировать теги отправки цели в системы аналитики Метрика и Google Analytics.

  1. Переходим в раздел триггеры и создаем новый триггер;
  2. Выбираем тип триггера из списка Пользовательское событие;
  3. В поле Имя события добавляем значение formSubmit и Сохраняем.

Настройка будет выглядеть так:

Настройка триггера CF7

Поздравляю! Основные настройки завершены. Теперь останется создать два новых тега и произвести настройки целей на стороне Google Analytics и Яндекс.Метрики.

Настройка цели для Google Analytics

Первый тег мы создадим для Google Analytics.

  1. Переходим вновь в раздел Теги и создаем новый тег;
  2. Тип тега указываем Google Аналитика — Universal Analytics;
  3. В поле Тип отслеживания указываем Событие;
  4. В полях Параметры отслеживания событий указываем следующие значения: Категория — form, Действия — submit. Поля Ярлык и Значения можно не заполнять.
  5. В поле Идентификатор отслеживания указываем ваш код отслеживания UA-XXXXXXXX-X (найти и скопировать его можно на уровне ресурса в Google Analytics в разделе Отслеживание — Код отслеживания);
  6. В блоке Триггеры выбираем ранее созданный триггер с пользовательским событием;
  7. Добавляем понятное название для тега и нажимаем Сохранить;

Теперь переходим в аккаунт Google Analytics и выбираем нужное для работы представление. Рекомендую не использовать стандартное представление по умолчанию, а создать новое рабочее представление для вашего сайта, если вы еще ранее его не создали.

Выбираем пункт Цели в блоке Представление и нажимаем на красную кнопку Кнопка новая цель. Создание цели происходит в несколько несложных шагов. Давайте разберем последовательность более подробно:

  1. На первом шаге создания цели указываем Собственная и нажимаем Далее;
  2. На втором шаге задаем понятное название цели и указываем тип цели Событие и нажимаем Далее;
  3. Третий шаг потребует от нас заполнения полей Категорияform и Действиеsubmit.

На скринкасте описана настройка новой цели:

Создание новой цели в GA

Если все корректно, то можно нажать кнопку Сохранить.

Дополнительных настроек больше не потребуется. Новая цель появится в списке, а данные начнут собираться примерно через 24 часа после создания.

Отчет Обзор по целям

Статистику по всем созданным целям можно посмотреть в стандартном отчете Конверсии -> Цели -> Обзор. Здесь можно будет найти информацию по числу достигнутых целей, коэффициенту конверсии и странице достижения цели. Также доступна Карта целей и Визуализация последовательностей.

Настройка цели для Яндекс.Метрики

Для передачи данных о событиях из Google Tag Manager необходимо создать Пользовательский HTML тег и в текстовом поле вставить следующий javascript-код:

<script>
 yaCounterXXXXXXX.reachGoal('form');
</script>

где: XXXXXXX — номер счетчика Яндекс.Метрики; form — название идентификатора цели. В блоке Триггера указываем ранее созданный триггер с Пользовательским событием. Например, конфигурация тега может иметь такой вид:

Настройка тега для ЯМ

Чтобы событие из GTM успешно передалось в Метрику, нам необходимо создать новую цель в интерфейсе счетчика.

  1. Переходим в Яндекс.Метрику и находим в общем списке нужный счетчик;
    В разделе Настройки открываем вкладку Цели;
  2. Нажимаем на кнопку Добавить цель и указываем тип условия JavaScript-событие;
  3. Указываем на латинице произвольный идентификатор цели;
  4. Жмем на кнопку Добавить цель.

Настройка цели для Метрики

Готово! Цель создана, теперь данные начнут подтягиваться и в Яндекс.Метрику. Информацию по достигнутым целям можно посмотреть в стандартном отчете Конверсии. Здесь можно увидеть динамику достижения целей, а также коэффициент конверсий по каждой.

Отчет по конверсиям в Метрике

Остались вопросы?

Оставляйте ваши вопросы ниже под опубликованным материалом. В свободное время постараюсь ответить на комментарии. Не забывайте подписываться на новые материалы и помогать проекту добрым словом).

Как настроить отправку цели Contact Form 7 с помощью Google Tag Manager в Яндекс.Метрика и Google Analytics: 4 комментария

  1. А если количество форм 4
    Для каждой формы прописаны атрибуты class + id
    А в передаче события через gtm еще нужно передать 4 дополнительных параметра (cid, userid, session id, timestamp)

  2. Благодарю за инструкцию!
    Это единственный мануал, который мне помог и все цели заработали!!! А я уже думал что так и останусь без целей…

  3. А как через GTM сделать теги для отправки с разных форм (с разными id)? В статье в конце описан метод только для отправки со всех полностью форм. А если их на сайте несколько, и нужно отслеживать с разных? Подскажите, пожалуйста, что сделать? Добавление Form ID в триггер как доп. условие не помогает.

Добавить комментарий для Вадим Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *