Contact Form 7 — настраиваем цели для Яндекс Метрики и Google Analytics с Google Tag Manager

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

Почему такой способ?

Сразу отвечу, почему использую именно такой способ, через Google Tag Manager в связке с JS DOM событиями — потому что это надежный и рабочий вариант. Некоторые пытаются установить отслеживание кликом по кнопке отправки, что неправильно, так как форма может быть не заполнена, не пройти валидацию и так далее; способ с тригером отправки форм тоже не сработает; отслеживание по странице спасибо недостаточно точное, а иногда этой страницы вовсе нет. Поэтому мы будем использовать DOM события из справки плагина, которые успешно работают.

Как не работает: раньше были хуки: on_sent_ok и on_submit — теперь они не работают. Их писали в дополнительные настройки, так что если вы все еще пытаетесь получить результат таким образом — остановитесь, и читайте гайд дальше.

Теперь плагин сам говорит, что используются устаревшие настройки.

DOM Events — JS события

WPCF7 поддерживает DOM события — это специальные уведомления в JavaScript, которые сообщают о том, что произошло, успешная отправка, ошибка, и так далее. Список событий ниже:

wpcf7invalid — срабатывает, когда Ajax форма отправлена, но письмо на почту не отправлено, потому что поля неправильно заполены.
wpcf7spam — срабатывает, когда Ajax форма отправлена, но письмо на почту не отправлено, потому что отправка расценена как СПАМ.
wpcf7mailsent — срабатывает, когда Ajax форма и письмо на почту отправлены.
wpcf7mailfailed — срабатывает, когда Ajax форма отправлена, но отправить письмо на почту не удалось.
wpcf7submit — срабатывает, когда Ajax форма отправлена, независимо от событий дальше.

Вы можете использовать wpcf7mailsent или wpcf7submit, но лучше быть уверенным, что письмо было успешно отправлено на почту, и цель успешно выполнена — то есть событие wpcf7mailsent.

Отслеживаем отправку форм

С событиями разобрались, теперь построим логику таким образом:
— отправляем одно событие в dataLayer
— запускаем триггер, по которому запустим два тега — цель Яндекс Метрики и тег события Google Analytics.

В Google Tag Manager создаем HTML тег:

Данный код отправит событие в dataLayer после успешной отправки формы. Триггер устанавливаем All Pages.

Можете включить дебаг режим, отправить форму, и вы увидите результат в dataLayer.

Создаем триггер — Custom Event: имя события formSubmit

Событие-триггер после успешной отправки формы

Теперь этот триггер мы можем использовать для запуска кодов целей.

Цель для Яндекс Метрики

Идем в Метрику — Настройки — Добавить цель — JavaScript событие — пишем название, в данном случае form.

Теперь мы можем отправить выполнение цели с помощью следующего кода, в котором 123456 — номер вашего счетчика:

Создаем HTML тег с таким кодом, и триггером, который мы сделали выше:

Тег отправки цели Яндекс Метрики

Цель Google Analytics

Создаем цель в Google Analytics, с событием form — submit:

И создаем тег, который отправит это событие в аналитикс, с тем же триггером:

Тег отправки события в аналитикс

На этом все, события настроены, цели созданы 🙂
Если что-то не получается — пишите, обращайтесь за консультациями, и удачи вам в настройке!

4 комментария к “Contact Form 7 — настраиваем цели для Яндекс Метрики и Google Analytics с Google Tag Manager”

  1. Алексей - 2018-09-03 Ответить

    Здравствуйте. Спасибо большое за статью. А Вы случайно не в курсе, как можно передать в аналитику formId, который мы получаем тегом WPCF7 Track?

    • Ruslan - 2018-09-03 Ответить

      ID уже передается в dataLayer (в примере выше), достаточно создать переменную, и можно отправлять в аналитику

  2. Анастасия - 2018-09-12 Ответить

    Добрый день! Возникла такая ситуация — по данной схеме поставила цели на две формы WPCF7. Все работает, но почти) Когда происходит отправка первой формы — все отлично, тэги формы 1 активируются. Но когда мы отправляем вторую, то запускаются теги и формы 1, и формы 2. В чем может быть причина? Почему тогда при отправке первой формы не запускается тэг формы 2? Форма 1 — несколько параметров, форма 2 — одно поле ввода.
    Заранее спасибо за ответ.

    • Ruslan - 2018-09-14 Ответить

      Добрый день, вы неправильно настроили триггеры для второй формы, вам нужно исключить условием id (или любым другим) первую форму

Оставить отклик

Ваш адрес эл.почты не будет опубликован.