Настройка цели отправка формы для Contact Form 7

Для того, чтобы настроить в Яндекс Метрике отслеживание цели успешная отправка формы плагина Contact Form 7 для Wordpress необходимо добавить в Метрике цель с типом условия JavaScript-событие.

Указываем собственное название цели и указываем идентификатор цели, сохраняем изменения.

Далее нам необходимо по FTP открыть файл footer.php и до тега body разместить нижеследующий код. Данный код будет отслеживать отправку всех активных форм CF7. Cам код должен быть заключен в тег script:

document.addEventListener( 'wpcf7mailsent', function( event ) {
yaCounterXXX.reachGoal('sendform');}, false );

где XXX - номер счетчика, sendform - идентификатор цели.

Есть вариант разместить данный код в админке в специальном поле "свой JS" в настройках темы. Обратите внимание на примечание к этому полю - обычно размещение тега script в этом поле не требуется. При этом варианте отслеживание отправки некоторых форм может не срабатывать - например, если форма размещена во всплывающем окне (pop-up форма). Вариант с добавлением скрипта в footer.php предпочтительнее.

Для проверки срабатывания отслеживания цели добавим логирование в консоль разработчикa (добавляем console.log('ОКЕЙСИ!') между ; и }:

document.addEventListener( 'wpcf7mailsent', function( event ) {
yaCounterXXX.reachGoal('sendform');console.log('ОКЕЙСИ!');}, false );

В браузере открываем страницу с формой, запускаем консоль (F12 для Windows), заполняем и отправляем форму, если в консоли видим надпись ОКЕЙСИ!, то отслеживание цели срабатывает. Не забываем убрать логирование.

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

  document.addEventListener('wpcf7mailsent', function sendMail(event) {
    if ('111' == event.detail.contactFormId) {
      yaCounterXXX.reachGoal('sendform');
    }
    if ('222' == event.detail.contactFormId) {
      yaCounterXXX.reachGoal('sendform2');
    }
  }, false);

Здесь вместо 111 и 222 указываем ID форм.