Відстеження надсилання форм через Google Tag Manager

Універсального способу відстежити форму немає: усе залежить від того, що відбувається на сайті після надсилання. Якщо відкривається сторінка подяки, рахуйте її перегляд. Якщо ні, пробуйте вбудований активатор (тригер) “Надсилання форми”, потім активатор видимості повідомлення про успіх. Найнадійніший варіант для складних форм це подія в dataLayer від розробника. Далі з Google Tag Manager надсилаєте в GA4 подію generate_lead.

Я, Сергій Оніщенко, понад 9 років налаштовую Google Ads та аналітику, і форми залишаються найчастішим місцем, де губляться заявки або рахуються зайві. Нижче розберу, як визначити тип форми, налаштувати кожен із чотирьох способів і перевірити результат. Якщо терміни поки плутаються, спершу прочитайте про теги, тригери та змінні. В українському інтерфейсі GTM тригер називається “активатор”, тому далі я пишу саме так.

Спершу подивіться, як працює ваша форма

Цей крок займає кілька хвилин і заощаджує години. Відкрийте сайт і надішліть тестову заявку. Дивіться, що сталося:

• Відкрилася нова сторінка з іншою адресою, наприклад /dyakuiemo/. Найпростіший випадок.
• Сторінка перезавантажилася, адреса та сама або з параметром. Звичайна HTML-форма, зазвичай підходить вбудований активатор.
• Сторінка не перезавантажилася, просто з’явилося повідомлення “Дякуємо, ми зв’яжемося з вами”. Це надсилання без перезавантаження (AJAX), тут вбудований активатор часто мовчить.
• Форма відкрита всередині чужого блока (віджет, Google Форми, форма сервісу бронювання). Найімовірніше, це iframe з іншого домену. Контейнер GTM вашого сайту не бачить, що відбувається всередині нього.

Спробуйте також надіслати форму з порожнім обов’язковим полем. Важливо розуміти, що відбувається в разі помилки: хороший спосіб не має рахувати таку спробу заявкою.

Який спосіб вибрати

Я йду таким порядком:

1. Є окрема сторінка подяки: активатор “Перегляд сторінки”.
2. Звичайна форма без окремої сторінки: активатор “Надсилання форми” з перевіркою дійсності.
3. Вбудований активатор не спрацьовує, але з’являється повідомлення про успіх: “Активатор видимості елемента”.
4. Нічого з цього не підходить, важлива точність, форма складна: подія в dataLayer.

А як щодо автоматичної події form_submit із розширеного відстеження GA4? Вона вмикається налаштуванням взаємодії з формами і для першого погляду корисна. Але я не спираюся на неї як на заявки: вона спрацьовує не на всіх формах і ловить форми, які заявками не є, наприклад пошук чи підписку. Про різницю подій докладніше в статті події в GA4.

Спосіб 1. Сторінка подяки

Налаштування займає п’ять хвилин.

1. У GTM відкрийте “Активатори” й натисніть “Створити”.
2. Виберіть тип “Перегляд сторінки”.
3. Позначте варіант для деяких переглядів сторінок.
4. Задайте умову: Page Path містить /dyakuiemo/.
5. Збережіть і прив’яжіть активатор до тегу події (про нього нижче).

Підступ один: на сторінку можна зайти повторно, оновити її або знайти в пошуку. Закрийте її від індексації та приберіть прямі посилання на неї з меню. Адреса має відкриватися лише після надсилання форми.

Спосіб 2. Активатор “Надсилання форми”

Вбудований активатор GTM слухає стандартну подію надсилання форми в браузері.

1. У розділі “Активатори” натисніть “Створити”.
2. У блоці конфігурації активатора виберіть “Надсилання форми”.
3. Увімкніть “Перевіряти дійсність”.
4. За потреби ввімкніть “Зачекати на теги”.
5. Виберіть “Деякі форми” й задайте умову, щоб активатор працював лише на потрібній сторінці чи формі.
6. Збережіть.

Що означають ці прапорці:

• Зачекати на теги. Форма не піде, доки не спрацюють теги або не мине час очікування. Без цього тег може не встигнути спрацювати до завантаження нової сторінки.
• Перевіряти дійсність. Тег спрацює лише після успішного надсилання. Без прапорця він спрацьовуватиме на кожну спробу, навіть якщо поля заповнено неправильно.

Щоб відрізнити одну форму від іншої, увімкніть вбудовані змінні форм: відкрийте “Змінні”, натисніть “Налаштувати” й позначте, наприклад, ідентифікатор форми та атрибут class форми. Якщо на сайті кілька форм, умову зручно задавати за Form ID.

Обов’язково перевірте спосіб на практиці. Багато сучасних форм надсилаються скриптом, і вбудований активатор може не спрацювати взагалі або спрацювати на спробу з помилкою. Якщо так, переходьте до наступних способів.

Спосіб 3. Активатор видимості елемента

Підходить для форм без перезавантаження: заявка пішла, і на сторінці з’явився блок із подякою. Рахуємо появу цього блока.

1. Надішліть тестову заявку, натисніть правою кнопкою на повідомлення про успіх і виберіть перегляд коду. Знайдіть ID або клас блока.
2. У GTM створіть активатор типу “Видимість елемента”.
3. У полі “Спосіб вибору” вкажіть ідентифікатор або засіб вибору CSS і введіть значення, наприклад .form-success.
4. У правилах спрацювання виберіть один раз на сторінку.
5. У додаткових параметрах увімкніть “Стежити за змінами DOM”. Без цього активатор не помітить блока, який з’явився після завантаження сторінки.
6. Якщо блок використовується і для інших повідомлень, додайте умову на потрібну сторінку.

Засіб вибору має бути точним. Якщо блок із помилкою і блок з успіхом мають один клас, ви знову рахуватимете невдалі спроби. Крім того, Google попереджає, що стеження за змінами DOM може сповільнювати сайт, якщо селектор підходить надто багатьом елементам.

Спосіб 4. Подія в dataLayer

Найточніший варіант: код сайту сам повідомляє GTM, що заявку прийнято сервером. Розробнику потрібно додати в місце успішного надсилання приблизно такий код:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'form_success',
  form_name: 'contact'
});

Далі в GTM:

1. Створіть активатор типу “Спеціальна подія” з назвою form_success. Регістр важливий.
2. Створіть змінну типу “Рівень даних” з іменем form_name, якщо хочете розрізняти форми.
3. Прив’яжіть активатор до тегу події.

Багато плагінів форм уже самі повідомляють про успішне надсилання. Наприклад, WordPress-плагін Contact Form 7 створює в браузері подію wpcf7mailsent. Її можна зловити власним HTML-тегом і передати в dataLayer:

<script>
document.addEventListener('wpcf7mailsent', function (e) {
  window.dataLayer.push({
    event: 'form_success',
    form_name: 'cf7-' + e.detail.contactFormId
  });
});
</script>

Такий тег запускайте на сторінках із формою. Для інших плагінів дивіться їхню документацію: найчастіше є схожа подія.

Якщо форма стоїть у чужому iframe, GTM вашого сайту її не побачить. Дивіться, чи вміє сервіс передавати подію на батьківську сторінку або перенаправляти на вашу сторінку подяки.

Як надіслати заявку в GA4

Активатор готовий, тепер потрібен тег.

1. У GTM відкрийте “Теги” й натисніть “Створити”.
2. Виберіть тип “Google Analytics: подія GA4”.
3. Вкажіть ідентифікатор потоку даних вигляду G-XXXXXXXXXX.
4. У полі “Назва події” напишіть generate_lead. Це рекомендована подія Google для заявки.
5. За потреби додайте параметр, наприклад form_name. Щоб бачити його у звітах, пізніше створіть спеціальний параметр у GA4.
6. У блоці активації виберіть активатор з одного зі способів вище.
7. Збережіть.

Якщо на сайті кілька важливих форм, використовуйте один тег із параметром, а не окрему подію на кожну. Так простіше будувати звіти.

Окремо про особисті дані. Не передавайте в GA4 ім’я, телефон чи email клієнта. Обережніше зі змінною тексту форми та з параметрами в адресі сторінки: туди легко потрапляють поля, які ввела людина.

Як перевірити налаштування

Не публікуйте контейнер, доки не перевірите все самі.

1. У GTM запустіть режим попереднього перегляду (Preview), введіть адресу сайту й натисніть Connect. Відкриється Tag Assistant.
2. Надішліть тестову заявку й подивіться, що тег спрацював один раз.
3. Надішліть форму з помилкою: тег спрацьовувати не повинен.
4. Оновіть сторінку подяки, якщо вона є, і подумайте, як рахуватиметься повторний захід.
5. Відкрийте звіт у реальному часі або DebugView у GA4 і знайдіть generate_lead.
6. Опублікуйте контейнер і вкажіть назву версії.

Після публікації позначте generate_lead як ключову подію і за добу звірте кількість подій із заявками на пошті чи в CRM. Невелика розбіжність нормальна, бо блокувальники реклами й відмова від cookie впливають на збір даних. Велика розбіжність означає, що щось налаштовано не так.

Швидко перевірити, чи стоїть на сайті GTM і GA4, можна нашим інструментом перевірка встановлення аналітики.

Часті помилки

• Рахують клік по кнопці “Надіслати”. Такий клік трапляється і з порожньою формою. У звітах заявок більше, ніж на пошті.
• Вимкнено перевірку дійсності. Той самий результат: рахуються невдалі спроби.
• Активатор на всіх сторінках і всіх формах. Підписка й пошук стають заявками.
• Подвійний облік. Спрацьовують і тег за формою, і тег за сторінкою подяки, або є два контейнери з однаковими тегами.
• Не звіряють із реальними заявками. Реклама навчається на хибних цифрах, а бюджет іде не туди.
• Налаштували й забули. Після оновлення сайту чи зміни плагіна змінюються ID і класи, і облік тихо зникає. Я перевіряю форми після кожного редизайну.

Часті запитання

Чому активатор “Надсилання форми” не спрацьовує?

Найчастіше форма надсилається скриптом без стандартної події браузера, тому GTM її не бачить. Ще одна причина: увімкнено перевірку дійсності, а скрипт сайту скасовує стандартну подію. Спробуйте спосіб із видимістю елемента або dataLayer.

Як відстежити форму в iframe?

З контейнера батьківської сторінки ніяк. Потрібно або поставити GTM усередину iframe (якщо це ваш сайт), або скористатися можливостями сервісу: редиректом на сторінку подяки чи передаванням події на батьківську сторінку.

Як відстежити кілька форм на одному сайті?

Зробіть один тег generate_lead і передавайте параметр із назвою форми. Або створіть окремі активатори з умовами за Form ID, але спільний тег простіше підтримувати.

Чи можна одразу передавати заявки в Google Ads?

Так. Або імпортуйте ключову подію з GA4, або поставте на той самий активатор тег конверсії Google Ads. Головне, щоб одна заявка не рахувалася основною конверсією двічі.

Чи потрібна згода користувача?

Це залежить від країни й аудиторії. Для європейських відвідувачів потрібен банер згоди й коректне налаштування режиму згоди, а частину даних через відмови не буде зібрано. Якщо не впевнені, проконсультуйтеся з юристом.

Висновок

Спершу подивіться, що робить форма після надсилання, потім вибирайте найпростіший спосіб, який працює саме у вас: сторінка подяки, “Надсилання форми”, видимість елемента або dataLayer. Надсилайте generate_lead, перевіряйте в режимі попереднього перегляду й звіряйте цифри з реальними заявками.

Якщо не хочете розбиратися в цьому самі, можу налаштувати аналітику за вас. А якщо реклама вже працює і ви сумніваєтеся в цифрах, замовте безплатний експрес-аудит: перевірю акаунт і облік заявок та підкажу, що виправити насамперед. Більше інструкцій на YouTube-каналі.