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

Константин Булгаков Подружиться

01 Апр.2019

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

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

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

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

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

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

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

Поздравляю! Основные настройки завершены. Теперь останется создать два новых тега и произвести настройки целей на стороне 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.

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

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

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

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

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

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

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

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

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

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

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

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

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