Блог

← Усі статті

Відстеження динамічних елементів у GTM: випадаючі меню, тултіпи, попапи та інше

15 березня 2026

TL;DR: Щоб відстежувати динамічні елементи (дропдауни, тултіпи, попапи) у GTM: заморозьте сторінку для інспекції (F8 у DevTools або натисніть F у GTM Event Helper), використовуйте тригери Element Visibility з увімкненою опцією 'Observe DOM changes' для модальних вікон і повідомлень про успіх, та використовуйте тригери Click зі стабільними CSS-селекторами для пунктів меню.

Не кожен елемент на сторінці просто сидить і чекає, поки по ньому клацнуть. Випадаючі меню з'являються при наведенні курсору. Тултіпи зникають, щойно ви рухаєте мишу. Модальні попапи перекривають сторінку і зникають при закритті. Акордеони розкриваються та згортаються. Ці динамічні UI-елементи — одні з найважливіших взаємодій для відстеження і водночас одні з найскладніших для налаштування в Google Tag Manager.

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

Чому динамічні елементи складно відстежувати в GTM?

Коли ви натискаєте правою кнопкою миші на пункті випадаючого меню, щоб вибрати "Inspect Element" у Chrome DevTools, меню закривається. Коли ви намагаєтеся натиснути на тултіп у режимі Preview GTM, він зникає до того, як ви встигнете з ним взаємодіяти. Стандартний підхід "знайти елемент, скопіювати селектор, створити тригер" не працює, бо елемент неможливо утримати достатньо довго, щоб отримати селектор.

Є три стратегії для вирішення цієї проблеми:

  1. Заморозити сторінку, щоб динамічні елементи залишались видимими
  2. Використати тригери Element Visibility замість тригерів кліків
  3. Використати DOM-інспектор із гарячими клавішами для призупинення рендерингу

Як заморозити сторінку для інспекції динамічних елементів?

Ви можете заморозити виконання JavaScript у Chrome, щоб елементи не зникали:

  1. Відкрийте Chrome DevTools (F12)
  2. Наведіть курсор на динамічний елемент, щоб він з'явився
  3. Поки він видимий, натисніть F8 (або Ctrl+\\), щоб призупинити виконання скриптів
  4. Сторінка тепер заморожена — елемент залишається видимим
  5. Перейдіть на вкладку Elements та інспектуйте елемент
  6. Скопіюйте CSS-селектор
  7. Натисніть F8 знову, щоб відновити виконання

Це працює для більшості UI-елементів, керованих JavaScript. Однак чисто CSS-ефекти при наведенні (наприклад, випадаючі меню на основі :hover) можуть не бути захоплені цим способом, оскільки JavaScript не задіяний.

Альтернатива: setTimeout у консолі

Для CSS-ефектів при наведенні використовуйте відкладений виклик debugger:

setTimeout(() => { debugger; }, 3000);

Виконайте це в консолі, а потім наведіть курсор на елемент протягом 3 секунд. Debugger призупинить виконання, поки елемент ще видимий.

GTM Event Helper має вбудовану функцію Freeze Page. Натисніть F у режимі Select Mode, щоб заморозити стан сторінки. Динамічні елементи залишаються видимими, і ви можете натиснути на них, щоб отримати CSS-селектор з аналізом стабільності. Без DevTools.

Як використовувати тригери Element Visibility для динамічного контенту?

Замість відстеження кліку по динамічному елементу відстежуйте момент, коли він з'являється. Тригер Element Visibility у GTM спрацьовує, коли вказаний елемент стає видимим у вікні перегляду.

Коли використовувати

Кроки налаштування

  1. Створіть новий тригер → Element Visibility
  2. Selection Method: CSS Selector (надійніший за ID для динамічних елементів)
  3. Element Selector: Введіть CSS-селектор елемента, який хочете відстежувати (наприклад, .modal-success, #thank-you-message)
  4. When to fire:
    • "Once per page" — для елементів, що з'являються один раз (повідомлення про успіх)
    • "Once per element" — для елементів, що можуть з'являтися повторно (повторювані попапи)
    • "Every time an element appears on screen" — для елементів, що перемикають видимість
  5. Observe DOM changes: Увімкніть цю опцію. Вона вказує GTM стежити за елементами, що динамічно додаються на сторінку, а не лише за тими, що існують при завантаженні.

Налаштування "Observe DOM Changes"

Це ключове налаштування. Без нього GTM перевіряє наявність елемента лише один раз при завантаженні сторінки. Якщо елемент ще не існує (бо це попап, який ще не відкрили), тригер ніколи не спрацює. З увімкненою опцією "Observe DOM changes" GTM використовує MutationObserver для відстеження нових елементів, що відповідають вашому селектору.

Примітка щодо продуктивності: MutationObserver відстежує кожну зміну DOM на сторінці. Для більшості сайтів це не проблема, але на сторінках з інтенсивною маніпуляцією DOM (дашборди реального часу, стрічки з нескінченним прокручуванням) це може вплинути на продуктивність. Використовуйте конкретні селектори, щоб мінімізувати навантаження.

Як відстежувати конкретні динамічні UI-елементи?

Випадаючі меню

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

Підхід: Використовуйте тригер Click із селектором, що вказує на пункти меню, а не на контейнер меню.

/* Цільові пункти меню */
.dropdown-menu a
nav .submenu li a
[role="menu"] [role="menuitem"]

Клік по пункту меню спрацьовує до закриття меню, тому стандартні тригери Click тут працюють. Складність полягає в отриманні правильного селектора — для цього потрібно заморозити сторінку, щоб інспектувати меню, поки воно відкрите.

Тултіпи

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

Підхід: Не відстежуйте сам тултіп — відстежуйте елемент, що його викликає. Користувачі наводять курсор (або натискають) на щось, щоб побачити тултіп, тому тригер має спрацьовувати на цій взаємодії.

/* Відстежуйте елемент-тригер, а не сам тултіп */
[data-tooltip]
.has-tooltip
[aria-describedby]

Якщо вам потрібно знати, який саме тултіп було показано, використовуйте Click Text або атрибут data-* як параметр події.

Модальні попапи

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

Відстеження відкриття модального вікна: Використовуйте тригер Element Visibility на контейнері модального вікна з увімкненою опцією "Observe DOM changes".

.modal.is-open
[role="dialog"]:not([aria-hidden="true"])
.popup-overlay.visible

Відстеження дій усередині модального вікна: Використовуйте стандартні тригери Click. Після відкриття модального вікна його вміст — це звичайні DOM-елементи, по яких можна клацнути.

Акордеони / Розкривні панелі

Панелі акордеонів розкриваються для показу вмісту та згортаються для його приховування.

Підхід: Відстежуйте клік по заголовку акордеона (елементу-перемикачу).

/* Перемикачі акордеонів */
.accordion-header
[data-toggle="collapse"]
details > summary
button[aria-expanded]

Щоб розрізнити відкриття та закриття, перевіряйте атрибут aria-expanded. Якщо aria-expanded="false" у момент кліку, користувач відкриває панель. Створіть змінну Custom JavaScript, що зчитує цей атрибут.

Мега-меню

Мега-меню — це великі випадаючі панелі, що містять кілька колонок, посилань, а іноді й зображень.

Підхід: Відстежуйте кліки по окремих посиланнях всередині мега-меню. Заморозьте сторінку, щоб інспектувати структуру меню, потім використовуйте селектор, що вказує на посилання всередині:

.mega-menu a
nav .mega-menu-panel a
.mega-menu [role="menuitem"]

Використовуйте Click Text і Click URL як параметри події, щоб розрізняти, по якому пункту меню було здійснено клік.

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

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

Панелі вкладок

Добре побудовані інтерфейси вкладок використовують ARIA-ролі. Кнопки вкладок мають [role="tab"], а панелі контенту — [role="tabpanel"]. Відстежуйте клік по кнопці вкладки:

/* CSS-селектори для кліків по вкладках */
[role="tab"]
.nav-tabs button
.tab-list [aria-selected]

Передайте мітку вкладки як параметр події за допомогою вбудованої змінної Click Text у GTM або зчитайте атрибут data-tab-name через змінну Custom JavaScript:

// GTM Custom JavaScript Variable: "Tab Name"
function() {
  var el = {{Click Element}};
  return el.getAttribute('data-tab-name') || el.textContent.trim();
}

Каруселі та слайдери

Каруселі створюють унікальну проблему: вони часто автоматично прокручуються, а вам потрібно відстежувати лише свідомі взаємодії — коли користувач навмисно натискає "Далі" або індикатор слайда.

Щоб відстежити, на який слайд перейшов користувач, зчитайте індекс активного слайда з DOM після кліку:

// GTM Custom JavaScript Variable: "Carousel Slide Index"
function() {
  var active = document.querySelector('.carousel-item.active, .slick-current');
  return active ? active.getAttribute('data-slide-index') || 'unknown' : 'unknown';
}

Як відстежувати бейджі сповіщень та toast-повідомлення?

Сповіщення, toast-повідомлення та тимчасові UI-елементи — одні з найскладніших для відстеження, оскільки вони з'являються ненадовго і часто не потребують взаємодії користувача.

Toast та Snackbar повідомлення

Toast-сповіщення виїжджають з кутка, відображають повідомлення протягом кількох секунд і автоматично зникають. Використовуйте тригер Element Visibility з увімкненою опцією "Observe DOM changes":

Щоб захопити зміст toast як параметр події, створіть змінну Custom JavaScript:

// GTM Custom JavaScript Variable: "Toast Message Text"
function() {
  var toast = document.querySelector('.toast.show, .snackbar.visible, [role="alert"]');
  return toast ? toast.textContent.trim().substring(0, 100) : '(not set)';
}

Банери згоди на cookies

Банери згоди критично важливо відстежувати, оскільки вони впливають на збір даних. Відстежуйте як появу банера, так і вибір користувача:

Взаємодії з чат-віджетами

Чат-віджети (Intercom, Drift, Zendesk) завантажуються в iframe, тому GTM не може відстежувати кліки всередині них. Однак ви можете відстежувати кнопку відкриття/закриття, яка знаходиться на вашій сторінці:

Як дебажити тригери Element Visibility, що не спрацьовують?

Тригери Element Visibility потужні, але можуть засмучувати, коли вони мовчки не спрацьовують. Ось систематичний чеклист для дебагу:

Перевірка 1: Чи увімкнено "Observe DOM Changes"?

Це найпоширеніша причина. Без цього налаштування GTM перевіряє наявність елемента лише при завантаженні сторінки. Якщо елемент додається динамічно (що є випадком для модальних вікон, toast-повідомлень, повідомлень про успіх), тригер ніколи не спрацює. Перейдіть до конфігурації тригера і перевірте, що прапорець увімкнений.

Перевірка 2: Чи селектор дійсно збігається?

Відкрийте консоль браузера і виконайте:

// Перевірте свій селектор — спочатку викличте динамічний елемент, потім виконайте це:
document.querySelectorAll('.your-selector-here')

Якщо результат — порожній NodeList, ваш селектор нічому не відповідає. Типові причини: помилка в назві класу, елемент всередині shadow DOM або селектор працював на іншій сторінці.

Перевірка 3: Чи елемент дійсно видимий?

Тригер Element Visibility у GTM перевіряє, чи елемент знаходиться у вікні перегляду та візуально відрендерений. Елементи з такими CSS-властивостями не активують його:

Перевірка 4: Чи елемент всередині iframe?

GTM не може спостерігати за змінами DOM всередині cross-origin iframe. Якщо ваш динамічний елемент знаходиться в iframe (типово для вбудованих форм, платіжних віджетів, чат-інструментів), тригер Element Visibility його не виявить. Вам потрібно відстежувати елемент-обгортку на батьківській сторінці або використовувати інший підхід.

Перевірка 5: Чи інші умови тригера блокують його?

Якщо ваш тригер має додаткові умови (наприклад, Page Path або фільтри кастомних змінних), перевірте кожну умову. У режимі Preview GTM подивіться розділ "Tags Not Fired" — він показує, які умови пройшли, а які не пройшли для кожної перевірки тригера.

Select Mode у GTM Event Helper показує валідацію селектора в реальному часі. Коли ви натискаєте на елемент, розширення перевіряє CSS-селектор у живому DOM і попереджає, якщо селектор нестабільний, збігається з кількома елементами або вказує на контент всередині iframe.

Як поєднати тригери Click та Visibility для складних взаємодій?

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

Підхід 1: Дві окремі події (рекомендовано)

Надсилайте незалежні події для кожної взаємодії та аналізуйте послідовність у GA4:

У GA4 використовуйте звіт Path Exploration, щоб побачити, скільки користувачів після modal_open перейшли до modal_cta_click. Це найпростіша реалізація з максимальною аналітичною гнучкістю.

Підхід 2: Trigger Groups

GTM Trigger Groups активують тег лише тоді, коли всі зазначені тригери спрацювали протягом одного перегляду сторінки. Створіть trigger group, що містить тригер Element Visibility (відкриття модального вікна) та тригер Click (клік по CTA). Пов'язаний тег спрацює лише коли обидві умови виконані.

Обмеження: Trigger groups не враховують порядок. Якщо користувач натисне CTA першим (малоймовірно, але можливо в крайніх випадках), а потім з'явиться модальне вікно, група все одно спрацює. Для більшості робочих потоків з модальними вікнами це не проблема, оскільки CTA існує лише всередині модального вікна.

Підхід 3: Відстеження стану через Custom JavaScript

Для справді складних послідовностей використовуйте тег Custom HTML для встановлення JavaScript-змінної при першій події, а потім перевіряйте цю змінну в умовах другого тригера:

<script>
// Custom HTML тег, що спрацьовує на тригері modal_open
window._gtm_modal_open = true;
window._gtm_modal_name = '{{Click Text}}';
</script>

Потім створіть змінну Custom JavaScript, яка зчитує window._gtm_modal_open, і використовуйте її як умову у тригері кліку по CTA. Це дає повний контроль над послідовністю, але додає складності — використовуйте лише коли підходи 1 та 2 недостатні.

Коли використовувати кожен підхід

СценарійПідхідЧому
Загальна аналітика (аналіз воронки)Дві окремі подіїНайпростіший, найгнучкіший у GA4
Активувати тег лише після обох взаємодійTrigger groupВбудована функція GTM, без коду
Строга послідовність зі станомCustom JS stateПовний контроль, обробка крайніх випадків

Які CSS-селектори найкраще працюють для динамічних елементів?

Динамічні елементи часто мають згенеровані імена класів, що змінюються між білдами. Стабільні селектори для динамічних елементів:

Тип селектораПрикладСтабільність
ARIA role[role="dialog"]Висока
ARIA-атрибут[aria-expanded="true"]Висока
Data-атрибут[data-modal="signup"]Висока
Семантичний HTMLdetails > summaryВисока
Стабільний клас.modal-successСередня
Згенерований клас.css-1a2b3cНизька — уникайте

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

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

  1. Увійдіть у Select Mode (Ctrl+Shift+E)
  2. Натисніть F, щоб заморозити сторінку з видимим динамічним елементом
  3. Натисніть на елемент — розширення згенерує стабільний CSS-селектор
  4. Оберіть назву події та тип тегу
  5. Натисніть "Create in GTM" — тригер і тег створюються через API

Функція Freeze Page створена спеціально для цієї проблеми. Без DevTools, без команд у консолі, без вгадування селекторів.

Відстежуйте випадаючі меню, тултіпи та попапи — без зайвих складнощів.

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

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

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

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