Блог

← Усі статті

Як відстежувати надсилання AJAX-форм у Google Tag Manager

14 березня 2026

TL;DR: Стандартні тригери GTM Form Submission не працюють з AJAX-формами, оскільки сторінка не перезавантажується. Замість цього використовуйте тригер Click — All Elements на кнопку відправки або тригер Element Visibility на повідомлення про успіх. GTM Event Helper визначає AJAX-форми та автоматично генерує правильний тип тригера.

Ви налаштували тригер Form Submission у GTM. На тестовій сторінці він працює. Ви публікуєте. А потім клієнт повідомляє, що кількість заповнень форм у GA4 — нуль. Проблема? Форма використовує AJAX — і вбудований тригер Form Submission у GTM не виявляє AJAX-надсилання.

Ця стаття пояснює, чому традиційне відстеження форм не працює з AJAX, та пропонує три надійні альтернативи.

Чому стандартні тригери форм не працюють з AJAX?

Тригер Form Submission у GTM слухає нативну подію submit браузера. Коли традиційна форма надсилається, браузер переходить на URL із атрибута action форми — сторінка перезавантажується або перенаправляється. GTM перехоплює цю подію, активує тригер, і тег виконується до вивантаження сторінки.

AJAX-форми порушують цю логіку, тому що:

Тригер Form Submission у GTM може спрацювати, коли користувач натискає «Надіслати», але опція «Check Validation» (яка чекає на фактичне надсилання форми) часто не спрацює, оскільки реальної навігації браузера не відбувається.

Як відстежити AJAX-форму через тригер кліку по кнопці?

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

  1. Знайдіть CSS-селектор кнопки відправки (наприклад, form.contact-form button[type="submit"])
  2. Створіть тригер Click - All Elements
  3. Встановіть умову: Click Element відповідає CSS-селектору form.contact-form button[type="submit"]

Переваги

Недоліки

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

Як використати Element Visibility для відстеження успішної відправки?

Якщо форма показує повідомлення про успіх після надсилання (наприклад, «Дякуємо, ми з вами зв'яжемося!»), ви можете відстежувати момент, коли це повідомлення стає видимим. Це найточніший підхід, оскільки він спрацьовує лише тоді, коли форма дійсно надіслана успішно.

  1. Визначте елемент повідомлення про успіх (наприклад, .form-success-message або #thank-you)
  2. Створіть тригер Element Visibility у GTM
  3. Метод вибору: CSS Selector
  4. Введіть селектор для повідомлення про успіх
  5. Увімкніть «Observe DOM changes» — це критично важливо, оскільки елемент з'являється динамічно

Переваги

Недоліки

Як використати dataLayer.push() для відстеження AJAX-форм?

Якщо ви маєте доступ до вихідного коду сайту (або розробника, який може допомогти), найнадійніший підхід — це надсилання кастомної події в dataLayer GTM, коли AJAX-запит виконується успішно:

// In your form's AJAX success callback:
fetch('/api/submit', { method: 'POST', body: formData })
  .then(response => {
    if (response.ok) {
      dataLayer.push({
        event: 'form_submit',
        form_name: 'contact',
        form_location: 'footer'
      });
    }
  });

Потім створіть тригер Custom Event у GTM, який спрацьовує на подію form_submit.

Переваги

Недоліки

Який метод відстеження AJAX-форм обрати?

Ось дерево рішень:

  1. Ви можете змінювати код сайту? → Використовуйте метод 3 (dataLayer.push). Це золотий стандарт.
  2. Форма показує повідомлення про успіх? → Використовуйте метод 2 (Element Visibility). Найточніший без змін у коді.
  3. Жоден з варіантів? → Використовуйте метод 1 (Form Button Click). Це прагматичний підхід, який працює у 90%+ випадків.

Як популярні фреймворки обробляють AJAX-відправку форм?

React / Next.js

Форми часто використовують контрольовані компоненти з обробниками onSubmit. Кнопка відправки може бути елементом <button> всередині <form> або окремим елементом, який викликає функцію. Перевірте, чи має кнопка type="submit" — у React-формах іноді використовується type="button" з обробником onClick.

HubSpot Forms

HubSpot вбудовує форми в iframe. Тригери GTM не спрацьовують всередині cross-origin iframe. Варіанти: використовуйте вбудовану аналітику HubSpot або слухайте подію message, яку HubSpot надсилає батьківському вікну після надсилання форми.

Gravity Forms (WordPress)

Gravity Forms з увімкненим AJAX надсилають дані через jQuery.ajax(). Після успішного надсилання обгортка форми замінюється елементом .gform_confirmation_message. Використовуйте метод 2 (Element Visibility) з селектором .gform_confirmation_message.

Formspree / Formsubmit.co

Ці сервіси обробляють AJAX-запит і або перенаправляють на сторінку подяки, або показують вбудоване підтвердження. Перевірте конфігурацію форми, щоб визначити, яка поведінка активна.

Як захопити значення полів форми при відстеженні AJAX-форм?

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

Зчитування значень полів у момент надсилання

Створіть змінну Custom JavaScript у GTM, яка зчитує значення поля при спрацюванні тригера:

// GTM Custom JavaScript Variable: "Form - Selected Plan"
function() {
  var el = document.querySelector('select[name="plan"]');
  return el ? el.value : '(not set)';
}

Для текстових полів підхід ідентичний:

// GTM Custom JavaScript Variable: "Form - Company Name"
function() {
  var el = document.querySelector('input[name="company"]');
  return el ? el.value : '(not set)';
}

Потім передайте ці змінні як параметри події у вашому тезі GA4 Event.

Data Layer Variables для складних форм

Якщо ви використовуєте метод 3 (dataLayer.push), включіть значення полів безпосередньо в push:

dataLayer.push({
  event: 'form_submit',
  form_name: 'pricing_request',
  selected_plan: document.querySelector('select[name="plan"]').value,
  form_source: document.querySelector('input[name="utm_source"]').value
});

Потім створіть Data Layer Variables у GTM для selected_plan та form_source — кастомний JavaScript не потрібен.

Конфіденційність: ніколи не надсилайте PII в GA4

Умови використання GA4 забороняють надсилання персональних даних (PII). Ніколи не захоплюйте email-адреси, номери телефонів, повні імена або будь-які дані, що ідентифікують конкретну людину. Якщо вам потрібно відстежувати, чи було заповнене поле (для аналізу воронки), надсилайте булеве значення або хеш:

// Надсилайте чи був email вказаний, а не сам email
email_provided: document.querySelector('input[name="email"]').value ? 'yes' : 'no'

Як відстежувати багатокрокові AJAX-форми?

Багатокрокові форми (візарди, потоки оформлення замовлення, послідовності онбордингу) вимагають відстеження кожного кроку як окремої події. Без цього ви не зможете визначити, де саме користувачі залишають процес.

Конвенція іменування подій

Використовуйте послідовний шаблон іменування, який GA4 зможе розпізнати як воронку:

КрокНазва подіїПараметри
Крок 1: Контактна інформаціяform_stepstep_number: 1, step_name: 'contact_info'
Крок 2: Дані компаніїform_stepstep_number: 2, step_name: 'company_details'
Крок 3: Вибір тарифуform_stepstep_number: 3, step_name: 'plan_selection'
Надсиланняform_submitform_name: 'signup', total_steps: 3

Підхід до реалізації

Для кожного переходу між кроками (зазвичай клік по кнопці "Далі") використовуйте окремий тригер. Якщо форма використовує AJAX для валідації кожного кроку перед переходом, застосовуйте ті самі методи, що й для повного надсилання форми — відстежуйте клік по кнопці або появу контенту наступного кроку.

// dataLayer push при завершенні кожного кроку
dataLayer.push({
  event: 'form_step',
  step_number: 2,
  step_name: 'company_details',
  form_name: 'signup'
});

Візуалізація воронки в GA4

Коли події кроків потраплять у GA4, побудуйте звіт Funnel Exploration: перейдіть до Explore → Funnel Exploration, додайте кожну подію form_step як крок (з фільтром за step_number) і завершіть подією form_submit. Це покаже точний відсоток відмов на кожному кроці — безцінно для оптимізації довгих форм.

Як обробити AJAX-форми з перенаправленням на сторінку подяки?

Деякі AJAX-форми надсилають дані у фоновому режимі, а потім перенаправляють користувача на сторінку підтвердження через JavaScript. Це гібридний патерн — надсилання відбувається через AJAX, але результат виглядає як традиційний редирект.

Патерн з перенаправленням

// Типовий патерн: AJAX-надсилання, потім редирект
fetch('/api/submit', { method: 'POST', body: formData })
  .then(response => response.json())
  .then(data => {
    // Перенаправлення після успішного надсилання
    window.location.href = '/thank-you?ref=' + data.referenceId;
  });

Варіанти відстеження

  1. Тригер Page View на URL сторінки подяки: Створіть тригер, де Page Path містить /thank-you або дорівнює /success. Це найпростіший і найнадійніший підхід для цього патерну.
  2. Захоплення даних форми до редиректу: Якщо редирект відбувається занадто швидко для спрацювання події dataLayer, використовуйте метод кліку по кнопці (метод 1), щоб захопити намір надсилання до редиректу.
  3. URL-параметри на сторінці подяки: Якщо URL редиректу містить параметри (наприклад, ?plan=pro&source=homepage), зчитайте їх за допомогою вбудованих змінних URL у GTM для передачі розширених даних у подію GA4.

Який підхід обрати

Якщо URL сторінки подяки стабільний і передбачуваний, тригер Page View — найпростіше рішення. Якщо вам потрібно захопити дані з самої форми (а не просто факт "надсилання відбулося"), поєднайте тригер Page View з URL-параметрами або використовуйте метод 1 (клік по кнопці) як додаткову подію.

GTM Event Helper визначає, чи форма використовує вбудоване повідомлення про успіх чи редирект, і пропонує відповідний тип тригера — Element Visibility для вбудованих підтверджень, Page View для редиректів або Click для випадків, коли жоден із варіантів не є очевидним.

Як відстежувати AJAX-форми в Shopify та WooCommerce?

E-commerce платформи активно використовують AJAX для взаємодій з кошиком, кроків оформлення замовлення та обробки платежів. Кожна платформа має специфічні селектори та поведінку, які потрібно враховувати.

AJAX-кошик та форми товарів у Shopify

Стандартні теми Shopify надсилають "Додати в кошик" через AJAX за допомогою Cart API (/cart/add.js). Сторінка не перезавантажується — товари додаються у фоновому режимі, а потім з'являється панель кошика або сповіщення.

Для Shopify checkout зверніть увагу, що сторінка оформлення замовлення розміщена на checkout.shopify.com — це інший домен. GTM-контейнери на вашому основному домені не спрацюють там, якщо ви не використовуєте вбудовану розширюваність Shopify checkout або серверний підхід.

Оформлення замовлення та кошик у WooCommerce

WooCommerce використовує jQuery AJAX для обробки замовлень та оновлення кошика. Ключові селектори:

WooCommerce генерує jQuery-події, такі як added_to_cart та updated_cart_totals. Ви можете слухати їх за допомогою тегу Custom HTML, що надсилає дані в dataLayer:

<script>
jQuery(document.body).on('added_to_cart', function(e, fragments, hash, button) {
  dataLayer.push({
    event: 'add_to_cart',
    product_name: button.closest('.product').find('.product-title').text()
  });
});
</script>

Сторонні платіжні віджети

Stripe Elements, PayPal, Apple Pay та Google Pay рендеряться всередині iframe або shadow DOM. Тригери GTM не можуть потрапити всередину cross-origin iframe. Для таких випадків є два варіанти:

  1. Відстежуйте клік по елементу-обгортці навколо платіжної кнопки (за межами iframe)
  2. Використовуйте серверне відстеження — надсилайте подію конверсії з вашого бекенду, коли платіж пройшов успішно, використовуючи Measurement Protocol GA4

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

Як протестувати відстеження AJAX-форм у GTM?

Тестування відрізняється від відстеження кліків, оскільки вам потрібно фактично надіслати форму:

  1. Увімкніть режим Preview у GTM
  2. Заповніть форму тестовими даними
  3. Надішліть форму
  4. У Tag Assistant знайдіть вашу подію (Click, Element Visibility або Custom Event залежно від обраного методу)
  5. Переконайтеся, що тег спрацював і параметри події коректні

Для методу 2 (Element Visibility) перевірте, що повідомлення про успіх з'являється і тригер спрацьовує. Якщо ні — переконайтеся, що «Observe DOM changes» увімкнено. Без цієї опції GTM перевіряє видимість лише при завантаженні сторінки.

GTM Event Helper підтримує всі три типи тригерів: Click, Form Submission та AJAX Form Button Click.

Встановити GTM Event Helper

Зовнішні ресурси

Пов'язані статті

← Усі статті · Головна · Політика конфіденційності · Контакти