Цели Contact Form 7 для Яндекс Метрики и Гугл Аналитикс

Источник материала agvento.com

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

Как настроить цели в интерфейсе Метрики:

Переходим в Яндекс.Метрику, выбираем нужный сайт, раздел Настройки – Цели – кнопка Добавить цель. В открывшемся окне выбираем JavaScript событие и пишем названием цели  и идентификатор на латинице, как показано на скриншоте ниже. В моем случае я сделаю цель для всплывающего окна с формой «Перезвонить вам?», идентификатор цели будет: «formapopup».

Как настроить цели в интерфейсе Метрики

Цель создана, пора повесить цель на форму плагина Contact Form 7.

Настройка отслеживания цели на сайте WordPress:

Теперь нам нужен такой код:

<script type="text/javascript">
  document.addEventListener(
    'wpcf7mailsent',
    function(event) {
      yaCounterXXXXXXXX.reachGoal('formapopup');
    },
    false);
</script>

Этот код необходимо разместить в Footer или Header вашего сайта, можно рядом с кодом подключения метрики или аналитики. Вместо “XXXXXXXX” нужно написать номер счетчика метрики вместо “formapopup” ваш идентификатор цели.

Как добавить цели Google Analytics для Contact Form 7

С гугл аналитикой все немного сложнее, в первую очередь из-за путаницы с новым и старым кодом отслеживания. 

Старый код отслеживания GA – anlytics.js (до 2018)

<!-- Google Analytics -->
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;
i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
a=s.createElement(o),m=s.getElementsByTagName(o)[0];
a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Новый код отслеживания GA – gtag.js (с 2018)

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-Y"></script>
<script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXX-Y');</script>

Стоит отметить, что и новый и старый код прекрасно работают и передают все данные в Аналитику. Так что если у вас на сайте установлен старый код счетчика не спешите паниковать.

Как настроить цели в интерфейсе Google Analytics

Выбираем сайт, далее Администратор, в третьей колонке “Представление” находим “Цели” и переходим в раздел.
Далее жмем красную кнопку “+ЦЕЛЬ”. В настройках цели на первом шаге “Установка цели” выбираем “Собственная”.
В “Описание цели” пишем название цели и выбираем тип “Событие”.
На последнем третьем шаге “Подробные сведения о цели” в поле “Категория” пишем уникальный идентификатор.
В поле “Действие” прописываем “Submit”.
Ползунок под “Использовать ценность события в качестве ценности цели конверсии” выставляем в положение “Да».

Как настроить цели в интерфейсе Google Analytics

Настройка отслеживания цели GA на сайте WordPress.

Перед тем как настроить цели на сайте нужно понять какой код отслеживания у вас установлен. Самый быстрый способ – это на любой странице сайта нажать “Ctrl+U” и, путем поиска на странице, найти код счетчика.

Если установлен “Старый” тип счетчика, код отслеживания цели будет такой:

<script type="text/javascript">
  document.addEventListener('wpcf7mailsent', function(event) {
    ga('send', 'event', 'formapopup', 'Submit');
  }, false);
</script>

Если установлен “Новый” тип счетчика, код отслеживания цели будет такой:

<script type="text/javascript">
  document.addEventListener('wpcf7mailsent', function(event) {
    gtag('event', 'send', {
      'event_category': 'formapopup',
      'event_action': 'Submit'
    });
  }, false);
</script>

Вместо “formapopup” пишем свой идентификатор, который вы указали в поле “Категория”. “Submit” – это то,что вы указали в поле “Действие”.

Как добавить цели к конкретной или нескольким формам Contact Form 7

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

Разработчики плагина предлагают использовать свойство event.detail.contactFormId. Есть и другие способы, но этот самый простой. 

Чтобы отследить форму таким образом нужно узнать ее ID. Переходим в Контакт форм 7 и в графе шорткоды находим id.

ID Contact Form 7

У нас есть id нужной нам формы, подставляем свой id вместо моего (28269) в это код:

<script type="text/javascript">
  document.addEventListener('wpcf7mailsent', function sendMail(event) {
    if ('28269' == event.detail.contactFormId) {
      gtag('event', 'send', {
        'event_category': 'formapopup',
        'event_action': 'Submit'
      });
      yaCounterXXXXXXXX.reachGoal('formapopup');
    }
  }, false);
</script>

В данном случае отправка формы передается сразу в Метрику и Аналитику.

Как вы уже догадались этот код необходимо разместить в Footer или Header вашего сайта. Вместо «XXXXXXXX» нужно написать номер счетчика метрики вместо «formapopup» ваш идентификатор цели.

Пример кода для отслеживания целей из нескольких форм:

<script type="text/javascript">
  document.addEventListener('wpcf7mailsent', function sendMail(event) {
    if ('28269' == event.detail.contactFormId) {
      gtag('event', 'send', {
        'event_category': 'formapopup',
        'event_action': 'Submit'
      });
      yaCounterXXXXXXXX.reachGoal('formapopup');
    }
    if ('28270' == event.detail.contactFormId) {
      gtag('event', 'send', {
        'event_category': 'zakaz',
        'event_action': 'Submit'
      });
      yaCounterXXXXXXXX.reachGoal('zakaz');
    }
    if ('28271' == event.detail.contactFormId) {
      gtag('event', 'send', {
        'event_category': 'zayva',
        'event_action': 'Submit'
      });
      yaCounterXXXXXXXX.reachGoal('zayva');
    }
  }, false);
</script>

Как проверить срабатывают ли цели в Метрике и Аналитике

Есть несколько способов, давайте их рассмотрим.

1. Универсальный способ

Добавим к коду цели следующую строчку:

console.log('работает');

Вместо “работает” можем написать всё что угодно.

В итоге должно выглядеть так:

<script type="text/javascript">
  document.addEventListener('wpcf7mailsent', function sendMail(event) {
    if ('28269' == event.detail.contactFormId) {
      gtag('event', 'send', {
        'event_category': 'formapopup',
        'event_action': 'Submit'
      });
      yaCounterXXXXXXXX.reachGoal('formapopup');
      console.log('работает');
    }
  }, false);
</script>

Переходим на сайт и оправляем форму. Вызываем консоль разработчика сочетанием клавиш “Ctrl+Shift+I” (для Chrome, Opera, Яндекс). И во вкладке “Console” проверяем сработало ли наше событие.

Проверка срабатывают ли цели в Метрике и Аналитике

Быстрая проверка цели в Яндекс.Метрике

Быстрее всего цель в Метрике можно отследить в Вебвизоре. Как правило достигнутая цель появляется уже через 5-10 минут после отправки формы.

Быстрая проверка цели в Яндекс.Метрике

Быстрая проверка цели в Google Analytics

Для моментальной проверки цели в Аналитике перейдите на вкладку “В режиме реального времени”, раздел “События”. Здесь мы можем увидеть какие события были достигнуты за последние 30 минут.

Быстрая проверка цели в Google Analytics

В разделе “Конверсии” можно увидеть какие цели были достигнуты за последние 30 минут.

Быстрая проверка цели в Google Analytics

Другие материалы по теме

Цели js события Яндекс Метрика и Гугл Аналитикс

Заказать услугу