Блог

← Усі статті

Як відстежувати кліки по кнопках у Google Tag Manager без написання коду

14 березня 2026

TL;DR: Щоб відстежувати кліки по кнопках у GTM без коду, створіть тригер Click — All Elements з умовою CSS-селектора (надавайте перевагу data-атрибутам та стабільним класам), а потім прикріпіть тег GA4 Event. GTM Event Helper автоматизує це: клікніть на елемент, отримайте стабільний селектор і створіть тригер + тег через GTM API в один крок.

Відстеження кліків по кнопках — це основа подієвої аналітики. Кожен клік на "Додати в кошик", "Зареєструватися" або "Замовити демо" розповідає щось про наміри користувача. Google Tag Manager (GTM) дозволяє відстежувати ці кліки без внесення змін до вихідного коду сайту — але в налаштуванні є підводні камені, на які натрапляють навіть досвідчені маркетологи.

Цей гайд описує повний робочий процес: увімкнення вбудованих змінних, пошук правильного CSS-селектора, створення тригера, побудова тегу GA4 та тестування всього в Tag Assistant.

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

Перш ніж GTM зможе фіксувати дані про кліки, потрібно увімкнути вбудовані змінні кліків. Перейдіть до Variables у вашому робочому просторі GTM, натисніть Configure і позначте ці пункти в розділі "Clicks":

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

GTM Event Helper автоматично вмикає Click Element, Click Classes та Click ID, коли ви обираєте робочий простір. На один крок менше, про який можна забути.

Як знайти стабільний CSS-селектор для моєї кнопки?

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

Найкраще: Data-атрибути

Атрибути на кшталт data-testid, data-cy або data-analytics додаються спеціально для тестування чи відстеження. Вони не змінюються при оновленні стилів.

button[data-testid="signup-cta"]

Добре: Семантичні атрибути

Атрибути role, name та aria-label пов'язані з доступністю, тому зазвичай залишаються стабільними:

button[name="subscribe"]
a[aria-label="Get started"]

Прийнятно: Стабільні класи та ID

Зрозумілі людині імена класів на кшталт .btn-signup або ID на кшталт #hero-cta працюють — за умови, що вони не згенеровані CSS-in-JS фреймворком.

#hero-cta
.pricing-section .btn-primary

Уникайте: Згенеровані ідентифікатори

Інструменти CSS-in-JS (styled-components, emotion, CSS modules) генерують класи на основі хешів, як-от .sc-bdfBQR або .css-1a2b3c. Вони змінюються при кожному білді. Аналогічно, React і Angular генерують випадкові ID, що виглядають як r:abc123 або ng-c1234567890.

Механізм селекторів GTM Event Helper автоматично відфільтровує хеші CSS-in-JS та випадкові ID, показуючи позначку стабільності (Stable / May change) для кожного варіанта селектора.

Який тип тригера GTM використовувати для кнопок?

GTM пропонує два типи тригерів кліків:

Для відстеження кнопок використовуйте All Elements з умовою спрацювання. Саме в умові застосовується ваш CSS-селектор:

  1. Створіть новий тригер → Click - All Elements
  2. Встановіть "This trigger fires on" на Some Clicks
  3. Умова: Click Element → matches CSS selector → ваш селектор (наприклад, .hero-section .btn-cta)

Оператор "matches CSS selector" потужний, оскільки використовує нативний метод браузера element.matches() — він обробляє селектори нащадків, селектори атрибутів та псевдокласи.

Відстеження однієї кнопки vs. групи кнопок

Якщо ви відстежуєте одну конкретну кнопку, використовуйте точний селектор. Якщо хочете відстежувати всі CTA-кнопки на сторінці, використовуйте ширший селектор на кшталт .btn-cta і розрізняйте їх за допомогою змінної Click Text як параметра події у вашому тегу GA4.

Як створити тег GA4 Event для кліків по кнопках?

Коли тригер готовий, створіть тег:

  1. Новий тег → Google Analytics: GA4 Event
  2. Оберіть ваш тег конфігурації GA4 (або введіть Measurement ID)
  3. Event Name: використовуйте описову назву у форматі snake_case — наприклад, click_hero_signup
  4. Додайте параметри події:
    • button_text → {{Click Text}}
    • button_location → статичне значення, наприклад "hero" або "pricing"
  5. Встановіть тригер — тригер кліку, створений на кроці 3

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

GA4 має обмеження в 40 символів для назв подій та ліміт у 500 унікальних назв подій на один ресурс. Використовуйте послідовний шаблон:

click_{section}_{action}
click_hero_signup
click_nav_pricing
click_footer_contact

Це значно полегшує фільтрацію та звітність у звітах GA4 Explore.

Як протестувати відстеження кліків у Tag Assistant?

Перед публікацією:

  1. Натисніть Preview у GTM, щоб запустити Tag Assistant
  2. Перейдіть на ваш сайт — панель налагодження Tag Assistant завантажиться внизу екрана
  3. Натисніть цільову кнопку
  4. У часовій шкалі Tag Assistant ви повинні побачити подію Click
  5. Натисніть на неї — перевірте, чи спрацював ваш тег у розділі "Tags Fired", та перегляньте умови тригера
  6. Якщо тег не спрацював, перевірте розділ "Tags Not Fired", щоб побачити, які умови не виконались

Типові проблеми при налагодженні

Як опублікувати зміни в GTM?

Коли тестування підтверджує, що тег спрацьовує правильно з потрібними параметрами, опублікуйте версію робочого простору. Дайте їй описову назву: "Add click tracking: hero CTA" — ви подякуєте собі в майбутньому, коли переглядатимете версії контейнера.

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

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

Стратегія 1: Спільний CSS-клас. Якщо ваші розробники додають спільний клас на кшталт .btn-cta до всіх CTA-кнопок, створіть один тригер із селектором .btn-cta. Потім у тегу GA4 Event передайте {{Click Text}} як параметр button_text та {{Click URL}} як button_url. Один тригер, один тег — кожен клік по CTA зафіксований із повним контекстом.

Стратегія 2: Data-атрибути. Попросіть команду розробників додати data-analytics="cta" до кнопок, які потрібно відстежувати. Селектор тригера стає [data-analytics="cta"]. Це навіть надійніше за селектори на основі класів, бо data-атрибути існують виключно для відстеження і не зміняться під час редизайну.

Приклад налаштування:

Trigger: Click - All Elements
Condition: Click Element matches CSS selector [data-analytics="cta"]

GA4 Event Tag:
  Event Name: click_cta
  Parameters:
    button_text  → {{Click Text}}
    button_url   → {{Click URL}}
    page_section → {{Click Element}} (використайте Custom JS variable
                    для отримання атрибута data-section)

Ця єдина пара тригер-тег замінює десятки окремих налаштувань. У GA4 ви зможете розбити події click_cta за button_text та page_section, щоб побачити, які саме кнопки генерують залученість.

Як надсилати дані кліків по кнопках у Google Ads?

Кліки по кнопках часто є мікро-конверсіями (кліки CTA, "Додати в кошик", "Замовити демо"), під які Google Ads може оптимізувати. Є два підходи: прямий тег Google Ads Conversion або імпорт конверсій через GA4.

Варіант A: Тег Google Ads Conversion у GTM

  1. У Google Ads перейдіть до Goals → Conversions → New conversion action → Website
  2. Скопіюйте Conversion ID та Conversion Label
  3. У GTM створіть тег Google Ads Conversion Tracking
  4. Вставте Conversion ID та Label, встановіть значення конверсії за потреби
  5. Прикріпіть той самий тригер кліку, що й для GA4

Варіант B: Імпорт ключових подій GA4

  1. Позначте вашу подію кліку GA4 як ключову подію (Admin → Events → перемикач)
  2. Зв'яжіть GA4 з Google Ads (Admin → Google Ads Links)
  3. У Google Ads імпортуйте ключову подію GA4 як конверсію

Що обрати? Використовуйте прямі теги Google Ads, коли потрібен точний підрахунок конверсій з атрибуцією Google Ads. Використовуйте імпорт GA4, коли хочете узгоджену звітність між GA4 та Google Ads, і коли використовуєте data-driven атрибуцію. Для більшості випадків імпорт GA4 простіший і дозволяє уникнути підтримки дубльованих тегів.

Як відстежувати кнопки всередині iframe або shadow DOM?

Стандартні тригери кліків GTM не працюють всередині iframe або елементів shadow DOM. Кожен сценарій потребує окремого підходу.

Cross-origin iframe

GTM не може отримати доступ до елементів усередині cross-origin iframe (наприклад, вбудовані форми Typeform, Calendly або платіжних провайдерів). Рішення — postMessage:

// Усередині iframe (якщо ви його контролюєте):
button.addEventListener('click', () => {
  window.parent.postMessage({
    event: 'iframeButtonClick',
    buttonText: 'Submit'
  }, 'https://yourdomain.com');
});

// Custom HTML тег GTM на батьківській сторінці:
window.addEventListener('message', function(e) {
  if (e.data.event === 'iframeButtonClick') {
    dataLayer.push({
      event: 'iframe_click',
      button_text: e.data.buttonText
    });
  }
});

Потім створіть тригер Custom Event у GTM, що відповідає iframe_click.

Same-origin iframe

Якщо iframe має те ж саме джерело (same-origin), тригери кліків GTM працюють — але лише якщо контейнер GTM також завантажений усередині iframe, або ви отримуєте доступ до DOM iframe через Custom HTML тег на батьківській сторінці.

Shadow DOM

Веб-компоненти використовують shadow DOM для інкапсуляції своїх внутрішніх елементів. Вбудовані тригери кліків GTM спрацьовують на shadow host елементі, а не на кнопках усередині shadow tree. Щоб відстежувати внутрішні кліки, використовуйте Custom HTML тег, який проникає крізь shadow boundary:

// Custom HTML тег:
var host = document.querySelector('my-component');
if (host && host.shadowRoot) {
  host.shadowRoot.querySelector('.internal-btn')
    .addEventListener('click', function() {
      dataLayer.push({
        event: 'shadow_btn_click',
        button_text: this.textContent
      });
    });
}

GTM Event Helper виявляє елементи shadow DOM під час вибору та попереджає, коли стандартний тригер GTM не зможе досягти цілі. Для підтримуваних патернів shadow DOM він автоматично генерує відповідний підхід через Custom HTML.

Які найпоширеніші помилки при відстеженні кнопок?

Навіть досвідчені користувачі GTM стикаються з цими проблемами. Ось на що звертати увагу та як виправити кожну.

1. Селектор збігається з неправильними елементами. Широкий селектор на кшталт .btn може збігатися з кнопками навігації, кнопками закриття модалок та кнопками згоди на cookies — а не лише з вашим цільовим CTA. Завжди тестуйте селектор у консолі браузера через document.querySelectorAll('.your-selector') і порахуйте збіги. Якщо їх більше, ніж очікувалося, звузьте селектор батьківським контекстом: .hero-section .btn.

2. Дочірній елемент перехоплює клік. Коли кнопка містить іконку (<svg>) або <span>, подія кліку націлюється на дочірній елемент, а не на саму кнопку. Оператор "matches CSS selector" у GTM обробляє це, піднімаючись по дереву DOM — але лише якщо ваш селектор вказує на <button>, а не на внутрішній елемент. Уникайте селекторів, що націлені на span або svg всередині кнопок.

3. Тег спрацьовує, але подія GA4 не з'являється. Три поширені причини: неправильний Measurement ID (подія йде в інший ресурс GA4), блокувальник реклами у вашому браузері перешкоджає запиту GA4, або Content Security Policy блокує google-analytics.com. Перевірте вкладку Network браузера на заблоковані запити до collect?v=2.

4. Подвійні події через спливання подій. Якщо у вас вкладені клікабельні елементи (кнопка всередині картки, яка теж клікабельна), один клік може запустити кілька тригерів. Використовуйте точні селектори та опцію "Once per event" у тригері. У GA4 перевірте звіт Realtime — якщо бачите дві однакові події на один клік, область дії тригера занадто широка.

5. Відсутнє тестування на мобільних. Мобільні тапи поводяться інакше, ніж десктопні кліки. Touch-події на iOS Safari можуть спрацьовувати у неочікуваному порядку, а деякі CSS hover-стани заважають розпізнаванню тапів. Завжди тестуйте відстеження кліків на реальних мобільних пристроях — а не лише через емуляцію пристроїв у Chrome DevTools, яка імітує розмір екрана, але не поведінку touch-подій.

Чи є швидший спосіб налаштувати відстеження кліків?

Описаний вище робочий процес передбачає перемикання між сайтом і GTM, ручне копіювання селекторів та налаштування тригерів вручну. GTM Event Helper зводить усе це до одного потоку:

  1. Натисніть на елемент на вашій сторінці
  2. Перегляньте автоматично згенерований селектор (з позначкою стабільності та кількістю збігів)
  3. Оберіть назву події та тип тегу
  4. Натисніть "Create in GTM" — тригер і тег створюються через API

Без перемикання вкладок. Без ручного копіювання селекторів. Без ризику забути увімкнути вбудовані змінні.

Пропустіть ручне налаштування — створюйте GTM-події кліків за секунди.

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

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

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

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