Продвижение сайтов 24
7(499) 50-111-05
7(499) 50-111-05

Как настроить цели в Яндекс.Метрике для событий Contact Form 7 (цель — «отправка данных через cf7)

Как настроить цели в Яндекс.Метрике для событий Contact Form 7

Статья дополнена 11.08.19

В этой статье мы на примере конкретного сайта на WordPress разберемся, как настроить цели в Яндекс.Метрике, чтобы отслеживать отправку  сообщений(заявок) через формы WP Contact Form 7 (cf 7).

В качестве примера, возьмем сайт кзпи24.рф. На нем подключены две формы обратной связи cf7,

  • одна cf7-форма вызывается кнопкой «Заказать» в каталоге товаров http://кзпи24.рф/shop:
  • вторая форма находится в левом сайдбаре

Наша цель —  отследить метрикой событие, сработавшее в том случае, когда посетитель сайта получит сообщение об успешной отправке заявки(сообщения), это событие — wpcf7mailsent.

Настраиваем отслеживание событий отправки cf7 формы в Я.Метрике.

  1. Итак, начнем. Первое, что мы делаем — переходим в Яндекс.Метрику. (предполагаем, что метрика уже установлена на вашем сайте. Если счетчик Яндекс.Метрики все еще не поставлен на сайт, — читайте в Помощи Яндекса  — Как создать и установить счетчик?)

Переходим в Настройки, выбираем вкладку Цели, кликаем Добавить цель

2) В модальном окне в поле Название пишем подходящее по смыслу название цели — «cf7 заказать в каталоге продукции», выбираем вкладку «JavaScript-событие», в поле Идентификатор цели  прописываем любое подходящее название для события отправки формы. После этого, нажимаем на кнопку «Добавить цель».

Крутяк! Первая цель создана:

Точно так же определяем цели для всех контактных форм на сайте. У нас их две, как мы выше упомянули.

Для второй формы, расположенной в левом сайдбаре, добавляем цель, по аналогии, в Я.Метрике заполняем поля:

Создана вторая цель:

3) Возвращаемся в wordpress-консоль сайта, открываем в редакторе файл footer.php

После кода подключения яндекс.метрики нужно добавить вот такой код:

(НОВАЯ ВЕРСИЯ КОДА https://yandex.ru/support/metrica/objects/reachgoal.html)

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 if(event.detail.contactFormId=="43"){ 
ym(47567020, 'reachGoal', 'zakaz_tovara');
 }
}, false );
</script>

(СТАРАЯ ВЕРСИЯ КОДА https://yandex.ru/support/metrica/objects/reachgoal.html)

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 if(event.detail.contactFormId=="43"){ 
 yaCounter47567020.reachGoal('zakaz_tovara');
 }
}, false );
</script>

Значения в коде замените на ваши:

В частности, id (идентификатор) контактной формы можно найти в contact-form-7 шоткоде:

[contact-form-7 id="43" title="Модальное окно"]

ID этой формы “43”.

zakaz_tovara — идентификатор цели в яндекс метрике

47567020 — номер счетчика Яндекс Метрики

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

(НОВАЯ ВЕРСИЯ КОДА https://yandex.ru/support/metrica/objects/reachgoal.html)

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 if(event.detail.contactFormId=="43"){ 
ym(47567020, 'reachGoal', 'zakaz_tovara');
 }
 if(event.detail.contactFormId=="44"){ 
ym(47567020, 'reachGoal', 'besplatnaya_dostavka');

 }
}, false );
</script>

(СТАРАЯ ВЕРСИЯ КОДА https://yandex.ru/support/metrica/objects/reachgoal.html)

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 if(event.detail.contactFormId=="43"){ 
 yaCounter47567020.reachGoal('zakaz_tovara');
 }
 if(event.detail.contactFormId=="44"){ 
 yaCounter47567020.reachGoal('besplatnaya_dostavka');
 }
}, false );
</script>

Все, настройка целей cf7 в Яндекс.Метрике закончена.

Чтобы посмотреть, как часто пользователи взаимодействовали с веб-формами на сайте, переходим в раздел «Конверсии» в Яндекс.Метрике.

На скрине, можно поглазеть, сколько раз сегодня посетители отправляли заявки с сайта.

Если у вас возникнут сложности в настройке целей, напишите нам, и мы непременно поможем.

Похожие статьи

Рейтинг: 4.9. 16 голосов
Please wait...
комментариев 13
  1. Рейтинг: 5.0. 2 голоса
    Please wait...

    Как установить цель метрики “отправка формы” на сайте вордпресс? Через “дополнительные настройки” уже не работает. Попробовала через плагин Code Snippets Extended, тоже не работает ?

    • Рейтинг: 5.0. 1 голос
      Please wait...

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

  2. Рейтинг: 3.7. 3 голоса
    Please wait...

    Очень крутая рекомендация! Все работает! Спасибо автору

  3. Рейтинг: 5.0. 1 голос
    Please wait...

    Спасибо, Антон. Очень приятно)

  4. Не голосовали
    Please wait...

    А у меня не работает. Все сделал по инструкции. Сделал тестовые отправки, метрика ничего не показывает :((((

  5. Рейтинг: 5.0. 1 голос
    Please wait...

    О прошу прощения, метрика заработала, видимо затупила))) Спасибо !!!

  6. Не голосовали
    Please wait...

    Статья хорошая, спасибо.
    Однако не помогло(

  7. Рейтинг: 5.0. 1 голос
    Please wait...

    Спасибо! Все работает.

  8. Рейтинг: 5.0. 1 голос
    Please wait...

    Однако пришлось кавычки везде поменять, может кому пригодится.

    • Не голосовали
      Please wait...

      да все верно, поменяйте в обоих местах кода кавычки вместо ‘ на «

    • Не голосовали
      Please wait...

      Спасибо огромно за кавычки!

  9. Рейтинг: 5.0. 1 голос
    Please wait...

    полезная инструкция, спасибо автору!

  10. Рейтинг: 5.0. 1 голос
    Please wait...

    Спасибо! Всё работает!)

Добавить комментарий