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

Друзья, несколько недель назад столкнулся с небольшой сложностью в настройке популярного плагина отправки заявки через контактную форму Contact Form 7 для CMS WordPress.

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

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

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

Инструкция

Процесс отправки события немного отличается своей логикой от стандартной передачи данных в 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. Жмем на кнопку Добавить цель.

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

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

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

На этом принципе все! Уверен, что все описано более чем понятно и подробно. Если остались вопросы, то задавайте вопросы в комментариях под этим материалам.

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

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

Сохраните ссылку
Поддержите автора
Бесплатная подписка
Без согласования с автором, копирование материала разрешается, только при наличии ссылки на источник.

Напишите комментарий

avatar
  Подписаться  
Уведомлять о