Позначка: Урок 03

У цьому матеріалі крок за кроком розберем, як налаштовувати події для Google Analytics через Google Tag Manager. Створимо дві базові події, які знадобляться в більшості проєктів: подію клік на кнопку та подію відправки форми (реалізовану через сторінку подяки). Зрозуміємо, чому так краще робити, на що звертати увагу при налагодженні, як тестувати і як уникнути типових помилок.

Що налаштовуємо і навіщо

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

Ми зробимо дві основні події:

• Клік на кнопку “Замовити” або аналог — відстеження переходу на оплату чи початку взаємодії.
• Відправка форми — відстеження реальної заявки. Реалізуємо це через сторінку подяки (thank you page), щоб уникнути помилкових спрацьовувань.

Чому саме так? Бо клік по кнопці — це часто лише намір користувача, але не гарантія, що заявка створена (поля можуть бути пусті, форма валідована на клієнтській стороні тощо). Тому найточніше відстежувати фактичну відправку — сторінка подяки є надійним маячком: якщо користувач потрапив туди, заявка дійсно відправлена.

Передумови: що має бути налаштовано

Перед тим як почати, переконайтеся, що у вас є:

• Google Analytics 4 (GA4) — створене джерело даних / поток даних (data stream) для вашого сайту.
• Google Tag Manager (GTM) — контейнер встановлений на сайті.
• Доступ до редагування сайту, щоб при потребі додати редирект або створити сторінку подяки.

Якщо GA4 та GTM ще не підключені, спочатку зробіть це. Без правильної інтеграції події не потраплять у ваші звіти.

План роботи

1. Визначити, які події потрібно відслідковувати.
2. У GTM створити теги для відправки подій у GA4.
3. Налаштувати тригери: клік по певному елементу (через клас елемента) та перегляд сторінки з URL, що містить “подяка”.
4. Протестувати у режимі попереднього перегляду GTM, виправити помилки.
5. Опублікувати контейнер GTM.
6. Почекати появи подій у GA4 або перевіряти в Realtime/DebugView.

Крок 1. Підготовка: де шукати ідентифікатор GA4

Перш за все нам потрібен ідентифікатор потоку даних в GA4. Щоб його взяти:

1. Відкрийте Google Analytics 4.
2. Заходьте в адмін-панель (Admin) — обираєте ваш аккаунт і власність.
3. Переходьте в Data Streams (потоки даних) і відкриваєте потік для вашого вебсайту.
4. Копіюєте Measurement ID (виглядає як G-XXXXXXXXXX).

Цей ідентифікатор потрібно вставити в тег GA4 у GTM. У відео я вставляв його безпосередньо в тег події — так теж працює, але часто роблять окремий тег GA4 Configuration з цим ID, аби не дублювати налаштування в кожному тегі.

Крок 2. Налаштування тега в GTM для події “Клік на кнопку”

Тепер переходимо у Google Tag Manager:

1. Відкрийте контейнер вашого сайту в GTM.
2. Перейдіть в Tags і натисніть Create.
3. Назвіть тег інформативно, наприклад: GA4 — Event — Замовити (головна).
4. В конфігурації тега обирайте Google Analytics: GA4 Event (Google Analytics: GA4 Event).
5. Вставте Measurement ID у поле Measurement ID або оберіть раніше створений GA4 Configuration тег.
6. В полі Event Name впишіть назву події, наприклад: zamovyty або order_click. Важливо: назва події буде такою ж у GA4, тому робіть її зрозумілою та консистентною.
7. При потребі додайте Event Parameters (наприклад, button_text, page_location) — це допоможе у звітах.

Тепер читаємося: що має викликати цей тег? Триггер.

Налаштування тригера: клік на елемент

Ми хочемо спрацьовувати, коли користувач клікає на конкретну кнопку. Найнадійніший спосіб — відрізнити кнопку за класом елемента або іншим атрибутом. Що робити:

1. В редакторі сайту або на сторінці сайту натисніть правою кнопкою миші на кнопку і оберіть Inspect (Інспектувати) в браузері. Відкриється DevTools і ви побачите HTML-структуру кнопки.
2. Знайдіть атрибут class або інший унікальний атрибут. Скопіюйте значення класу без лапок.
3. В GTM створіть новий Trigger — тип Click – All Elements (Клік — усі елементи).
4. Оберіть This trigger fires on Some Clicks (тільки певні кліки).
5. Додайте умову: Click Classes contains [вставте скопійоване значення].
6. Збережіть тригер і прив’яжіть його до тега події “Замовити”.

Чому саме Click Classes contains? Тому що це робить налаштування гнучким: навіть якщо клас має додаткові значення чи префікси, умова contains спрацює. Не використовуйте чутливі селектори, які можуть змінитися при невеликому редизайні сайту.

Крок 3. Перевірка: Variables і DevTools

Перш ніж тестувати, переконайтеся, що в GTM увімкнені built-in variables для кліків. Це дасть вам доступ до Click Classes, Click ID, Click Text, Click URL тощо в дебаг-режимі.

Щоб увімкнути:

1. Перейдіть в Variables — Built-In Variables — Configure.
2. Позначте варіанти з групи Clicks: Click Element, Click Classes, Click ID, Click Target, Click Text, Click URL.

Тепер відкрийте Preview (Попередній перегляд) у GTM, введіть URL вашого сайту та підключіться. Відкриється DebugView, і ваш сайт відкриється в новому вікні з підключеним GTM Debugger.

Далі виконайте на сайті кліки по всіх елементах, які вас цікавлять, і в DebugView перевіряйте, які події фіксуються (link_click, click тощо) і які змінні передаються. Дуже часто буває так, що при першому інспектуванні ви скопіювали неправильний клас або він був скороченим. Тестуйте — і якщо не спрацьовує, дивіться в DebugView, яка саме Click Classes передається.

Провали та як їх вирішувати

Типові проблеми при налаштуванні кліків і як їх вирішувати:

• Тег не спрацьовує: перевірте, чи ви опублікували контейнер, чи правильно вставили Measurement ID, чи тригер прив’язаний до тега.
• Click Classes не той: відкрийте DevTools на живій сторінці, натисніть кнопку і дивіться точне значення Click Classes у debug. Скопіюйте саме його.
• Клік фіксується, але не відправляється подія в GA4: перевірте, чи немає дублювання Analytics (наприклад, якщо вбудований analytics на сайті також відправляє дані). Можливо треба вимкнути вбудований або дублірувати налаштування через GTM обережно.
• Подія спрацьовує кілька разів: це нормально для кликів (людина шматами клікає). Якщо потрібно підраховувати лише унікальні події, подумайте про додаткову логіку з локацією або встановленням прапора через cookie/localStorage.

Крок 4. Чому не варто рахувати відправку форми як кліки

Одна з помилок початківців — налаштовувати подію “відправка заявки” як клік по кнопці відправки. Це дає хибні дані, тому що користувач може клікнути на кнопку, але форма не буде відправлена (незаповнені поля, валідація, користувач передумав тощо).

Наслідок: ви можете бачити сотні “заявок” у звітах, а реальних заявок — мало. Це вводить в оману замовників і призводить до хибних рішень по оптимізації реклами.

Кращі підходи для відстеження реальної відправки форми:

• Перенаправлення на сторінку подяки (thank you page) після успішної відправки — найнадійніший метод.
• Використовувати спеціальний trigger Form Submission або custom event, коли форма дійсно надсилається. На деяких платформах є вбудований тригер для цього.
• Якщо форма відправляється через AJAX і немає редиректу, налаштуйте подію, яка спрацьовує після успішного AJAX-відповіді (потрібна взаємодія з розробником або можливість вставити кастомний dataLayer.push).

Крок 5. Створення сторінки подяки і налаштування редиректу

Я рекомендую використовувати сторінку подяки як основний маркер успішної заявки. Найчастіше це просто сторінка з повідомленням “Дякуємо за реєстрацію” і унікальною частиною URL, наприклад: /thank-you або /dякуємо.

Процес:

1. Створіть нову сторінку на сайті: “Сторінка подяки”. Надайте їй простий і унікальний URL.
2. У налаштуваннях форми встановіть дію після відправки: Redirect to URL і вкажіть URL сторінки подяки.
3. Опублікуйте зміни на сайті.

Після цього, коли користувач успішно відправить форму, його переадресує на унікальний URL. Це дає нам простий спосіб фіксувати факт заявки через перегляд конкретної сторінки.

Крок 6. Налаштування тригера для сторінки подяки

У GTM створюємо тригер, який спрацьовуватиме при перегляді саме тієї сторінки подяки:

1. Створіть новий Trigger — тип Page View.
2. Виберіть Some Page Views (тільки деякі перегляди).
3. Додайте умову: Page URL contains /thank-you або інша частина URL, яка однозначно відповідає сторінці подяки.
4. Збережіть тригер.

Чому contains, а не equals? Це робить налаштування більш гнучким у випадку мульти-мовних сайтів або додаткових параметрів в URL. Наприклад, якщо у вас буде /thank-you?lang=ua, contains все одно спрацює.

Крок 7. Тег GA4 для сторінки подяки

Тепер створимо тег, який надішле подію в GA4 при потраплянні на сторінку подяки:

1. Створіть новий Tag — Google Analytics: GA4 Event.
2. Вкажіть Measurement ID або оберіть GA4 Configuration.
3. У Event Name напишіть, наприклад: form_submit або thank_you_page.
4. Додайте параметри події, якщо потрібно: form_id, page_title, source тощо.
5. Прив’яжіть тригер Page View — contains /thank-you.
6. Збережіть тег.

Таким чином, коли користувач потрапить на сторінку подяки, у GA4 з’явиться подія, яку пізніше можна позначити як конверсію.

Крок 8. Тестування в режимі попереднього перегляду

Тестувати треба обов’язково. Працюйте в такій послідовності:

1. У GTM натисніть Preview та введіть URL вашого сайту.
2. У DebugView виконайте дії: клік на кнопки, заповнення форми і відправку (або симуляцію редиректу на сторінку подяки).
3. Відстежуйте в панелі попереднього перегляду, які теги спрацьовують і які змінні передаються.
4. Якщо тег не спрацював — дивіться, які події фіксуються у DebugView, яка саме Click Classes або яка Page URL приходить.

Часто буває так, що ви думаєте: зробив клас A, спрацює в GTM. А в DebugView бачите зовсім інший рядок. Тому тестуйте реальні кліки, коректуйте селектори і повторюйте.

Приклад реального налагодження: коротка історія

Ось приклад з практики, який часто повторюється. Я налаштовую клік на кнопку “Замовити”. Спочатку скопіював клас кнопки з HTML, вставив у тригер, перейшов у Preview. Кнопка не спрацьовує. Я відкриваю DevTools і бачу, що під час кліку Click Classes передається скорочене або трохи інше значення, ніж те, що я скопіював раніше з коду. Я копіюю правильне значення з DebugView, змінюю тригер і тестую знову — тепер тег спрацьовує. Такі тестові ітерації потрібно зробити кілька разів.

Ще один момент: вбудована аналітика платформи

Багато конструкторів сайтів мають власні налаштування для Google Analytics. Якщо аналітика вже підключена в конструкторі (через поле для Measurement ID), і ви одночасно налаштовуєте події через GTM, можна отримати дублікати подій. Важливо вирішити, який механізм ви використовуєте:

• Якщо працюєте повністю через GTM — вимкніть стандартне поле для підключення GA в налаштуваннях конструктора (якщо є така опція).
• Якщо залишаєте вбудовану аналітику, пам’ятайте, що події можуть дублюватися або мати затримку. У такому випадку використовуйте GTM для кастомних подій, але уважно перевіряйте дублювання.

Особливо це актуально для платних модулів в конструкторах. Деякі функції (наприклад, можливість вказати посилання для кнопки) доступні лише у Pro-версії. Якщо ви не маєте Pro, можливо, доведеться шукати обхідні шляхи або тимчасово підключити інші методи.

Що робити після налаштування в GTM

Після публікації контейнера в GTM події почнуть надходити в GA4. Але не одразу з’являться в інтерфейсі звітів. Ось що робити далі:

• Перевірте Realtime та DebugView в GA4 — події мають з’являтися там швидше за все.
• У розділі Events подій може ще не бути; нові події зазвичай з’являються протягом 24-48 годин. Іноді швидше, іноді довше.
• Після того, як подія з’явилася у списку Events, ви можете позначити її як Conversion (переключити тумблер) — тоді вона почне відображатися у Conversion-звітах.
• Якщо ви плануєте використовувати ці події для оптимізації реклами в Google Ads, зробіть зв’язок між GA4 і Google Ads та імпортуйте події як конверсії.

Скільки часу потрібно на повну налаштування аналітики

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

• 1-2 дні — сам процес налаштування GTM, тегів, тригерів, тестування.
• 1-2 дні — очікування появи подій у GA4 для того, щоб ви могли їх офіційно позначити як конверсії.
• плюс додатковий час на тестування, корекції, перевірку інтеграції з Google Ads.

Тому закладайте 3-4 робочі дні на повноцінну роботу з аналітикою. Це дозволить не поспішати, перевірити все в реальному трафіку і уникнути помилок.

Передача подій у рекламний кабінет Google Ads

Коли події коректно приходять у GA4 і позначені як конверсії, наступний крок — передати їх у Google Ads для оптимізації кампаній:

1. Встановіть зв’язок між GA4 і Google Ads в адмінці GA4 або в налаштуваннях Google Ads (Account linking).
2. В Google Ads імпортуйте конверсії з Google Analytics 4 — оберіть ті події, які ви хочете використовувати для оптимізації.
3. Почекайте деякий час, доки дані почнуть потрапляти в Ads. Після цього ви зможете оптимізувати кампанії на потрібні події (наприклад, на сторінку подяки — фактичні заявки).

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

Поради по найкращим практикам

• Називайте теги та тригери зрозуміло і консистентно. Наприклад, GA4 — Event — form_submit_homepage. Це допомагає орієнтуватись через місяць.
• Використовуйте параметри подій (event parameters): page_location, button_text, product_id тощо для гнучких звітів у GA4.
• Тестуйте в Preview перед публікацією. Ніколи не публікуйте нові теги без тестування залежних сценаріїв.
• Слідкуйте за дублюванням: не підключайте GA через GTM і вбудований спосіб одночасно, якщо не розумієте, чому це потрібно робити.
• Будьте обережні з лічильниками: клікові події можуть реєструватися багато разів. Для підрахунку унікальних конверсій використовуйте сторінку подяки або server-side tracking.
• Документуйте налаштування. Якщо з вами працюють інші маркетологи або підрядники, документ допоможе швидко зрозуміти, що і як налаштовано.

Коли використовувати Form Submission trigger замість сторінки подяки

На деяких платформах в GTM є спеціальний тригер Form Submission. Його можна використовувати, якщо:

• Форма не робить редирект на іншу сторінку (AJAX).
• Платформа надійно генерує подію submit у DOM після успішної відправки.

Але цей метод може бути нестабільним, якщо форма має кастомну логіку або фронтенд-валідатори. Часто все одно надійніше робити redirect на thank-you page або використовувати dataLayer.push у callback’у успішної відправки (це найточніший спосіб для AJAX-форм).

Реальні кейси і деталі, які варто знати

Нижче кілька практичних кейсів і рекомендацій, заснованих на досвіді:

• Якщо у вас кілька продуктів з кнопкою “Замовити” на різних сторінках — додавайте до події параметр product_id чи page_path, щоб розрізняти джерела.
• Для платних кнопок оплати (Stripe, PayPal, Fondy, WayForPay) часто буває корисно трекати перехід на платіжну сторінку. Це можна зробити як клік на кнопку, або як перегляд URL платіжного процесу, якщо він відкривається в окремому вікні.
• Якщо продаєте міжнародно, будьте обережні з текстовими селекторами (button text). Краще відрізняти кнопки за класами або data-атрибутами, бо текст змінюється мовами.
• Якщо на сайті є багато JavaScript, іноді події спрацьовують із затримкою. Використовуйте DebugView та логи, щоб зрозуміти, коли краще відправляти подію.

Підсумки та чек лист

Підсумовуючи, ось короткий чек лист для швидкої роботи:

1. Переконатися, що GA4 і GTM підключені до сайту.
2. Визначити події: клік на кнопку, відправка форми (через сторінку подяки або form submit).
3. У GTM увімкнути Built-In Variables для Clicks і Forms.
4. Створити тег GA4 Event для кліку; налаштувати Measurement ID і Event Name.
5. Створити тригер Click All Elements + filter Click Classes contains ‘your-class’.
6. Створити сторінку подяки і налаштувати редирект після успішної форми.
7. Створити тег GA4 Event для сторінки подяки з тригером Page URL contains ‘/thank-you’.
8. Тестувати через Preview, перевіряти DebugView, коригувати селектори.
9. Опублікувати контейнер GTM після вдалого тестування.
10. Перевіряти події в GA4 Realtime/DebugView і чекати 24-48 годин для стабільного відображення в Events.
11. Після появи подій у GA4 — позначити як Conversion та імпортувати в Google Ads, якщо потрібно.

Рекомендації

Маркетингові налаштування аналітики — це не однаразова дія, а процес. Ви робите базове налаштування, тестуєте, дивитесь на реальні дані, коригуєте. На моєму практичному досвіді найчастіше саме тестування і тюнінг займають найбільше часу.

Також рекомендую:

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

Що далі

Після того як події налаштовано та перевірено, наступний логічний крок — підключити Google Ads і використовувати ці події для оптимізації кампаній. Також можна додати більше подій: перегляди ключових сторінок, додавання в корзину, початок оформлення тощо. Ми поступово розглянемо ці сценарії в наступних уроках.

Пам’ятайте: аналітика — це інструмент. Правильно налаштований інструмент дає точні дані, які допомагають приймати правильні маркетингові рішення.