Цели яндекс метрики и гугл аналитикс для Контакт форм 7 (CF7) по-новому

Если форма на сайте и соответственно устанавливаются по одной цели для гугл аналитикс и яндекс метрики, то код, который нужно добавить на сайт (Вордпресс), может выглядеть так:

document.addEventListener( 'wpcf7mailsent', function( event ) {
  ga('send', 'event', 'Feedback', 'Submit');
  yaCounterXXXXXXXX.reachGoal('feedback');
}, false );

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

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

document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '747' == event.detail.contactFormId ) {
  ga('send', 'event', 'Feedback', 'Submit');
  yaCounterXXXXXXXX.reachGoal('write');
 }
if ( '1033' == event.detail.contactFormId ) {
  ga('send', 'event', 'Leads', 'Submit');
  yaCounterXXXXXXXX.reachGoal('leads');
 }
if ( '1034' == event.detail.contactFormId ) {
  ga('send', 'event', 'Bid', 'Submit');
  yaCounterXXXXXXXX.reachGoal('bid');
 }
}, false );

Как видно из приведенного кода, теперь мы проверяем формы по идентификатору.

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

var myForm = document.querySelector('.page-id-1 .wpcf7');
if(myForm){
myForm.addEventListener( 'wpcf7mailsent', function( event ) {
yaCounterXXXXXXXX.reachGoal('myForm');
}, false );
}
var mySecondForm = document.querySelector('.page-id-2 .wpcf7');
if(mySecondForm){
mySecondForm.addEventListener( 'wpcf7mailsent', function( event ) {
yaCounterXXXXXXXX.reachGoal('mySecondForm');
}, false );
}

(Спасибо danilin.biz!)

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