Сышышь ты, выходи сюда,
поговорим !

Главная Новости

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

Опубликовано: 17.04.2018

Разработчик плагина Contact Form 7 обещал к концу 2017 года прекратить поддержку хука on_sent_ok, с помощью которого мы отслеживали действия с формами, подключали цели Яндекс Метрики и Гугл Аналитики.

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

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

Подключаем цели Яндекс Метрики к WordPress 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.

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

Успехов! ✌????

Всё самое новое и интересное я публикую в своём Телеграм-канале . Подписывайтесь!

rss