Новый способ подключения целей Метрики и Аналитики к формам «WordPress Contact Form 7»

Не будем ждать когда все отвалится и в панике искать решения. Лучше заранее подготовиться и переустановить код. Я пропущу теоретическую часть. Кому интересно, что такое цели, для чего они нужны на сайте, могут обратиться к моим прошлым публикациям, где я подробно останавливался на этих вопросах. Перейдём сразу к практической технической части.

Подключаем цели Google Analytics к WordPress Contact Form 7

Подключаем цели Яндекс Метрики к Вордпресс плагину «Contact Form 7»

Итак, хуки on_sent_ok и on_submit в Contact Form 7 (WPCF7) скоро перестанут работать. Если вы что-то подключали с их помощью — имеет смысл поискать альтернативные решения. Разработчик рекомендует использовать для отслеживания события DOM. В частности, используемый ранее хук on_sent_ok следует заменить событием wpcf7mailsent.

Полный список DOM-событий доступный в Contact Form 7 версии 4.7

• wpcf7mailsent — успешная отправка формы;
• wpcf7invalid — имеются поля с недопустимыми данными;
• wpcf7spam — подозрение на спам;
• wpcf7mailfailed — проблема с доставкой;
• wpcf7submit — передача формы без проверок.

Как видим, есть и другие события, которые тоже могут быть очень полезны, но о них поговорим в другой раз. А сегодня научимся вешать цели на успешную отправку форм, используя wpcf7mailsent. Начнём с Яндекс Метрики.

Яндекс Метрика

Новый способ основан на методе addEventListener. В качестве примера будем использовать цель из моей прошлой публикации «Подключаем цели Яндекс Метрики к WordPress Contact Form 7».

Напомню, она называлась myForm и подключалась так:

on_sent_ok: "yaCounter100500.reachGoal('myForm');"

Теперь она подключается таким образом:

document.addEventListener( 'wpcf7mailsent', function( event ) {
yaCounter100500.reachGoal('myForm');
}, false );

Все просто.

Гугл Аналитикс

Аналогичная картина и с Аналитикой, в старом способе у нас была цель Consultation и подключалась так:

on_sent_ok: "ga('send', 'event', 'Consultation', 'Submit');"

Значит теперь должно быть так:

document.addEventListener( 'wpcf7mailsent', function( event ) {
ga('send', 'event', 'Consultation', 'Submit');
}, false );

Тоже ничего сложного.

Как подключить цели Яндекс Метрики и Гугл Аналитикс одновременно

Интересно, а зачем?

После прошлых публикаций мне неоднократно задавали этот немного странный вопрос, поэтому предположу, что вместе они подключаются примерно так:

document.addEventListener( 'wpcf7mailsent', function( event ) {
yaCounter100500.reachGoal('myForm');
ga('send', 'event', 'Consultation', 'Submit');
}, false );

Работоспособность не проверял.

Куда вставлять код

Способов размещения много, расскажу о некоторых из них.

Самый простой — это вывести код непосредственно в HTML, вставив его где-нибудь в футере активной темы.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga('send', 'event', 'Consultation', 'Submit');
}, false );
</script>

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

Но все может быть гораздо проще — многие премиум-темы Вордпресс позволяют внедрять кастомный код прямо в своих настройках. Для внедрения JavaScript достаточно обычного блока установки кода счетчиков, который имеется практически во всех премиум-темах.

Вот так, например, выглядит этот раздел в легендарной теме Авада.

Код отслеживания целей можно разместить следом за уже имеющимися кодами счетчиков. Таким образом он попадет непосредственно в HTML-код всех страниц.

Но JS в HTML — не кошерно, было бы правильнее вынести его во внешний файл. Для этого в активной теме создаём директорию /js, в ней файл goals.js и сохраняем туда весь отслеживающий код. Напомню, в Вордпресс все внешние скрипты подключаются с помощью функции wp_enqueue_script() в файле functions.php или через плагины.

wp_enqueue_script( 'goals', get_template_directory_uri() . '/js/goals.js');

Что делать если много разных форм, много целей

Вариантов тоже несколько.

Например, вынести весь код в отдельный файл, создать для каждой отслеживаемой формы цель и простой обработчик. Для идентификации конкретной формы в дереве DOM-объектов, её родителю нужно задать уникальный класс (или ID). Для этого можно воспользоваться очень полезной функцией Вордпресс body_class(), которая присваивает тегу body все относящиеся к текущей странице классы. В том числе и уникальный page-id, который я использовал в примере ниже.

var myForm = document.querySelector('.page-id-1 .wpcf7');
myForm.addEventListener( 'wpcf7mailsent', function( event ) {
yaCounter100500.reachGoal('myForm');
}, false );

Не исключено, что в вашей теме уже имеется и body_class(), и другая идентификация. Нужно просто открыть HTML-код страницы и проанализировать его структуру.

И ещё, вынося скрипты во внешний файл, нужно понимать, что они будут работать на всех страницах сайта, где загружается JS-файл. Я рекомендую перед использованием addEventListener() обязательно производить проверку на наличие слушаемого объекта на странице.

Например, для двух целей myForm и mySecondForm, размещенных в родительских блоках с классами page-id-1 и page-id-2 проверка будет выглядеть так:

var myForm = document.querySelector('.page-id-1 .wpcf7');
if(myForm){
myForm.addEventListener( 'wpcf7mailsent', function( event ) {
yaCounter100500.reachGoal('myForm');
}, false );
}
var mySecondForm = document.querySelector('.page-id-2 .wpcf7');
if(mySecondForm){
mySecondForm.addEventListener( 'wpcf7mailsent', function( event ) {
yaCounter100500.reachGoal('mySecondForm');
}, false );
}

Если этого не сделать, скорее всего вернется ошибка: Uncaught TypeError: Cannot read property ‘addEventListener’ of null.

В заключение

Я не думаю, что веб-разработчики сильно расстроились от новшеств Contact Form 7.

Все таки обработка и контроль событий DOM даёт более широкие возможности в более привычном, предсказуемом виде, в контексте полного дерева объектов DOM.

Немного пострадают простые пользователи, не имеющие навыков программирования. Но до конца года ещё много времени, и я уверен, появятся более простые, более юзабельные способы установки целей. Возможно в виде сторонних плагинов, а возможно и средствами самого Contact Form 7.

Если что-то не получается, рекомендую ознакомиться с материалами официальных источников.

• Настройка целей Яндекс Метрики (рус.)
• Как создавать, изменять и публиковать цели Гугл Аналитики (рус.)
• Contact Form 7 — DOM Events (англ.)
• Contact Form 7 — Tracking Form Submissions with Google Analytics (англ.)

Успехов! ✌?