Це друга стаття в серії. Перша стаття доступна тут.
Форма — це одна з найважливіших точок конверсії на сайті. І одна з найбільш вразливих. Якщо користувач вводить правильні, як йому здається, дані у форму й отримує помилку — більшість просто закриє сторінку.
Поки ви не відстежуєте, ви не знаєте, скільки людей намагалися відправити форму, і в них не вийшло, бо:
- не змогли вказати номер телефону в правильному форматі;
- пропустили обов’язкове поле, яке ви забули підсвітити «*»;
- заповнили частину форми і, побачивши, що далі чекає ще 10 полів, покинули сайт і т. д.
Трекінг взаємодії з формами допомагає зрозуміти це краще. І цей трекінг можна розділити на дві частини:
- Розуміння воронки взаємодії з формою:
- Відстеження помилок валідації форми для розуміння, де саме форма «ламає» користувача.
У сьогоднішньому матеріалі ми поговоримо і про перше, і про друге.
Як налаштувати відстеження воронки взаємодії з формою в GTM
Класична воронка взаємодії з формою складається з 4 етапів. Кожен із них потребує своїх налаштувань, які я детально розберу нижче. Але перш ніж ми розпочнемо, одне важливе уточнення: для всіх подальших налаштувань я буду використовувати CSS-селектори форми та її елементів. Якщо ви вже знаєте, що це таке, просто проскрольте замітку нижче. Якщо тема для вас нова — обов’язково ознайомтеся з нею.
Що таке CSS-селектори і як їх копіювати
Для того щоб швидко зрозуміти, що таке CSS-селектор, уявіть його як координати елемента на сторінці. Точно так само, як у будь-якої точки на планеті Земля є свої координати, у кожного елемента на вашій сторінці сайту є свій CSS-селектор. І в жодного іншого елемента на сторінці не буде такого самого значення CSS-селектора. На цій логіці і побудований принцип трекінгу в GTM: ми, наприклад, можемо вказати селектор форми в умові і бути впевненими, що лише коли саме ця форма з’являється на екрані користувача, відправляється наша подія.
Для того щоб скопіювати селектор елемента, вам потрібно:
- натиснути на потрібному елементі правою кнопкою миші й обрати пункт Inspect (Перевірити).
Після цього у вас має відкритися DevTools у браузері, і якась частина коду в ньому буде виділена, як у мене на скріні нижче. Виділяється та частина, яка відповідає за елемент, на якому ви клікали правою кнопкою миші. Зверніть увагу, що при наведенні на цей виділений код має також виділятися ваш елемент — це така собі перевірка, що ви все зробили правильно.
Тепер, щоб скопіювати селектор елемента, натисніть уже на потрібному рядку коду правою кнопкою миші й оберіть пункт Copy > Copy Selector.
Важливий нюанс. Деякі елементи на сторінці є досить великими і складаються з декількох інших елементів. Прикладом таких елементів є форми. Вони включають у себе поля для вводу, кнопки і т. д. Для того щоб знайти код, який відповідає за форму, вам потрібно буде трішки пошукати його очима в коді. Він завжди починається з <form. Перевірити себе можна так само, як і з простішими елементами: навестися на код і подивитися, який елемент підсвітився на сторінці. У всьому іншому процес копіювання селекторів для таких елементів аналогічний простим випадкам.
Ви також можете перевірити, чи скопіювали правильний селектор, за допомогою розширення PROANALYTICS. Просто вставте скопійований селектор у відповідне поле і подивіться, який елемент виділився на сторінці. Детальніше про інший корисний функціонал розширення для роботи з даними GA4 читайте тут.
Сподіваюся, на цьому етапі ви вже розумієте, що таке CSS-селектори і як їх копіювати, тому перейдімо до основного.
Крок 1. Як зрозуміти, скільки користувачів бачило форму на сайті
Для цього нам знадобиться тригер Element Visibility, щоб відстежити момент, коли форма потрапляє у видиму область екрана користувача, та тег, щоб відправити цю подію до GA4.
Налаштування тригера:
- У Selection Method оберіть CSS Selector.
- У полі Element Selector вкажіть селектор своєї форми.
- (Опціонально) Додайте в блоці This trigger fires on фільтр, щоб тригер спрацьовував тільки на сторінках, де є форма.
- Не забудьте вказати назву і зберегти.
Налаштування тегу:
- У полі Measurement ID вкажіть Measurement ID вашої GA4.
- Як назву події вкажіть form_view.
- Додайте тригер, який ми створили раніше.
- (Опціонально) Якщо на сайті декілька форм, у параметрі form_name можна передавати назву форми.
Усі теги для передачі даних у GA4 для всіх 4 наших етапів взаємодії з формою однакові за налаштуваннями, змінюється лише назва події, тому надалі я буду просто додавати скрін налаштувань. Звертайте увагу на назву події.
Перший крок готовий, йдемо далі.
Крок 2. Як відстежити, скільки користувачів почало заповнювати форму?
Цей етап нашого налаштування буде одним із найскладніших. Але я залишу пояснення, що і чому ми використовуємо.
Перш за все, оскільки в GTM немає вбудованого тригера, який спрацьовує в момент початку заповнення форми, нам знадобиться тег Custom HTML, у який потрібно додати наступний JavaScript-код.
<script>
(function() {
var formSelector = 'YOUR_SELECTOR';
var form = document.querySelector(formSelector);
if (form) {
form.addEventListener('change', function() {
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'form_start'
});
});
}
})();
</script>Цей код буде передавати інформацію в dataLayer у потрібний нам момент. Єдине, що вам потрібно в ньому змінити, — це вказати замість YOUR_SELECTOR CSS-селектор вашої форми. Фінальні налаштування тегу будуть виглядати так:
Де тригер — це DOM Ready без жодних додаткових умов.
Якщо вам потрібно, можна також додати фільтр по сторінках, щоб код спрацьовував тільки на сторінках, де є форма. Тоді налаштування тригера будуть виглядати так (з умовою лише для головної сторінки):
Наш код із попереднього тегу в момент, коли користувач починає заповнювати форму, передає в dataLayer подію form_start. Саме на неї ми і налаштуємо тригер для передачі даних до GA4.
І наостанок тег для передачі даних до GA4. Назва події — form_start.
Вітаю, першу половину налаштувань пройдено.
Крок 3. Скільки відвідувачів натискало на кнопку Відправити
Це найпростіший крок. Нам знадобиться тригер типу Click - All Elements і тег для передачі події до GA4.
У налаштуваннях тригера вкажіть додаткову умову: змінна {{Click Element}} відповідає CSS-селектору [Вкажіть селектор кнопки вашої форми].
Теж як зазвичай. Назва події — form_submit_click.
Крок 4. Скільки успішних відправок форми було зафіксовано
Цей крок має важливу особливість: незалежно від технологій, які використовуються при розробці вашої форми, усі три попередні кроки завжди будуть однакові. Вам потрібно лише вставляти відповідні селектори. Але на цьому етапі дуже важливо розуміти, як зроблена ваша форма. Для демонстраційних цілей я використовую просту форму, яка відстежується через тригер Form Submission, але у вас можуть бути складніші випадки, тому я залишаю тут лінки на свої інші матеріали про відстеження успішної відправки форми:
- Відстеження відправки форми за допомогою базового тригера GTM
- Відстеження відправки форми за допомогою тригера Видимість елемента
- Робота зі спеціальними подіями в Google Tag Manager. Тег автоподії
- Відстежуємо взаємодію користувачів із формами за допомогою Google Tag Manager
Який би спосіб не підійшов під вашу форму, у вас завжди буде тригер і тег. У моєму випадку вони виглядатимуть так.
Налаштування тригера:
Налаштування тегу:
Налаштування воронки взаємодії користувача з формою в GA4
Залишилося найцікавіше — візуалізувати наші дані. Для цього:
перейдіть до GA4 у блок Explore (Дослідити) і виберіть порожнє дослідження:
2. Оберіть техніку Funnel exploration.
3. Оберіть пункт Steps.
4. І пропишіть у кроки відповідні назви подій, які ми налаштували раніше. Якщо ви повторювали назви за мною, це буде виглядати так:
Натисніть Apply у правому верхньому куті. Тепер залишилося дочекатися, поки зберуться перші дані, і ви побачите щось таке:
Детальніше про роботу з воронками в GA4 я вже писав у статті — Аналіз послідовностей у Google Analytics 4: розширена інструкція по воронках.
Вітаю! Тепер ви знаєте, на якому етапі взаємодії з формою ваші користувачі зупиняються. Насправді цю воронку можна було б ще деталізувати глибше і відстежувати заповнення кожного окремого поля форми. Але про це якось іншим разом. А зараз ми розберемо інший важливий момент.
Як налаштувати відстеження помилок під час заповнення форми за допомогою GTM?
Думаю, усі ви помічали під час заповнення форми зазвичай червоні підписи, які інформують вас про те, що ви ще не заповнили або де зробили помилку. Щось типу такого:
Так от, вони несуть користь не тільки для користувача, який заповнює форму, але й можуть підсвітити вам цікаві інсайти, якщо зібрати цю інформацію і проаналізувати. Наприклад, можна побачити, які помилки користувачі зустрічають найчастіше, і спробувати перепроєктувати форму, щоб зменшити їх кількість.
Спочатку знайдіть CSS-клас повідомлення про помилку/помилки. Як шукати потрібний селектор, я писав вище. Єдине, що додам: якщо селекторів декілька, біля кожного поля форми, ви можете перерахувати їх у тригері через кому.
Тепер навчимо GTM реагувати в той самий момент, коли це повідомлення з’являється на екрані користувача. Для цього нам знадобиться тригер типу Element Visibility (Видимість елемента):
- Selection Method змініть на CSS Selector.
- У полі Element Selector вставте селектор/селектори елемента з помилкою.
- У розділі When to fire this trigger (Коли активувати цей тригер) оберіть Every time an element appears on screen (Щоразу, коли елемент з’являється на екрані). Це потрібно на випадок, якщо користувач помилиться кілька разів поспіль.
- Поставте галочку навпроти Observe DOM changes (Реєструвати зміни DOM). Це важливо, адже помилка з’являється динамічно, без перезавантаження сторінки, і без цієї галочки GTM її проґавить.
- Додайте назву тригера і не забудьте зберегти.
Залишився фінальний крок — запакувати дані та відправити в аналітику.
- Перейдіть у Tags (Теги) та створіть новий тег типу Google Analytics: GA4 Event.
- У полі Event Name (Назва події) напишіть: form_validation_error.
- У блоці Event Parameters (Параметри події) як назву параметра вкажіть error_text, а як значення — змінну {{Click Text}}.
- У розділі Triggering оберіть тригер, який ми створили вище.
- Назвіть тег: GA4 - Event - Form Validation Error та збережіть.
Передавати як параметр події сторінку, на якій відбулася помилка, немає сенсу, оскільки GA4 відстежує цю інформацію з кожною подією самостійно. А от передавати назву форми в умовний параметр form_name, якщо у вас на сайті декілька форм, має сенс.
Чекаут-помилки
Сторінка оплати — найдорожча точка конверсії. Людина вже прийняла рішення купити, ввела дані картки, натиснула Оплатити — і отримала помилку. Це найбільш болюче місце для бізнесу: втрата тут означає не просто відмову від перегляду товару, а прямі втрати виручки.
Помилки на чекауті можуть виникати з різних причин — неправильно введені дані картки, проблеми з платіжним шлюзом, технічні збої. GTM саме дозволяє зафіксувати ці події і зрозуміти масштаб проблеми.
Кроки налаштування трекінгу помилок на чекауті в GTM
Налаштування ідентичні попередньому кроку. Цей блок я додав у статтю лише для того, щоб ви зрозуміли, що застосування описаних у матеріалі підходів не обмежується лише формою реєстрації: існує багато інших випадків, де це буде корисним. Для налаштування вам знову треба знайти елемент повідомлення про помилку.
Відкрийте сторінку оформлення замовлення, введіть свідомо неправильні дані (наприклад, неправильний номер картки). Коли з’явиться повідомлення про помилку — клікніть на нього правою кнопкою → Inspect і знайдіть CSS-селектор елемента.
- Перейдіть у Triggers (Тригери) та оберіть тип Element Visibility (Видимість елемента).
- Selection Method змініть на CSS Selector.
- У полі Element Selector вставте свій селектор.
- У розділі When to fire this trigger (Коли активувати цей тригер) — Every time an element appears on screen (Щоразу, коли елемент з’являється на екрані). Це потрібно на випадок, якщо користувач помилиться кілька разів поспіль.
- Поставте галочку навпроти Observe DOM changes (Реєструвати зміни DOM).
- Назвіть тригер та збережіть.
Для передачі даних до GA4 знадобиться звичний тег Google Analytics: GA4 Event. У полі Event Name (Назва події) напишіть: checkout_error. І за аналогією з попереднім прикладом не забудьте додати параметр події error_text зі значенням {{Click Text}}.
Не забудьте опублікувати зміни.
Замість висновку
Підходи, описані в цій та попередній статті серії, актуальні не лише для великих e-commerce-проєктів чи складних продуктів. Вони важливі для будь-якого сайту, де є точки взаємодії з користувачем: форми, кнопки, заявки, реєстрації, оформлення замовлень або будь-які інші подібні сценарії.
Особливо це актуально зараз, в епоху вайбкодингу. Сьогодні користувачі без глибокого технічного досвіду можуть швидко створювати лендинги, сайти й навіть повноцінні продукти. Це відкриває багато можливостей для бізнесу, але водночас створює нові ризики: частина функціоналу може бути недотестована, окремі сценарії — працювати нестабільно, а помилки — залишатися непоміченими до того моменту, поки вони вже не почнуть впливати на заявки, продажі та довіру користувачів.
І саме через такі швидкі, але надійні рішення, як описані тут, Google Tag Manager не втрачає актуальності. Навпаки — його роль стає ще важливішою. GTM дозволяє швидко й гнучко налаштовувати трекінг без постійного залучення розробників, перевіряти критичні точки взаємодії на сайті, фіксувати технічні проблеми та передавати ці дані в GA4 для подальшого аналізу.
Відстеження взаємодії з формами — це не просто ще один набір подій в аналітиці. Це спосіб побачити, де саме користувачі зупиняються, що їм заважає залишити заявку і які помилки можуть коштувати бізнесу реальних грошей. Коли ви бачите не лише факт успішної відправки форми, а всю воронку до цього моменту, у вас з’являється значно більше можливостей для оптимізації.
Ну а якщо ви хочете глибше розібратися, як працювати з Google Tag Manager, GA4, кастомними подіями та складнішими сценаріями трекінгу, більше практичних прикладів і рішень я детально розбираю на курсі PRO GTM. Там ви навчитеся не просто «ставити теги», а будувати систему аналітики, яка допомагає знаходити проблеми, покращувати користувацький досвід і приймати рішення на основі даних.
Завантаження коментарів…