Як відстежувати відправку форм в GTM, якщо у вас Contact form 7

У цій статті ви дізнаєтеся, як налаштувати відстеження надсилання форм через GTM.
Все налаштування ми описали за чотири простих кроки.

Про що варто пам’ятати під час відстеження відправлення форм Contact Form 7

Плагін Contact Form 7 працює на AJAX, тобто сама сторінка, на якій розміщена ця форма, під час її заповнення та відправлення, не перезавантажується.

Використовувати класичний інструмент для відстеження форм GTM тут не вийде.

Найчастіше це стосується сайтів односторінкових, але й сайти з великою кількістю сторінок теж можуть мати такі форми.

Для таких випадків використовується відстеження подій, які передає сама форма під час її відправлення.

Додавання тега для під час відстеження відправлення форм Contact Form 7

Вам потрібно додати тег у GTM: користувацький HTML.

Додаємо туди ось цей код, він узятий з офіційного сайту Contact Form7:

<script>
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    window.dataLayer.push({
      "event" : "cf7submission",
      "formId" : event.detail.contactFormId,
      "response" : event.detail.inputs
    })
  });
</script>

Дивимося, як усе працює. Тиснемо на “Попередній перегляд” у правому верхньому куті. Якщо GTM встановлено правильно, то ви побачите помаранчеву плашку з таким повідомленням “Попередній перегляд робочої області “Default Workspace””

Далі переходимо на наш сайт. У нижній частині екрана браузера має з’явитися спеціальне вікно. Робимо відправлення форми ще раз і бачимо таке в ньому:

Зверніть увагу на назву події, саме вона нам знадобиться для подальшого налаштування: cf7submission.

Налаштування тригера і змінних для відстеження відправлення форм Contact Form 7

Потрібно створити кілька тригерів

Вам потрібно перейти в розділ “Тригери” в лівому меню і натиснути “Створити“.

Вказуємо назву, за якою ви будите його відрізняти. Вибираємо тип тригера “Користувацька подія“

Вставляємо в ім’я події “cf7submission“

Настав час налаштувати змінні. Давайте уважніше подивимося, що саме віддає форма під час відправлення:

Відповіддю вважається все, що йде після слова “response“, а нумерація йде порядково, починаючи із 0.

Саме в цій формі мені особливо цікавий email, а взагалі у вас може бути інше поле ключове.
Вийшла змінна зі значенням response.2.value (порахуйте, чи правильно я визначив рядок)
Йдемо у вкладку “Змінні” і в розділі “Користувацькі змінні” натискаємо “Створити“

Вибираємо “Змінна рівня даних“

В ім’я вставляємо те, що у нас вийшло: response.2.value

Якщо у вас кілька форм на сайті, то я рекомендую додати змінну formId. Створюється таким же чином.

Потрібно перевірити, як усе працює. Знову переходимо в попередній перегляд у ГТМ і переходимо на сторінку нашої форми. Якщо все налаштовано корректно, то у вас відобразиться корректно, включно з formId.

Тег Google Universal Analytics для відстеження відправлення форм Contact Form 7

Ми пройшли півдороги! Давайте налаштуємо спеціальний тег Google Universal Analytics.
Йдемо в Теги і тиснемо “Створити“. Вибираємо в конфігурації тега Google Universal Analytics.
Звичайно ж на цьому кроці у вас має бути встановлений Google Analytics.

Тип відстеження: Подія
Категорія: Form Submission
Дія наша змінна FormID
Ярлик наша змінна email
Налаштування Google Analytics: змінна Google Analytics
Тригер наш тег cf7 submit

Налаштування цілей у Google Analytics під час відстеження відправлення форм Contact Form 7

Йдемо в Google Analytics.

Заходимо в режим Адміністратора (лівий нижній кут екрана), там переходимо в розділ “Цілі“

Тиснемо “Ціль“. Нам потрібна “Власна“

Категорія: Form Submission
Дія: Form ID: 3807

Вітаємо! Ви налаштували відстеження відправлення форм у себе на сайті!