Источник материала agvento.com
Как добавить цели Яндекс Метрики для Contact Form 7
Как настроить цели в интерфейсе Метрики:
Переходим в Яндекс.Метрику, выбираем нужный сайт, раздел Настройки – Цели – кнопка Добавить цель. В открывшемся окне выбираем JavaScript событие и пишем названием цели и идентификатор на латинице, как показано на скриншоте ниже. В моем случае я сделаю цель для всплывающего окна с формой «Перезвонить вам?», идентификатор цели будет: «formapopup».
Цель создана, пора повесить цель на форму плагина Contact Form 7.
Настройка отслеживания цели на сайте WordPress:
Теперь нам нужен такой код:
<script type="text/javascript">
document.addEventListener(
'wpcf7mailsent',
function(event) {
yaCounterXXXXXXXX.reachGoal('formapopup');
},
false);
</script>Этот код необходимо разместить в Footer или Header вашего сайта, можно рядом с кодом подключения метрики или аналитики. Вместо “XXXXXXXX” нужно написать номер счетчика метрики вместо “formapopup” ваш идентификатор цели.
Как добавить цели Google Analytics для Contact Form 7
С гугл аналитикой все немного сложнее, в первую очередь из-за путаницы с новым и старым кодом отслеживания.
Старый код отслеживания GA – anlytics.js (до 2018)
<!-- Google Analytics -->
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;
i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
a=s.createElement(o),m=s.getElementsByTagName(o)[0];
a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->Новый код отслеживания GA – gtag.js (с 2018)
<!-- 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>Стоит отметить, что и новый и старый код прекрасно работают и передают все данные в Аналитику. Так что если у вас на сайте установлен старый код счетчика не спешите паниковать.
Как настроить цели в интерфейсе Google Analytics
Выбираем сайт, далее Администратор, в третьей колонке “Представление” находим “Цели” и переходим в раздел.
Далее жмем красную кнопку “+ЦЕЛЬ”. В настройках цели на первом шаге “Установка цели” выбираем “Собственная”.
В “Описание цели” пишем название цели и выбираем тип “Событие”.
На последнем третьем шаге “Подробные сведения о цели” в поле “Категория” пишем уникальный идентификатор.
В поле “Действие” прописываем “Submit”.
Ползунок под “Использовать ценность события в качестве ценности цели конверсии” выставляем в положение “Да».
Настройка отслеживания цели GA на сайте WordPress.
Перед тем как настроить цели на сайте нужно понять какой код отслеживания у вас установлен. Самый быстрый способ – это на любой странице сайта нажать “Ctrl+U” и, путем поиска на странице, найти код счетчика.
Если установлен “Старый” тип счетчика, код отслеживания цели будет такой:
<script type="text/javascript">
document.addEventListener('wpcf7mailsent', function(event) {
ga('send', 'event', 'formapopup', 'Submit');
}, false);
</script>Если установлен “Новый” тип счетчика, код отслеживания цели будет такой:
<script type="text/javascript">
document.addEventListener('wpcf7mailsent', function(event) {
gtag('event', 'send', {
'event_category': 'formapopup',
'event_action': 'Submit'
});
}, false);
</script>Вместо “formapopup” пишем свой идентификатор, который вы указали в поле “Категория”. “Submit” – это то,что вы указали в поле “Действие”.
Как добавить цели к конкретной или нескольким формам Contact Form 7
Выше мы рассмотрели способ отслеживания, который будет срабатывать на все отправки любых форм CF7 на сайте. Пора узнать, как настроить отслеживание отправки конкретной формы.
Разработчики плагина предлагают использовать свойство event.detail.contactFormId. Есть и другие способы, но этот самый простой.
Чтобы отследить форму таким образом нужно узнать ее ID. Переходим в Контакт форм 7 и в графе шорткоды находим id.
У нас есть id нужной нам формы, подставляем свой id вместо моего (28269) в это код:
<script type="text/javascript">
document.addEventListener('wpcf7mailsent', function sendMail(event) {
if ('28269' == event.detail.contactFormId) {
gtag('event', 'send', {
'event_category': 'formapopup',
'event_action': 'Submit'
});
yaCounterXXXXXXXX.reachGoal('formapopup');
}
}, false);
</script>В данном случае отправка формы передается сразу в Метрику и Аналитику.
Как вы уже догадались этот код необходимо разместить в Footer или Header вашего сайта. Вместо «XXXXXXXX» нужно написать номер счетчика метрики вместо «formapopup» ваш идентификатор цели.
Пример кода для отслеживания целей из нескольких форм:
<script type="text/javascript">
document.addEventListener('wpcf7mailsent', function sendMail(event) {
if ('28269' == event.detail.contactFormId) {
gtag('event', 'send', {
'event_category': 'formapopup',
'event_action': 'Submit'
});
yaCounterXXXXXXXX.reachGoal('formapopup');
}
if ('28270' == event.detail.contactFormId) {
gtag('event', 'send', {
'event_category': 'zakaz',
'event_action': 'Submit'
});
yaCounterXXXXXXXX.reachGoal('zakaz');
}
if ('28271' == event.detail.contactFormId) {
gtag('event', 'send', {
'event_category': 'zayva',
'event_action': 'Submit'
});
yaCounterXXXXXXXX.reachGoal('zayva');
}
}, false);
</script>Как проверить срабатывают ли цели в Метрике и Аналитике
Есть несколько способов, давайте их рассмотрим.
1. Универсальный способ
Добавим к коду цели следующую строчку:
console.log('работает');
Вместо “работает” можем написать всё что угодно.
В итоге должно выглядеть так:
<script type="text/javascript">
document.addEventListener('wpcf7mailsent', function sendMail(event) {
if ('28269' == event.detail.contactFormId) {
gtag('event', 'send', {
'event_category': 'formapopup',
'event_action': 'Submit'
});
yaCounterXXXXXXXX.reachGoal('formapopup');
console.log('работает');
}
}, false);
</script>Переходим на сайт и оправляем форму. Вызываем консоль разработчика сочетанием клавиш “Ctrl+Shift+I” (для Chrome, Opera, Яндекс). И во вкладке “Console” проверяем сработало ли наше событие.
Быстрая проверка цели в Яндекс.Метрике
Быстрее всего цель в Метрике можно отследить в Вебвизоре. Как правило достигнутая цель появляется уже через 5-10 минут после отправки формы.
Быстрая проверка цели в Google Analytics
Для моментальной проверки цели в Аналитике перейдите на вкладку “В режиме реального времени”, раздел “События”. Здесь мы можем увидеть какие события были достигнуты за последние 30 минут.
В разделе “Конверсии” можно увидеть какие цели были достигнуты за последние 30 минут.
Другие материалы по теме
