В статье рассмотрим как настроить отслеживание целей в Яндекс Метрике и 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.
Выбираем сайт и переходим в раздел Администратор. В третьей колонке находим «Цели» и переходим на страницу.
Добавляем цель (Красная кнопка «+ЦЕЛЬ»).
Настраиваем:
- В разделе «Установка цели» выбираем «Собственная» цель.
- В «Описание цели» пишем название цели. В моем случае это «Заказать звонок» и выбираем тип «Событие». Жмем «Далее».
- В «Подробные сведения о цели» в поле «Категория» пишем уникальный идентификатор.В моем случае это «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 – это идентификаторы целей.