Как настроить цели Яндекс Метрики и Google Analytics для Contact Form 7

В статье рассмотрим как настроить отслеживание целей в Яндекс Метрике и Google Analytics отправки контактных форм плагина Contact form 7.

DOM-события Contact Form 7

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

Рассмотрим события, которые актуальны при настройке целей в аналитике.

wpcf7mailsent — срабатывает, когда форма успешно заполнена и письмо отправлено на почту.

wpcf7submit — срабатывает, сработает в любом случаи когда нажали на кнопку отправить форму (успешно или не успешно).

Я буду использовать только событие wpcf7mailsent, которое срабатывает после успешной отправки формы.

Переходим в Яндекс.Метрику, выбираем нужный сайт, раздел Настройки –> Цели –> кнопка Добавить цель. В открывшемся окне выбираем JavaScript событие. Пишем название цели, так чтобы в дальнейшем было удобно ориентироваться.  Идентификатор заполняем на латинице, как показано на скриншоте ниже.

Добавляем цель в Яндекс Метрика

Мне нужно настроить две цели. Первая цель для отслеживания заполнения основной формы на сайте «Форма Оценка авто» с идентификатором цели «ocenkaonline». Вторая цель для отслеживания формы – заказа обратного звонка «Заказать звонок» с идентификатором «zvonok».

Цели в Яндекс Метрика добавлены, теперь настроим эти цели для Contact Form 7.

На сайт в раздел header или footer нужно разместить следующий код.

document.addEventListener( 'wpcf7submit', function( event ) {
 if(event.detail.contactFormId=="661"){ // 661 это id формы для отслеживания
 yaCounter XXXXXXXX.reachGoal('ocenkaonline');
 }

if(event.detail.contactFormId=="708"){ // 708 это id формы для отслеживания
 yaCounter XXXXXXXX.reachGoal('zvonok');
 }

}, false );


Где «XXXXXXXX»  номер счетчика метрики , а  «ocenkaonline» и «zvonok»  ваш идентификатор цели.

661 и  708 это идентификаторы отслеживаемых форм.

Номера можно узнать в панели управления сайтом -> Contact Form 7 -> Контактные формы. Смотрите скриншот ниже.

Идентификаторы контактных форм

Как настроить цели в интерфейсе Google Analytics

Заходим в Google Analytics.

Выбираем сайт и переходим в раздел Администратор. В третьей колонке находим «Цели» и переходим на страницу.

Добавляем цель (Красная кнопка «+ЦЕЛЬ»).

Настраиваем:

  1. В разделе «Установка цели» выбираем «Собственная» цель.
  2. В «Описание цели» пишем название цели. В моем случае это «Заказать звонок»  и выбираем тип «Событие». Жмем «Далее».
  3.  В «Подробные сведения о цели» в поле «Категория» пишем уникальный идентификатор.В моем случае это «zvonok». В поле «Действие» пишем «Submit».

Настраиваем цели для Google Analytics для Contact Form 7

У меня на сайте установлен Global site tag, вида:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-Y"></script>
<script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}gtag('js', new Date());
gtag('config', 'UA-XXXXXXXX-Y');
</script>

В этом случае, код отслеживания должен выглядеть так:

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
gtag('event', 'send', {'event_category': 'zvonok', 'event_action': 'Submit'});
}, false );
</script>

Если нужно отслеживать несколько целей используйте следующий код

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function sendMail( event ) {
  if ( '661' == event.detail.contactFormId ){
   gtag('event', 'send', {'event_category': ' ocenkaonline ', 'event_action': 'Submit'});
  }
  if ( '708' == event.detail.contactFormId ){
   gtag('event', 'send', {'event_category': 'zvonok', 'event_action': 'Submit'});
   }, false );
</script>

В моем случае, я хочу отслеживать цели одновременно и в Яндекс Метрика и Google Analytics.

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function sendMail( event ) {
  if ( '661' == event.detail.contactFormId ){
   gtag('event', 'send', {'event_category': 'ocenkaonline', 'event_action': 'Submit'});
   yaCounterXXXXXXXX.reachGoal('ocenkaonline');}

  if ( '708' == event.detail.contactFormId ){
  gtag('event', 'send', {'event_category': 'zvonok', 'event_action': 'Submit'});
  yaCounterXXXXXXXX.reachGoal('zvonok');}}, false );
</script>


Где 661 и 708 – это идентификаторы контактных форм,

XXXXXXXX – это номер счетчика Яндекс Метрика,

Ocenkaonline, zvonok – это идентификаторы целей.

Добавить комментарий

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