X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-03-19
  • 6568 переглядів

  • Дизайн та розробка сайту

Доброго времени суток. 🙂

Не совсем запланированная статья, но я обнаружил, что не опубликовал информацию о столь важном новшестве. Расскажу о том как добавить или переделать старые цели от Google или Яндекс для плагина Contact Form 7, что создает формы обратной связи. Информация очень важна и обязательна для всех кто использует плагин Contact Form 7 и пользуется целями для отслеживания конверсии.

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

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

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 9, в среднем: 5 из 5
Читайте також