dataLayer

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

dataLayer — фундамент будь-якої серйозної аналітичної архітектури у 2026. Без нього GA4, Meta Pixel, server-side трекінг працюють крихко: ламаються при будь-якому редизайні фронтенду. З правильно реалізованим dataLayer трекінг переживає роки змін UI без жодних правок у GTM.

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

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

1. Відокремити логіку сайту від логіки аналітики. Розробники відповідають за push у dataLayer, маркетологи в GTM — за те, куди й як ці дані відправляти. Щоб додати нову систему аналітики, не треба змін у коді сайту.
2. Передавати дані, недоступні з DOM. Ціна з урахуванням знижки, ID користувача з бекенду, тип купленого товару, статус підписки — все це не видно на HTML-сторінці, але потрібне для аналізу.
3. Забезпечити консистентність між системами. Один 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.

Архітектура потоку даних

Сайт                  dataLayer            GTM Trigger          GTM Tag
[click] ─────push───→ {event:'add_to_cart',  ─→ Custom Event   ─→ GA4 Event Tag
                       value:1490, items:..} ─→ Trigger fires  ─→ Reads DLV
                                                                  ─→ Sends to GA4

Структура 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:

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

Структура items[] для e-commerce

items: [{
  item_id: 'SKU-12345',           // обов'язково
  item_name: 'Шкіряний рюкзак',   // обов'язково
  item_brand: 'BrandX',
  item_category: 'Аксесуари',
  item_category2: 'Сумки',
  item_category3: 'Рюкзаки',
  item_variant: 'Чорний / L',
  price: 1490,
  quantity: 1,
  index: 0,                        // позиція в списку
  discount: 100,
  coupon: 'SUMMER10'
}]

dataLayer у Single Page Applications (SPA)

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

// React Router
import { useLocation } from 'react-router-dom';

const location = useLocation();
useEffect(() => {
  dataLayer.push({
    event: 'page_view',
    page_path: location.pathname,
    page_title: document.title
  });
}, [location]);

// Vue Router
router.afterEach((to) => {
  dataLayer.push({
    event: 'page_view',
    page_path: to.fullPath,
    page_title: document.title
  });
});

// Next.js
import { useRouter } from 'next/router';
useEffect(() => {
  router.events.on('routeChangeComplete', (url) => {
    dataLayer.push({event: 'page_view', page_path: url});
  });
}, []);

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

Готові пакети: react-gtm-module для React, GTM4WP для WordPress, gtag-ssr для Next.js SSR.

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

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

Data Layer Variable у GTM

Data Layer Variable (DLV) — тип користувацької змінної в GTM, що читає значення з window.dataLayer за вказаним шляхом.

Налаштування: New Variable → Data Layer Variable → Data Layer Variable Name (наприклад, ecommerce.value).

Підтримує вкладені шляхи через крапку:

• ecommerce.value — повна сума замовлення.
• ecommerce.items.0.item_id — перший item у масиві.
• user.subscription.tier — глибоко вкладене значення.

Версія 2 (рекомендована) — для GA4-епохи з ієрархічною структурою. Версія 1 — застаріла, для старих UA-контейнерів.

Default Value — fallback, якщо ключ не знайдено (наприклад, (not set) для відсутніх категорій).

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

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

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

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

Server-side dataLayer

З появою server-side GTM (sGTM) архітектура dataLayer розширюється:

Браузер → Client GTM → Sends to → Server GTM (sGTM endpoint)
                                  ↓
                                  ├─ Cleans PII
                                  ├─ Enriches from CRM (LTV, segment)
                                  └─ Forwards to GA4 / Meta CAPI / TikTok

dataLayer на клієнті лишається той самий, але GTM-контейнер передає події не напряму у вендори, а на ваш sGTM endpoint у Cloud Run. Це дає:

• Обхід ad-blockers і Safari ITP.
• First-party cookies (28 днів замість 7).
• Очищення PII перед відправкою.
• Збагачення даних з CRM/бекенду.

Як перевірити, що dataLayer працює

5 інструментів:

1. Console браузера — введіть dataLayer і Enter, побачите масив усіх push’ів з моменту завантаження. Найшвидший дебаг.
2. GTM Preview Mode (Tag Assistant) — Tags fired/not fired для кожної події, значення DLV, повний state dataLayer.
3. GA Debugger Chrome extension — додає debug_mode=1 до запитів GA4, події з’являються в DebugView.
4. GA4 DebugView — Admin → DebugView показує події з debug-сесій у real-time.
5. BigQuery events_intraday_* — для зрілих property з SQL-аналізом.

Чек-лист перед Publish:

• Подія має правильний event ключ.
• Усі обов’язкові параметри присутні і не порожні.
• Немає PII (email, phone, ID карти).
• Для e-commerce items[] не завищений (попередні очищені через { ecommerce: null }).
• Значення відповідають GA4-стандарту (currency у ISO-форматі, value числовий).

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

1. Push перед ініціалізацією. Якщо оголосити window.dataLayer після GTM-контейнера — ранні події втрачаються.
2. Немає ключа event. Без нього тригер Custom Event не спрацьовує, хоча змінні доступні.
3. Невичищені попередні дані. У SPA items[] з картки товару потрапляє у наступний purchase, ціни ростуть подвійно.
4. Асинхронний push у момент переходу. Якщо dataLayer.push викликається одночасно з переходом на іншу сторінку, браузер може скасувати запит GA4 — потрібен transport_type: 'beacon' або затримка.
5. PII у dataLayer. Email, телефон, номери карт у рівні даних — порушення політики Google і GDPR. Хешуйте або не передавайте взагалі.
6. Хардкод значень. value: 1999 замість value: window.cartTotal — при зміні кошика value не оновиться.
7. Нестандартні імена ключів. user_id замість user_pseudo_id, total замість value — ламає автоматичну роботу Enhanced Ecommerce.
8. Один великий dataLayer на всю сесію. Замість push’ів на події — повертає старі значення з минулих кроків воронки.

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

Пов’язані матеріали

• Tag (тег) у GTM — інструкція що відправити.
• Trigger (тригер) у GTM — умови спрацьовування.
• Event (подія) в GA4 — базова одиниця аналітики.
• Conversion / Key Event — позначення важливих подій.
• GTM — повний посібник.
• GA4 — повний посібник.
• GA4 Event Builder — конструктор dataLayer push’ів.