Блог

← Усі статті

DataLayer — повний гайд для маркетологів

1 квітня 2026

TL;DR: DataLayer — це JavaScript масив (window.dataLayer), який передає структуровані дані з вашого сайту до Google Tag Manager. Ви пушите події та пари ключ-значення через dataLayer.push(), потім читаєте їх у GTM через Data Layer Variables. Він забезпечує ecommerce трекінг, user properties та будь-які кастомні дані для тегів. Завжди використовуйте .push() — ніколи не присвоюйте напряму. Дебажте через GTM Preview mode, консоль браузера або розширення dataLayer Inspector.

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

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

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

DataLayer — це JavaScript масив, який існує на кожній сторінці, де встановлено GTM. У консолі браузера він виглядає так:

window.dataLayer = [
  { "gtm.start": 1711929600000, "event": "gtm.js" },
  { "event": "gtm.dom" },
  { "event": "gtm.load" }
];

Кожен елемент масиву — це JavaScript об'єкт з парами ключ-значення. GTM постійно стежить за цим масивом. Коли пушиться новий об'єкт, GTM обробляє його миттєво — перевіряє тригери, оновлює змінні та запускає теги.

Думайте про dataLayer як про односторонню шину повідомлень:

DataLayer існує тільки в браузері (клієнтська сторона). Він не відправляється на жоден сервер сам по собі. GTM читає його локально і потім відправляє дані на аналітичні платформи через теги, які ви налаштували.

Як dataLayer працює технічно?

GTM підтримує внутрішню модель даних — об'єднаний стан усіх pushes у dataLayer. Коли ви пушите новий об'єкт, GTM не просто додає його в масив. Він мерджить новий об'єкт у свій внутрішній стан:

// Push 1
dataLayer.push({ user_type: 'free', page_category: 'pricing' });

// Push 2
dataLayer.push({ user_type: 'pro' });

// Внутрішній стан GTM після обох pushes:
// { user_type: 'pro', page_category: 'pricing' }

Ключові поведінки:

Ця поведінка мерджу — причина, чому ви можете пушити дані користувача при завантаженні сторінки і посилатися на них пізніше, коли спрацює подія кліку — значення залишаються в стані GTM до перезапису.

Як пушити дані в dataLayer?

Синтаксис завжди однаковий:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'form_submit',
  form_id: 'contact-form',
  form_name: 'Contact Us',
  page_section: 'footer'
});

Розбираємо по частинах:

  1. window.dataLayer = window.dataLayer || []; — перевірка безпеки. Якщо dataLayer ще не існує (push виконується до завантаження GTM), цей рядок створює його. Якщо вже існує — нічого не робить.
  2. window.dataLayer.push({...}) — додає новий об'єкт в масив. GTM обробляє його миттєво.
  3. event: 'form_submit' — назва події. Тригери GTM порівнюються з цим значенням. Використовуйте snake_case.
  4. Інші ключі — кастомні дані, які ви читаєте в GTM через Data Layer Variables.

Типові сценарії для dataLayer pushes:

СценарійДе пушитиПриклад назви події
Дані сторінки (категорія, автор)До GTM-сніпета в <head>Подія не потрібна (push тільки з даними)
Статус логінуПісля перевірки автентифікаціїuser_data_ready
Відправка формиУ callback успішної відправкиform_submit
Додавання в кошикПісля додавання товару в стан кошикаadd_to_cart
Завершення покупкиНа сторінці підтвердження замовленняpurchase
Віртуальний перегляд (SPA)Після зміни маршрутуvirtual_page_view

Як читати значення dataLayer у GTM через змінні?

Push даних — це одна сторона. Друга — читання їх у GTM. Для цього використовуються Data Layer Variables.

  1. У GTM перейдіть до Variables → User-Defined Variables → New
  2. Оберіть тип змінної: Data Layer Variable
  3. Введіть Data Layer Variable Name — має точно відповідати ключу з вашого push (наприклад, form_id)
  4. Назвіть змінну (наприклад, DLV - form_id) та збережіть

Тепер ви можете використовувати {{DLV - form_id}} будь-де в GTM — у параметрах тегів, умовах тригерів або інших змінних.

Вкладені значення: Якщо ваш dataLayer push має вкладені об'єкти, використовуйте точкову нотацію в назві змінної:

// Push
dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'T-12345',
    value: 99.99,
    currency: 'USD'
  }
});

// Назва GTM змінної для transaction ID:
// ecommerce.transaction_id

Значення масивів: Для елементів масиву використовуйте дужки: ecommerce.items.0.item_name читає назву першого товару. Однак для ecommerce трекінгу зазвичай передають весь масив items до GA4, а не окремі елементи.

Яка різниця між dataLayer.push і прямим присвоєнням?

Це найчастіша помилка з dataLayer. Є два способи додати дані, але тільки один правильний:

// ПРАВИЛЬНО — GTM обробляє це миттєво
window.dataLayer.push({ event: 'signup', method: 'google' });

// НЕПРАВИЛЬНО — GTM цього ніколи не побачить
window.dataLayer = [{ event: 'signup', method: 'google' }];

Пряме присвоєння (dataLayer = [...]) замінює весь масив, знищуючи всі попередні дані та ламаючи внутрішній listener GTM. GTM прикріплює event listener до методу .push() масиву під час ініціалізації. Коли ви перезаписуєте масив, цей listener зникає.

Єдине валідне місце для прямого присвоєння — до GTM-сніпета, для попереднього заповнення даних при завантаженні сторінки:

<!-- Це ОК — виконується ДО ініціалізації GTM -->
<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    page_category: 'blog',
    page_author: 'John Smith',
    user_type: 'subscriber'
  });
</script>

<!-- GTM-сніпет далі -->
<script>(function(w,d,s,l,i){...})(...);</script>

Після завантаження GTM завжди використовуйте .push(). Без винятків.

Як використовувати dataLayer для ecommerce трекінгу?

GA4 ecommerce трекінг повністю залежить від dataLayer. Кожна ecommerce-подія вимагає специфічну структуру даних з масивом items:

window.dataLayer.push({ ecommerce: null }); // Очистити попередні ecommerce-дані
window.dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'USD',
    value: 29.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'GTM Pro License',
      item_category: 'Software',
      price: 29.99,
      quantity: 1
    }]
  }
});

Ключові правила ecommerce:

У GTM ваш GA4 Event тег для ecommerce повинен мати увімкнений чекбокс "Send Ecommerce data" у More Settings. Це вказує тегу автоматично читати об'єкт ecommerce з dataLayer — без ручного маппінгу параметрів.

Як використовувати dataLayer для user properties та статусу логіну?

Дані рівня користувача — статус логіну, тип підписки, user ID — потрібно пушити в dataLayer якомога раніше, ідеально до завантаження GTM:

<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    user_id: 'U-98765',
    user_type: 'pro',
    user_plan: 'annual',
    logged_in: true
  });
</script>

Потім у GTM:

  1. Створіть Data Layer Variables для кожного ключа (user_id, user_type, user_plan, logged_in)
  2. У вашому GA4 Configuration тезі (або в кожному GA4 Event тезі) додайте User Properties:
    • Property Name: user_type → Value: {{DLV - user_type}}
    • Property Name: user_plan → Value: {{DLV - user_plan}}
  3. Встановіть поле user_id у GA4 тезі на {{DLV - user_id}} для крос-девайс трекінгу

Примітка щодо приватності: Ніколи не пушіть PII (email, телефон, повне ім'я) в dataLayer без юридичних підстав та необхідності для конкретного тега (наприклад, Enhanced Conversions). DataLayer видимий у консолі браузера будь-кому, хто відкриє DevTools.

Як дебажити dataLayer?

Три інструменти, в порядку корисності:

1. Консоль браузера

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

Для стеження за pushes в реальному часі вставте це перед виконанням дії:

(function() {
  var originalPush = dataLayer.push;
  dataLayer.push = function() {
    console.log('dataLayer.push:', arguments[0]);
    return originalPush.apply(this, arguments);
  };
})();

2. GTM Preview Mode (Tag Assistant)

Натисніть Preview у GTM для запуску Tag Assistant. Кожен dataLayer push з'являється як подія в лівій бічній панелі timeline. Натисніть на будь-яку подію, щоб побачити:

Таб Data Layer — найпотужніший інструмент дебагу. Він показує точно те, що GTM бачить у кожній точці timeline.

3. Розширення DataLayer Inspector

Браузерні розширення як DataLayer Checker або Dataslayer показують dataLayer pushes як постійний оверлей — консоль не потрібна. Зручно для швидких перевірок без відкриття DevTools.

Які найчастіші помилки з dataLayer?

Як переконати розробників впровадити dataLayer pushes?

Причина №1, чому впровадження dataLayer затримується — погана комунікація між маркетинговою та технічною командами. Розробникам потрібна конкретика, а не розмиті запити. Ось що працює:

1. Напишіть tracking-специфікацію. Проста таблиця, що відповідає на всі питання розробника:

Назва подіїТригерКлючіТип данихПриклад
form_submitПри успішній відправці формиform_idstring"contact-form"
form_namestring"Contact Us"
purchaseЗавантаження сторінки підтвердженняecommerce.transaction_idstring"T-12345"
ecommerce.valuenumber99.99
ecommerce.currencystring"USD"

2. Надайте готовий код для копіювання. Розробники не повинні вгадувати синтаксис. Дайте їм точний push-код:

// Коли форма контактів успішно відправлена:
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'form_submit',
  form_id: 'contact-form',
  form_name: 'Contact Us'
});

3. Поясніть "навіщо", а не тільки "що". "Нам потрібен transaction_id, бо Google Ads Enhanced Conversions вимагає його для дедуплікації" — переконливіше, ніж "будь ласка, додайте transaction_id". Розробники пріоритизують роботу з чітким бізнес-впливом.

4. Використовуйте спільний tracking plan. Google Sheet або Notion-документ, який редагують обидві команди. Маркетинг додає нові вимоги трекінгу. Розробка відмічає статус (planned, in progress, deployed, verified). Це усуває email-ланцюжки та Slack-треди, де вимоги губляться.

5. Валідуйте разом. Після впровадження перегляньте вивід dataLayer у GTM Preview mode разом з розробником. Виправляйте проблеми одразу, поки контекст свіжий.

Чи є швидший спосіб працювати з dataLayer?

Написання tracking-специфікацій, кодування dataLayer pushes, створення Data Layer Variables та налаштування тригерів і тегів — це багатокроковий процес, який торкається і розробки, і конфігурації GTM.

GTM Event Helper автоматизує GTM-сторону цього workflow:

  1. Клікніть на елемент на вашій сторінці для генерації стабільного CSS-селектора
  2. AI Agent аналізує контекст сторінки та пропонує відповідну структуру події — включаючи dataLayer push-код, який потрібен вашим розробникам
  3. Теги, тригери та змінні створюються в GTM через API одним кліком
  4. Для ecommerce розширення генерує extraction-скрипти, які динамічно читають дані продуктів зі сторінки та пушать їх у dataLayer в очікуваному GA4-форматі

Замість написання специфікацій з нуля ви отримуєте працюючу імплементацію, яка сама є специфікацією — розробники бачать точно, які дані очікуються та де.

GTM Event Helper генерує dataLayer-код автоматично — без розробника.

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

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

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

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