Цели Яндекс Метрики для Contact Form 7

Многие владельцы сайтов задаются вопросом, какая форма заказа/обратного звонка/обратной связи и т.д. наиболее эффективна? Через какую форму был заказ? Откуда? В какое время? Где слабые и сильные места у сайта? И прочее, прочее…

Много вопросов сразу отпадает, стоит только под каждую форму настроить цели в Метрике. Цель будет срабатывать при успешной отправке формы. Не просто человек нажал кнопку «Отправить», а заполнил корректно все поля и форма была успешно отправлена.

В данной инструкции будет рассмотрено, как настроить отслеживание отправки конкретной формы. Под каждую конкретную форму создается своя цель в метрике.

Как нам добавить цели Яндекс Метрики для Contact Form 7?

Данный пост состоит из 2 частей:

1. Учимся создавать цели в Яндекс Метрике.
2. Интегрируем эти цели в плагин Contact Form 7 для WordPress.

Как настроить цели в Яндекс Метрике

Переходим в Яндекс Метрику, далее нажимаем на нужный нам счетчик сайта, потом жмем меню «Настройка».

Выбираем пункт Цели — Добавить цель.

В открывшемся окне выбираем JavaScript событие и пишем названием цели (у меня это «Оставить заявку») и идентификатор на латинице (у меня это form1), смотрите на скриншоте ниже (кликабельно).

Все! Цель мы создали, теперь надо нашу цель привязать к форме плагина Contact Form 7.

Настройка отслеживания целей в WordPress

Для интеграции кода в WordPress мы будем использовать плагин Woody snippets. Вы можете использовать как его, так и любой другой аналог.

Если вы не любите ставить много плагинов, можно запилить код в файл шаблона header или footer.php. Также люди вставляют код в functions.php. По хорошему, для подобных вставок надо использовать дочернюю тему Вордпресс, но мало кто это делает. А иначе при обновлении ваши файлы будут перезаписаны, и все настройки слетят. Поэтому плагины типа Woody snippets удобны для большинства пользователей.

В админке Вордпресс идем в Плагины — Добавить новый, и в поиск вбиваем Woody snippets, устанавливаем и активируем его.

Далее нам, прежде чем перейти в настройки Woody snippets, нужно узнать ID нашей формы Contact Form 7. Открываем список наших форм и запоминаем ID, смотрите скриншот ниже (кликабельно).

Далее переходим в плагин Woody snippets, выбираем вверху Добавить — Универсальный сниппет. Вставляем код (пример кода возьмете ниже), заменяем некоторые значения кода на свои (см. ниже подробности замены), указываем «Где выполнять код» — Авто-размещение, «Место добавления» — Footer (если хотите ставьте Header). Смотрим скриншот ниже (кликабельно).

В приведенном примере на скриншоте выше представлен код сразу для 3 целей Метрики.

Копируйте если кому надо код для 3 целей Метрики:

<script type="text/javascript">
document.addEventListener('wpcf7mailsent', function sendMail(event) {
if ('2125' == event.detail.contactFormId) {
yaCounter64949749.reachGoal('form1');
}
if ('2125' == event.detail.contactFormId) {
yaCounter64949749.reachGoal('form2');
}
if ('2125' == event.detail.contactFormId) {
yaCounter64949749.reachGoal('form3');
}
}, false);
</script>

Вот код для 1 цели Метрики:

<script type="text/javascript">
document.addEventListener('wpcf7mailsent', function sendMail(event) {
if ('2125' == event.detail.contactFormId) {
yaCounter64949749.reachGoal('form1');
}
}, false);
</script>

А это код для отправки данных формы сразу в Метрику и Аналитику:

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


В представленных выше примерах вам надо заменить следующие данные на свои:

• подставляем свой ID нужной нам формы вместо моего 2125 в этот код;
• вместо моего счетчика под номером 64949749 указываем свой номер;
• вместо form1 (а также form2 и form3) пишем ваш идентификатор цели.

Сколько хотите выставить целей, столько раз и дублируете внутрянку кода. Ниже я продублировал 3 раза код целей для Метрики и Аналитики вместе.

<script type="text/javascript">
document.addEventListener('wpcf7mailsent', function sendMail(event) {
if ('2125' == event.detail.contactFormId) {
gtag('event', 'send', {
'event_category': 'form1',
'event_action': 'Submit'
});
yaCounter64949749.reachGoal('form1');
}
if ('2125' == event.detail.contactFormId) {
gtag('event', 'send', {
'event_category': 'form2',
'event_action': 'Submit'
});
yaCounter64949749.reachGoal('form2');
}
if ('2125' == event.detail.contactFormId) {
gtag('event', 'send', {
'event_category': 'form3',
'event_action': 'Submit'
});
yaCounter64949749.reachGoal('form3');
}
}, false);
</script>

Все сделали по инструкции? Можно отправлять проверочную форму, и если все правильно, в Метрике на вкладке Отчеты — Конверсии вы увидите свое событие (возможно, минут 10 надо будет подождать).