Дело в том, что к концу 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. Если вы так же использовали старый способ, рекомендую перейти на новый, в противном случаи столкнетесь с проблемами.
На этом все, спасибо за внимание. 🙂
