Установка цели в Яндекс.Метрике и Google Analytics на отправку формы Contact Form 7

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

Внимание! У Google и Яндекса есть несколько версий счетчиков. В зависимости от того, какая версия счетчика установлена у вас, нужно использовать соответствующий код. Что бы понять это, вам необходимо найти в исходном коде свои счетчики и использовать соответствующий код из моих примеров.

Установка целей на отправку формы для Яндекс.Метрики

Первым делом, давайте добавим цель в интерфейсе Яндекс.Метрики. Для этого переходим в настройки счетчика -> вкладка Цели и нажимаем "Добавить цель", затем выбираем тип цели "JavaScript-событие" и указываем уникальный идентификатор цели.

Теперь можно переходить к добавлению кода на сайт.

Для счетчиков Яндекс.Метрика v.1 (yaCounterXXXXXXXX)

   /*Форма обратной связи*/
    var myForm = document.querySelector('#wpcf7-f6773-o3'); // Укажите ID своей формы вместо wpcf7-f6773-o3. Для этого, нажмите F12 и наведите курсор мыши на свою форму, найдите тег <form> и скопируйте содержимое <form id="">
    if (myForm) {
        myForm.addEventListener('wpcf7mailsent', function (event) {
			yaCounterXXXXXXXX.reachGoal('order'); // Где XXXXXX - id вашего счетчика, а "order" идентификатор цели в Яндекс.Метрике
        }, false);
    }

Для счетчиков Яндекс.Метрика v.2 (ym(XXXXXXXX))

   /*Форма обратной связи*/
    var myForm = document.querySelector('#wpcf7-f6773-o3'); // Укажите ID своей формы вместо wpcf7-f6773-o3. Для этого, нажмите F12 и наведите курсор мыши на свою форму, найдите тег <form> и скопируйте содержимое <form id="">
    if (myForm) {
        myForm.addEventListener('wpcf7mailsent', function (event) {
			ym(XXXXXXXX, 'reachGoal', 'order'); Где XXXXXX - id вашего счетчика, а "order" идентификатор цели в Яндекс.Метрике
        }, false);
    }

Установка целей на отправку формы для Google Analytics

Для начала создам цель в интерфейсе Google Analytics. Для этого заходим в аналитику и переходим в раздел "Администратор" (снизу слева колесико настроек), затем в представлении "Все данные по веб-сайт" нажимаем цели, затем "+ Цель", затем "Собственная", нажимаем "Далее", указываем название, выбираем тип "Событие". На следующем шаге указываем категорию, например feedback и действие, например order. На этом создание цели закончено.

Теперь можно переходить к добавлению кода на сайт.

Для счетчиков Google Analytics (analytics.js)

   /*Форма обратной связи*/
    var myForm = document.querySelector('#wpcf7-f6773-o3'); // Укажите ID своей формы вместо wpcf7-f6773-o3. Для этого, нажмите F12 и наведите курсор мыши на свою форму, найдите тег <form> и скопируйте содержимое <form id="">
    if (myForm) {
        myForm.addEventListener('wpcf7mailsent', function (event) {
			ga ('send', 'event', 'feedback', 'order'); // Где feedback категорию, а order событие
        }, false);
    }

Для счетчиков Google Analytics (gtag.js)

   /*Форма обратной связи*/
    var myForm = document.querySelector('#wpcf7-f6773-o3'); // Укажите ID своей формы вместо wpcf7-f6773-o3. Для этого, нажмите F12 и наведите курсор мыши на свою форму, найдите тег <form> и скопируйте содержимое <form id="">
    if (myForm) {
        myForm.addEventListener('wpcf7mailsent', function (event) {
		gtag('event', 'feedback', 'order'); // Где feedback категорию, а order событие
        }, false);
    }