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

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

23 апреля 2017 741 9

Разработчик плагина 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. В качестве примера будем использовать цель из моей прошлой публикации.

Напомню, она называлась 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 достаточно обычного блока установки кода счетчиков, который имеется практически во всех премиум-темах.

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

Avada — установка счетчиков

Код отслеживания целей можно разместить следом за уже имеющимися кодами счетчиков. Таким образом он попадет непосредственно в 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.

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

Успехов! ✌🏻

Иван Данилин
Автор: Иван Данилин

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

  ПОДПИСАТЬСЯ

Комментарии
  1. возникла проблема прописал как у вас написано, но аналитика игнорит просто

  2. Иван, а как добавить через эти события дополнительный обработчик? Например я хочу форму интегрировать с crm битрикса, чтобы сразу создавались лиды в CRM. Обработчик находится в отдельном файле php

    • Алексей, я не работал с Битрикс24, коллеги подсказывают, что самый простой способ — отправлять ему копию письма и создавать из него лид.

  3. Иван, спасибо за статью, как раз пробую настроить плагин. Я правильно понимаю, что в самой форме, в закладке дополнительно ничего не надо прописывать?

  4. А можно ли обойти добавление page-id через body_class(), просто активировав код отслеживания отправки формы на странице через google tag manager? Без вставки его напрямую в код сайта?

  5. А зачем что-то в код прописывать, когда у CF7 есть дополнительные поля? Вот какой должен быть хук в новом формате?

Добавить комментарий

Разгоните свой WordPress

Выбираем быстрый и надежный хостинг для своих сайтов

Подробнее