dataLayer: що це, як працює рівень даних у GTM та приклади реалізації

dataLayer (рівень даних) — це глобальний JavaScript-масив на сторінці сайту, який відіграє роль буфера між кодом сайту та Google Tag Manager (GTM). Технічно це змінна window.dataLayer, в яку розробник у потрібні моменти додає об’єкти з даними через dataLayer.push({...}), а GTM читає ці об’єкти, перетворює їх на змінні та передає у теги (GA4, Google Ads, Meta Pixel тощо). Без dataLayer GTM міг би зчитувати лише те, що видно в DOM (текст, класи, атрибути). З dataLayer — ви маєте повний контроль над схемою даних і можете передавати те, що взагалі не рендериться на сторінці: user ID, вартість замовлення у валюті магазину, ступінь членства, внутрішню категорію товару.

Навіщо потрібен dataLayer

dataLayer вирішує три задачі:

Відокремити логіку сайту від логіки аналітики. Розробники відповідають за push у dataLayer, маркетологи в GTM — за те, куди й як ці дані відправляти. Щоб додати нову систему аналітики, не треба змін у коді сайту.
Передавати дані, недоступні з DOM. Ціна з урахуванням знижки, ID користувача з бекенду, тип купленого товару, статус підписки — все це не видно на HTML-сторінці, але потрібне для аналізу.
Забезпечити консистентність між системами. Один push у dataLayer може одночасно спрацювати на GA4, Meta Pixel, Google Ads Conversion — усі отримують однакові цифри.

Без рівня даних доводиться або хардкодити виклики gtag() та fbq() у коді сайту, або намагатися вичитати значення з DOM регулярками — обидва підходи неминуче ламаються при перепроєктуванні фронтенду.

Як dataLayer ініціалізується та працює

На старті GTM-контейнер створює (або використовує наявний) масив window.dataLayer:

<script>
  window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[]; ...})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>

Важливо: оголосити window.dataLayer = window.dataLayer || [] перед контейнером GTM, якщо ви хочете передати початкові змінні ще на етапі завантаження (наприклад, user ID, тип сторінки, категорію).

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

dataLayer.push({
  event: 'form_submit',
  form_name: 'newsletter',
  form_location: 'footer',
  user_status: 'guest'
});

GTM слухає ці виклики. Коли з’являється об’єкт із ключем event, GTM створює Data Layer Event — сигнал, на який можна повісити тригер Custom Event. Тригер вмикає тег (наприклад, GA4 Event Tag), який у свою чергу читає інші значення з dataLayer через Data Layer Variables.

Структура push-повідомлення

Типовий push має одне обов’язкове поле event та будь-яку кількість додаткових:

dataLayer.push({
  event: 'purchase',
  transaction_id: 'T-12345',
  value: 1999.00,
  currency: 'UAH',
  items: [
    { item_id: 'SKU-001', item_name: 'Курс GA4', price: 1999, quantity: 1 }
  ]
});

Google має стандартизовані схеми для популярних сценаріїв, які варто дотримуватись, щоб ваш dataLayer без змін працював із Enhanced E-commerce GA4:

Схема	Для чого	Обов’язкові ключі
`view_item_list`	Список товарів (категорія)	`items[]`
`view_item`	Картка товару	`items[]`, `currency`, `value`
`add_to_cart`	Додавання в кошик	`items[]`, `currency`, `value`
`begin_checkout`	Початок оформлення	`items[]`, `currency`, `value`
`purchase`	Покупка	`transaction_id`, `value`, `currency`, `items[]`
`generate_lead`	Форма заявки	`value`, `currency`

Іменування ключів повинно відповідати специфікації GA4 — тоді GTM-тег GA4 Event може просто вибрати поле «Use Data Layer» замість ручного мапінгу кожного параметра.

dataLayer у Single Page Applications (SPA)

У React / Vue / Next.js важливо правильно обробляти зміну маршруту. Браузер не перезавантажує сторінку, тому page_view треба пушити вручну:

// На зміну маршруту
router.afterEach((to) => {
  dataLayer.push({
    event: 'page_view',
    page_path: to.fullPath,
    page_title: document.title
  });
});

Перед пушем нового page_view рекомендується очистити старі змінні через спеціальний пуш { ecommerce: null }, щоб попередні items[] не накопичувались і не потрапляли в наступні події. Цей патерн описаний у документації Google для Enhanced E-commerce.

dataLayer vs gtag.js: яку різницю знати

Аспект	dataLayer + GTM	gtag.js
Що потрібно на сайті	Один контейнер GTM + `push` від розробника	Виклики `gtag('event', ...)` по коду
Хто керує тегами	Маркетолог у GTM	Розробник у коді
Підтримка багатьох систем	Один push → багато тегів	Окремий виклик для кожної системи
Версіонування	Вбудоване в GTM	Через git
Реліз змін	Публікація в GTM (хвилини)	Реліз коду (дні)

На невеликих сайтах з єдиною системою аналітики gtag.js достатньо. Як тільки з’являється друга система (Ads, Meta, LinkedIn, коллтрекінг) або потреба в server-side GTM — dataLayer стає необхідністю.

Інтеграція з коллтрекінгом та UTM-мітками

У типовому сценарії коллтрекінг пушить у dataLayer подію дзвінка з параметрами:

dataLayer.push({
  event: 'phone_call',
  call_duration: 184,
  call_source: 'google / cpc',
  utm_source: 'google',
  utm_campaign: 'brand_search'
});

GTM має тригер на event = phone_call, який запускає тег GA4 generate_lead і тег Google Ads Conversion. Значення utm_source та utm_campaign dataLayer отримав від самого коллтрекінгу, який раніше прив’язав номер до джерела. Завдяки цьому конверсія «дзвінок» атрибутується правильному каналу навіть через тижні після першого візиту, що важливо для коректного розрахунку CPA та ROAS.

Типові помилки при роботі з dataLayer

Push перед ініціалізацією. Якщо оголосити window.dataLayer після GTM-контейнера — ранні події втрачаються.
Немає ключа event. Без нього тригер Custom Event не спрацьовує, хоча змінні доступні.
Невичищені попередні дані. У SPA items[] з картки товару потрапляє у наступний purchase, ціни ростуть подвійно.
Асинхронний push у момент переходу. Якщо dataLayer.push викликається одночасно з переходом на іншу сторінку, браузер може скасувати запит GA4 — потрібен transport_type: 'beacon' або затримка.
PII у dataLayer. Email, телефон, номери карт у рівні даних — порушення політики Google і GDPR. Хешуйте або не передавайте взагалі.

Перевіряти dataLayer найзручніше через режим Preview у GTM (панель Tag Assistant), який показує стан dataLayer на кожному кроці та які тригери спрацювали.

dataLayer