DataLayer у Google Tag Manager: як працює і як перевірити?

DataLayer у Google Tag Manager: як працює і як перевірити?
ГеннадійПровідний SEO-спеціаліст, Seo-Gen
SEO просування30.10.202620 хв.
Матеріал підготовлено командою Seo-Gen

Google Tag Manager може отримувати інформацію про кліки, перегляд сторінок та дії користувача безпосередньо з інтерфейсу сайту. Для замовлень, лідів, товарів, авторизації та інших бізнес-подій такого підходу часто недостатньо, оскільки потрібні значення можуть бути відсутні в HTML або змінюватися разом із версткою.

DataLayer вирішує це завдання через структуровану передачу даних із сайту в систему тегів. Розробник відправляє подію та її параметри, Google Tag Manager отримує значення, застосовує тригери та передає підготовлені дані в Google Analytics 4, Google Ads або іншу підключену систему.

Що таке DataLayer у Google Tag Manager?

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

Типовий ланцюжок виглядає так: сайт формує подію, записує її в DataLayer, після чого Google Tag Manager читає нові дані. Потім підходящий trigger запускає tag, а той передає інформацію до GA4 або іншої системи. Така схема відокремлює аналітику від певних елементів інтерфейсу.

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

DataLayer також допомагає зберегти стабільну схему аналітики після редизайну. Якщо розробник змінює CSS-класи, порядок блоків або зовнішній вигляд кнопки, подія generate_lead продовжить передаватися за колишнім контрактом, тому налаштування контейнера GTM не доведеться переробляти разом з інтерфейсом.

Чим DataLayer відрізняється від даних у DOM?

DOM описує структуру сторінки, її елементи, атрибути та вміст, тому Google Tag Manager може знаходити потрібні значення через селектори або вбудовані змінні. Такий варіант підходить для простих кліків, переглядів та елементів, які стабільно присутні у HTML.

DataLayer зберігає спеціально підготовлені дані, незалежно від візуальної структури сторінки. Аналітик отримує заздалегідь узгоджене значення product_id або form_id, а не намагається вилучати його з тексту кнопки. При зміні дизайну ймовірність поломки такого відстеження помітно нижча.

Відповіді на ваші запитання

Що таке DataLayer у Google Tag Manager?

DataLayer – глобальний JavaScript-масив, через який сайт передає структуровані події та параметри Google Tag Manager. У ньому можуть бути дані про форми, товари, замовлення, авторизації та інші дії, які потім використовуються змінними, тригерами і тегами.

Такий спосіб зменшує залежність аналітики від HTML-розмітки сторінки. Якщо інтерфейс змінюється, узгоджені назви подій та параметрів можуть залишатися незмінними, тому контейнер GTM продовжує отримувати очікувані значення.

Як подивитися DataLayer у Chrome?

Відкрийте Chrome DevTools, перейдіть на вкладку Console і виконайте команду window.dataLayer. Браузер покаже поточний масив з усіма повідомленнями, які були додані після завантаження сторінки та виконання дій користувача.

Для пошуку конкретної події можна використовувати фільтрацію масиву, наприклад dataLayer.filter(item => item.event === 'purchase'). Після цього потрібно розкрити знайдений об'єкт та перевірити імена параметрів, значення та типи даних.

Чим gtag відрізняється від dataLayer.push()?

Функція gtag() додає команди Google tag до того ж масиву dataLayer, але використовує формат аргументів, прийнятий продуктами Google. dataLayer.push() частіше застосовується для власних об'єктів та подій, які потім обробляються контейнером Google Tag Manager.

Обидва підходи можуть існувати на одному сайті, якщо схема налаштована усвідомлено. При одночасному надсиланні однакової події через GTM та прямий gtag з'являються дублі, тому джерела аналітичних запитів потрібно контролювати.

Чи потрібно створювати DataLayer вручну?

Під час встановлення GTM стандартний код вже використовує dataLayer, проте власні бізнес-події сайт має надсилати окремо. Розробнику потрібно додати dataLayer.push() у тих місцях, де відбуваються дії, необхідні для аналітики.

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

Чому dataLayer.push() не відображається у Google Analytics?

Сам факт появи об'єкта в DataLayer нічого не відправляє в GA4 автоматично. Google Tag Manager має побачити подію, запустити потрібний trigger, виконати GA4 Event tag та сформувати запит із коректними параметрами.

Якщо подія є у Chrome, але відсутня у DebugView, потрібно перевірити Preview, Tags Fired, змінні та мережевий запит. Така послідовність допомагає визначити, де перервалася передача даних.

Чи можна використовувати DataLayer без Google Tag Manager?

Так, DataLayer є звичайною JavaScript-структурою і технічно може використовуватися без контейнера GTM. Інший скрипт здатний читати елементи масиву, реагувати на нові записи та використовувати їх для власної логіки.

На практиці стандартне ім'я dataLayer найчастіше зустрічається поруч із Google Tag Manager чи Google tag. Якщо GTM немає, розробнику потрібно самостійно визначити правила обробки повідомлень та подальшої передачі даних.

Чи можна змінити назву dataLayer?

Google Tag Manager підтримує інше ім'я рівня даних у відповідній конфігурації контейнера. Такий варіант іноді застосовують на проєктах з особливими технічними вимогами, проте стандартне ім'я простіше підтримувати та діагностувати.

Якщо ім'я змінено, звичайна команда window.dataLayer у Chrome не покаже потрібний масив. Аналітику та розробникам потрібно знати нову назву, інакше діагностика може розпочатися з помилкового висновку, що рівень даних відсутній.

Де краще перевіряти DataLayer – у Chrome чи GTM Preview?

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

Для повноцінної діагностики потрібні обидва інструменти. Після них варто відкрити GA4 DebugView і переконатися, що кінцева система одержала подію з тими ж параметрами, що були передані на сторінці.

Як працює DataLayer?

Як працює DataLayer?

У браузері рівень даних зазвичай створюється як властивість глобального об'єкта window. Після ініціалізації сайт додає нові повідомлення у міру завантаження сторінки та дій користувача. Google Tag Manager відстежує цю послідовність та обробляє повідомлення у порядку їх появи.

Базова архітектура виглядає так:

Сайт → window.dataLayer → Google Tag Manager → GA4 / Google Ads

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

Як створюється window.dataLayer?

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

window.dataLayer = window.dataLayer || [];

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

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

Як працює dataLayer.push()?

Метод dataLayer.push() додає нове повідомлення до існуючого масиву. Він використовується для надсилання подій та параметрів після кліків, відправлення форм, авторизації, додавання товару в кошик, купівлі та інших дій, які потрібно зафіксувати в аналітиці.

dataLayer.push({
  event: 'generate_lead',
  form_id: 'contact'
});

Після виконання коду об'єкт залишається на рівні даних, а GTM отримує подію generate_lead. Повторна команда dataLayer = [] після завантаження контейнера може очистити створену структуру, тому існуючий масив не слід перевизначати без технічної причини.

З чого складається об'єкт DataLayer?

Повідомлення DataLayer зазвичай будується з пар «ключ - значення». Ключ визначає назву параметра, а значення містить певні дані. В одному об'єкті можна передавати рядки, числа, масиви товарів та вкладені структури, які потім використовуються змінними GTM.

{
  event: 'purchase',
  value: 1500,
  currency: 'UAH'
}

Тут event означає подію купівлі, value містить числову вартість, а currency передає код валюти. Для складної електронної торгівлі до такого об'єкта додають transaction_id, items та інші параметри, передбачені GA4.

Як Google Tag Manager обробляє DataLayer?

Як Google Tag Manager обробляє DataLayer?

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

Порядок передачі має значення. Якщо потрібний параметр потрапив у DataLayer після спрацьовування тега, GTM може відправити порожнє чи старе значення. Тому при налаштуванні аналітики перевіряють не лише наявність даних, а й момент, коли вони з'явилися щодо події.

Що таке змінна рівня даних у GTM?

Data Layer Variable читає конкретне значення рівня даних і робить його доступним всередині контейнера. Наприклад, сайт передає подію купівлі разом з ідентифікатором транзакції та підсумковою вартістю, після чого ці значення можна підставити в параметри GA4 Event.

dataLayer.push({
  event: 'purchase',
  transaction_id: '12345',
  value: 2500
});

У GTM для такого об'єкта можна створити змінні transaction_id та value. Далі вони використовуються в налаштуваннях тега, передаються в GA4 та перевіряються через Preview Mode. Схема виходить послідовною: DataLayer → Variables → Trigger → Tag.

Що таке Custom Event у Google Tag Manager?

Custom Event застосовується, коли сайт самостійно надсилає іменовану подію через рівень даних. Наприклад, після успішного відправлення форми розробник викликає dataLayer.push() і записує подію form_submit, а GTM очікує саме це ім'я в користувацькому тригері.

dataLayer.push({
  event: 'form_submit'
});

Назва в DataLayer і значення Custom Event повинні збігатися, включаючи регістр символів. Якщо розробник відправив form_submit, а тригер очікує на formSubmit, подія з'явиться в масиві, проте потрібний тег не спрацює. Такі розбіжності зручно шукати через Tag Assistant.

Як пов'язані gtag та DataLayer?

Запит gtag datalayer часто з'являється під час аналізу коду Google Analytics 4 або Google tag, тому що обидві конструкції використовуються поруч. Функція gtag() працює через той же глобальний масив dataLayer, але передає до нього команди у форматі, на який очікують продукти Google.

При використанні GTM аналітик частіше працює зі звичайними об'єктами dataLayer.push(), оскільки така структура є зручною для довільних бізнес-подій. При прямому встановленні Google tag на сайт частіше зустрічається синтаксис gtag('event', ...), хоча конкретна архітектура залежить від проєкту.

Що робить функція gtag()?

Що робить функція gtag()?

Стандартна функція gtag() зазвичай оголошується так:

window.dataLayer = window.dataLayer || [];

function gtag() {
  dataLayer.push(arguments);
}

Коли сайт викликає gtag(), передані аргументи додаються до dataLayer. Наприклад, команда налаштування або подія GA4 спочатку потрапляє до масиву, після чого відповідний код Google обробляє запис. Тому gtag та рівень даних пов'язані на технічному рівні.

Для розробника відмінність помітна за форматом. При прямому dataLayer.push() зазвичай передається об'єкт із довільними ключами, а gtag() використовує послідовність аргументів, прийняту в Google tag. При діагностиці варто враховувати конкретний спосіб застосування.

У чому різниця між gtag() та dataLayer.push()?

Обидві конструкції використовують DataLayer, проте застосовуються в різних сценаріях. gtag() орієнтований на команди Google tag та пов'язані продукти Google, тоді як dataLayer.push() зручно використовувати як загальний контракт між застосунком, GTM та системами аналітики.

Параметрgtag()dataLayer.push()
Основне застосуванняGoogle tag та сервіси GoogleGTM та власна схема даних
Формат данихКоманди та аргументи gtagОб'єкти, масиви та параметри
Події користувачаПідтримуютьсяПідтримуються
Гнучкість структуриЗалежить від синтаксису Google tagПідходить для власної схеми
Типовий сценарійПряме надсилання до продуктів GoogleПередача даних через GTM

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

Чи можна одночасно використовувати gtag та Google Tag Manager?

Технічно один сайт може містити Google Tag Manager та прямі виклики gtag(). За такої схеми потрібно контролювати, яку подію відправляє кожен механізм, інакше одна дія користувача може потрапити в GA4 двічі та спотворити кількість конверсій.

Поширений приклад виникає з подією purchase: розробник викликає її через gtag(), а контейнер GTM одночасно відправляє другу подію покупки після появи purchase у DataLayer. Під час аудиту перевіряють Network, DebugView та Preview, щоб визначити джерело кожного запиту.

Як подивитися DataLayer у Chrome?

Як подивитися DataLayer у Chrome?

Запит datalayer chrome зазвичай пов'язаний із швидкою перевіркою вмісту рівня даних безпосередньо у браузері. Для такої діагностики не потрібно змінювати код сайту або відкривати налаштування контейнера, оскільки глобальний масив можна переглянути через стандартні інструменти Chrome.

Перевірка через браузер допомагає спочатку переконатись, що сайт взагалі надіслав потрібну інформацію. Якщо подія відсутня у window.dataLayer, подальший пошук проблеми всередині GTM зазвичай не дасть результату, доки розробник не виправить передачу даних на стороні сайту.

Як відкрити DataLayer через Chrome DevTools?

Відкрийте потрібну сторінку в Google Chrome, запустіть Chrome DevTools через F12 або Inspect і перейдіть у вкладку Console. Після завантаження сторінки введіть наступну команду та підтвердіть виконання клавішею Enter:

window.dataLayer

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

Як знайти потрібну подію в DataLayer?

На сторінках з великою кількістю подій масив швидко розростається, тому переглядати вручну десятки елементів незручно. У Chrome Console можна відфільтрувати записи за іменем події та отримати лише відповідні об'єкти.

dataLayer.filter(item => item.event === 'purchase')

Для форми аналогічна команда може шукати generate_lead, а для кошика – add_to_cart. Після фільтрації слід розкрити знайдений об'єкт та перевірити параметри події. Значення undefined, порожні рядки та несподівані типи даних зазвичай вказують на проблему в реалізації.

Чому події може бути не в Chrome Console?

Подія з'являється у DataLayer лише після виконання відповідного коду, тому перевіряти її потрібно після потрібної дії. Наприклад, purchase зазвичай відправляється після успішного замовлення, а generate_lead – після підтвердженого відправлення форми.

Причини відсутності події бувають різними:

  • потрібна дія користувача ще не відбулася або завершилася помилкою;
  • JavaScript код з dataLayer.push() не виконався через помилку;
  • сайт використовує інше ім'я рівня даних замість стандартного dataLayer;
  • масив було повторно створено після завантаження контейнера;
  • подія відправляється перед переходом на іншу сторінку і не встигає обробитись.

Після перевірки списку потрібно повторити сценарій користувача і знову переглянути масив. Якщо подія не з'являється, проблему варто шукати у коді сайту чи логіці, яка має запускати відповідний push().

Як перевірити DataLayer через GTM Preview?

Як перевірити DataLayer через GTM Preview?

Chrome показує вміст масиву на стороні сайту, а GTM Preview допомагає побачити, як контейнер обробив надіслані повідомлення. Для діагностики потрібно відкрити Tag Assistant, підключити сторінку, що тестується, і виконати дію, яка повинна викликати потрібну подію.

У лівій частині Preview відображається послідовність подій, а в деталях доступні Data Layer, Variables і теги, що спрацювали. Такий перегляд допомагає знайти ситуацію, коли об'єкт є у браузері, проте GTM читає неправильний ключ або не виконує умови тригера.

Що перевіряти у вкладці Data Layer?

Спочатку потрібно переконатися, що подія з'явилася у правильний момент і містить очікувані параметри. Потім варто порівняти фактичні ключі із узгодженою схемою Data Layer Specification, оскільки одна зайва буква в назві може залишити змінну порожньою.

Перевірка зазвичай включає кілька пунктів:

  • ім'я event збігається з налаштуванням Custom Event;
  • необхідні значення з'явилися до спрацьовування потрібного тега;
  • value передається числом, якщо система чекає на числовий параметр;
  • currency містить коректний код валюти;
  • одна дія користувача не створює кілька однакових подій.

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

Як перевірити, що тег спрацював?

На потрібній події Tag Assistant показує секції Tags Fired та Tags Not Fired. Якщо тег потрапив до першої групи, контейнер виконав його умови. При попаданні в другу групу потрібно відкрити деталі та перевірити, яка умова тригера виявилася хибною.

Додатково варто відкрити Variables та переконатися, що Data Layer Variable отримала очікуване значення. Іноді подія запускає тег коректно, однак один із параметрів залишається порожнім через неправильний шлях до вкладеного об'єкта. Такий тег технічно спрацьовує, але надсилає неповні дані.

Як перевірити подію в GA4 DebugView?

Після перевірки DataLayer і контейнера потрібно переконатися, що подія дійшла до Google Analytics 4. У режимі налагодження GA4 відображає події, що надходять, та їх параметри, тому тут можна звірити ім'я події, значення value, валюту та інші передані дані.

Зручна послідовність діагностики виглядає так:

Chrome → DataLayer → GTM Preview → GA4 DebugView

Провідний SEO-спеціаліст — Геннадій

Я перевіряю DataLayer спочатку через window.dataLayer у Chrome і переконуюсь, що сайт передав потрібну подію разом із параметрами. Потім дивлюсь GTM Preview та GA4 DebugView. Такий порядок швидко показує, де з'явилася помилка: у коді сайту, налаштуваннях контейнера або при надсиланні даних до системи аналітики.

Як передавати події через DataLayer?

Як передавати події через DataLayer?

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

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

Відправлення форми

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

dataLayer.push({
  event: 'generate_lead',
  form_id: 'callback'
});

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

Клік на кнопку

Відстежувати кожен клік через DataLayer зазвичай не потрібно, оскільки GTM вміє працювати зі стандартними click-тригерами. Окремий button_click має сенс, коли дія пов'язана з бізнес-логікою та потрібний стабільний параметр, який не можна надійно отримати з DOM.

dataLayer.push({
  event: 'button_click',
  button_name: 'consultation'
});

Ім'я кнопки краще передавати технічним значенням, яке не залежить від тексту інтерфейсу. Якщо редактор змінить напис «Отримати консультацію» на «Зв'язатися зі спеціалістом», аналітичне значення consultation залишиться незмінним.

Авторизація користувача

Для успішного входу можна передати рекомендовану подію login та вказати спосіб авторизації. Такий параметр допомагає порівняти електронну пошту, Google Account, Apple ID або інший метод без передачі персональних даних конкретного користувача.

dataLayer.push({
  event: 'login',
  method: 'email'
});

Відкриту адресу електронної пошти або номер телефону додавати до DataLayer не слід без окремого обґрунтування та перевірки правил платформ. Для аналітики зазвичай достатньо технічних ідентифікаторів та категорій, які не розкривають персональні дані.

Як використовується DataLayer у електронній торгівлі?

Як використовується DataLayer у електронній торгівлі?

В інтернет-магазинах DataLayer передає інформацію про перегляд товарів, кошик, оформлення замовлення та купівлю. GA4 використовує стандартні ecommerce-події та очікує певну структуру параметрів, тому схема має бути узгоджена з документацією до початку розробки.

Через рівень даних можна передавати view_item, add_to_cart, view_cart, begin_checkout, add_payment_info, purchase та refund. Для товарних подій використовується масив items, де окремими полями вказуються ідентифікатор, назва, вартість, кількість та інші характеристики.

Які e-commerce події можна передавати?

На різних етапах воронки потрібні різні події. view_item фіксує перегляд товару, add_to_cart – додавання до кошика, begin_checkout – початок оформлення, а purchase підтверджує завершену транзакцію після успішної оплати чи іншого узгодженого моменту.

Перед публікацією варто перевірити щонайменше такі події:

  • view_item передає перегляд конкретної картки товару;
  • add_to_cart фіксує додавання обраного товару до кошика;
  • view_cart показує перегляд поточного вмісту кошика;
  • begin_checkout передається на початку оформлення замовлення;
  • add_payment_info фіксує додавання платіжних даних;
  • purchase відправляється після успішної завершеної покупки;
  • refund використовується для реєстрації повернення транзакції.

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

Як виглядає purchase подія?

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

dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'T12345',
    value: 2500,
    currency: 'UAH',
    items: [{
      item_id: 'SKU123',
      item_name: 'Product name',
      price: 2500,
      quantity: 1
    }]
  }
});

Значення value передають числом без валютного символу, а валюту вказують окремо через currency. Масив items повинен відповідати фактичному складу замовлення, інакше товарні звіти GA4 будуть розходитися із загальною інформацією про транзакцію.

Які параметри особливо важливо перевірити?

Для покупки в першу чергу перевіряють transaction_id, value, currency та items. Усередині масиву товарів дивляться item_id, item_name, price та quantity, оскільки помилки у цих полях впливають на звіти електронної торгівлі та аналіз товарних категорій.

Перевіряти краще на кількох сценаріях: замовлення одного товару, кількох товарів, різних валют та повторне відкриття сторінки підтвердження. Якщо purchase відправляється повторно після оновлення сторінки, статистика продажів може завищуватися навіть за коректної структури інших параметрів.

Як DataLayer працює на SPA-сайтах?

Як DataLayer працює на SPA-сайтах?

У React, Vue, Next.js та інших SPA перехід між екранами часто виконується без повного перезавантаження документа. Звичайний Page View за такої навігації може не спрацювати автоматично, тому застосунок повинен повідомляти систему аналітики про зміну маршруту або стану в потрібний момент.

Така сама логіка стосується ecommerce-подій. Компоненти змінюються всередині вже завантаженої сторінки, а старі значення можуть бути доступними в моделі даних. Тому розробнику слід контролювати послідовність push() і не переносити параметри попереднього товару в нову подію.

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

dataLayer.push({ ecommerce: null });

Після цього застосунок надсилає наступний об'єкт ecommerce з актуальними значеннями. Така схема залежить від конкретної архітектури та версії налаштування контейнера, тому її слід перевіряти через Preview та реальні тестові події, а не застосовувати автоматично на кожному проєкті.

Чи є DataLayer у server-side Google Tag Manager?

Server-side Google Tag Manager працює інакше, ніж браузерний контейнер. На сервері немає об'єкта window і звичного масиву window.dataLayer, тому що код виконується поза браузером користувача. Серверний контейнер приймає вхідні HTTP-запити та перетворює їх у внутрішні event data.

У типовій схемі браузерний GTM отримує дані від сайту, формує запит та відправляє його до server-side контейнера. Далі Client розбирає запит, серверні теги отримують необхідні параметри та передають інформацію до GA4, рекламних систем або інших кінцевих точок.

Термін server-side dataLayer іноді використовують як спрощений опис цього процесу, проте технічно структура відрізняється від звичайного браузерного масиву. При налаштуванні потрібно окремо перевіряти web-контейнер, мережевий запит, Client і дані події всередині серверного GTM.

Які помилки найчастіше виникають під час роботи з DataLayer?

Які помилки найчастіше виникають під час роботи з DataLayer?

Більшість проблем пов'язана не зі складністю самого масиву, а з неузгодженими іменами, неправильною послідовністю подій та дублюючою відправкою. Тому перед використанням корисно скласти Data Layer Specification, де для кожної дії вказані event, параметри, типи значень та момент відправлення.

Після публікації специфікацію потрібно використовувати під час регресійної перевірки оновлень сайту. Якщо розробник змінив назву ключа або момент виклику push(), помилка повинна виявитись до того, як некоректні дані накопичаться у звітах GA4.

Повторна ініціалізація DataLayer

Небезпечна помилка виникає, коли після завантаження Google Tag Manager код знову виконує присвоювання dataLayer = []. У такому випадку існуючий масив замінюється новим, а контейнер може втратити передані дані або перестати отримувати повідомлення очікуваним способом.

Безпечна ініціалізація зазвичай виконується один раз через window.dataLayer = window.dataLayer || []. Якщо на проєкті кілька незалежних скриптів працюють із рівнем даних, кожен з них повинен використовувати існуючий масив та додавати нові елементи через push().

Подія відправляється надто пізно

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

Такі помилки добре видно у GTM Preview за послідовністю подій. Потрібно відкрити момент спрацьовування тега та подивитися Variables саме для цієї події. Перевірка значення на пізнішому етапі може створити помилкове враження, що налаштування працює правильно.

Різні назви однієї події

Без загального словника той самий лід може називатися lead, formSubmit, form_submission або generateLead. Для GTM це чотири різні події, тому тригер, налаштований на одне ім'я, проігнорує інші варіанти.

Імена потрібно узгодити до впровадження та використовувати однаково на всіх сторінках, де відбувається одна бізнес-дія. Для подій, які вже описані в GA4, розумно застосовувати рекомендовану термінологію Google, якщо вона відповідає реальній дії користувача.

Дублювання подій

Дублі з'являються, коли одну дію відстежують відразу кілька обробників, два контейнери GTM або прямий виклик gtag разом з тегом усередині GTM. У SPA додатковий дубль може виникнути після повторної ініціалізації компонента при зміні маршруту.

Перевіряти потрібно кількість push() у Console, кількість подій у Preview та фактичні мережеві запити. Якщо користувач один раз оформив замовлення, система повинна сформувати очікуване число purchase, а кожен додатковий запит вимагає окремого пояснення.

Передача персональних даних

DataLayer видно у браузері, тому поміщати туди email, телефон, ПІБ та інші чутливі значення без необхідності не можна. Крім ризику для приватності, такі дані можуть випадково потрапити до аналітичних або рекламних систем через універсальні змінні та теги.

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

Чек-лист перевірки DataLayer

Чек-лист перевірки DataLayer

Перевірку зручно проводити послідовно, починаючи з браузера та закінчуючи кінцевою системою аналітики. Якщо перескакувати між етапами, можна довго шукати помилку всередині GA4, хоча вихідна подія взагалі не з'явилася на сторінці.

ПеревіркаОчікуваний результат
window.dataLayer доступнийУ Console відображається масив
Потрібний event з'явивсяІм'я події відповідає специфікації
Параметри заповненіНемає несподіваних undefined та порожніх значень
GTM отримав подіюВона відображається у Preview
Змінні прочитаніValues збігаються з DataLayer
Тег спрацювавВін знаходиться у Tags Fired
GA4 отримав подіюЇї видно у DebugView
Дублів немаєОдна дія дає очікувану кількість подій
PII відсутніПерсональні дані не потрапляють у потік аналітики

Графік послідовності перевірки можна представити одним ланцюжком:

Дія користувача → dataLayer.push() → Custom Event → Trigger → Tag → запит → GA4 DebugView

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

DataLayer дає сайту зрозумілий спосіб передавати події та параметри Google Tag Manager незалежно від структури інтерфейсу. Для стабільної аналітики потрібно заздалегідь визначити імена подій, узгодити параметри, перевірити послідовність push() та протестувати весь ланцюжок від браузера до GA4.

Якщо події DataLayer дублюються, містять порожні значення або не доходять до Google Analytics 4, фахівці Seo-Gen перевірять код сайту, налаштування Google Tag Manager і структуру передачі даних. Після аудиту ви отримаєте конкретний список помилок та правок для розробника без зайвої перебудови аналітики.