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

Дело в том, что к концу 2017 года создатели плагина Contact Form 7 решили отключить старый способ добавления целей и перейти на новый. Теперь использовать on_sent_ok и on_submit больше нельзя. На официальной страничке авторы указали следующее:

Note: on_sent_ok and on_submit are deprecated and scheduled to be abolished by the end of 2017. You can use DOM events instead of these settings.

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

В данный момент разработчики советуют переходить на события DOM. В итоге on_sent_ok теперь заменяется событием wpcf7mails. Ранее вы добавляли примерно такую строку, если использовали Google цели:

on_sent_ok: "ga('send', 'event', 'ContactPage', 'MyContactsForm');"

Теперь же код явно изменится да и место его расположения тоже и это важно. О расположении я расскажу позже. Собственно сам код, будет примерно таким:

	
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga('send', 'event', { eventCategory: 'MyContactsForm', eventAction: 'ContactPage'});
}, false );

С Яндекс целями все так же просто вместо строки от Гугл ставите свою Яндекс цель. Например так.

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

Если нужно добавить обе цели сразу, то прописываете их рядом:

	
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga('send', 'event', { eventCategory: 'MyContactsForm', eventAction: 'ContactPage'});
yaCounter999999.reachGoal('MyContactsForm');
}, false );

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

Представим что у вас несколько форм и к каждой нужно добавить свою Гугл цель. Вы должны создать эти самые цели в Google Analytics, после завернуть вашу форму в блок с уникальным айди. Ну или проанализировать код страницы где форма, может там уже у вас форма находится в каком-то блоке с уникальным ID или классом. Готовый код для форм будет таким:

var ContactsForm = document.querySelector('#pop_up .wpcf7');
ContactsForm.addEventListener( 'wpcf7mailsent', function( event ) {
ga('send', 'event', { eventCategory: 'MyContactsForm', eventAction: 'ContactPage'});
}, false );

var TwoForm = document.querySelector('#form_page .wpcf7');
TwoForm.addEventListener( 'wpcf7mailsent', function( event ) {
ga('send', 'event', { eventCategory: 'MyTwoForm', eventAction: 'FormPage'});
}, false );

• В первой строке есть var ContactsForm - название переменной для нашей первой формы формы.
• В конце первой строки имеется #pop_up .wpcf7 - как раз, тот самый уникальный айди контейнера для формы + класс самой формы, по умолчанию он .wpcf7
• 3 строка - в ней прописываем цель для нашей формы, можете несколько если нужно.
• В шестой строке var TwoForm - вновь создаем переменную, чтобы задать цели для второй формы.
• #form_page .wpcf7 - опять уникальный айди родительского контейнера для нашей второй формы + ее класс .wpcf7
• 8 строка - опять таки в ней цели для второй формы.

Таким способом, можно создавать переменные для многих форм. Главное точно указывать ID родительских контейнеров.

Теперь перейдем к немаловажному моменту где и как подключать скрипт? Если вы не знакомы с правилами добавления скриптов на сайт, то можете прочитать статью - Как и где подключить скрипт?. Раньше код добавлялся прямо в настройках плагина, теперь же нужно добавлять как обычный сторонний скрипт. Вы должны данный скрипт с целями добавить на сайт, например в подвал сайта или отдельный файл. если решили добавлять скрипт прямо в код сайта. то можно через теги script

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga('send', 'event', { eventCategory: 'MyContactsForm', eventAction: 'ContactPage'});
}, false );
</script>

Помимо wpcf7mailsent, есть еще несколько новых событий:

• wpcf7mailsent — срабатывает, когда почта успешно отправлена. С ней вы знакомы по этой статье.
• wpcf7submit — срабатывает, когда передача данных осуществляется, независимо от других инцидентов.
• wpcf7invalid — срабатывает, когда почта не отправляется, потому что есть поля с недопустимым вводом.
• wpcf7spam — срабатывает, когда почта не отправляется, поскольку обнаружена возможная активность спама.
• wpcf7mailfailed — срабатывает, когда не удалась отправить почту.

Так что если вам нужно какое-то из новых событий, можете воспользоваться аналогично - wpcf7mailsent.

Скоро многие вебмастера столкнутся с тем, что работа аналитики и метрики перестанет считать конверсию по целям, установленным в плагине Contact Form 7. Если вы так же использовали старый способ, рекомендую перейти на новый, в противном случаи столкнетесь с проблемами.

На этом все, спасибо за внимание. 🙂