Аналітика

25 липня 2025

Що таке Data Layer і змінні рівня даних у Google Analytics 4

Data Layer ― це структурований шар даних (спеціальний JavaScript-об'єкт або масив window.dataLayer), який використовується у вебаналітиці для впорядкованого збору та зберігання інформації про взаємодії відвідувачів із сайтом.

Змінні рівня даних (Data Layer Variables) ― це елементи всередині Data Layer. Кожна змінна ― пара «ключ:значення», де ключ ― назва параметра, а значення ― передані дані. GTM звертається до пар, щоб передавати їх у теги, тригери та інші змінні.

Наприклад, під час dataLayer.push({ pageCategory: 'blog', pagePostAuthor: 'Taras' }) у GTM створюються змінні pageCategory і pagePostAuthor, доступні як {{div pageCategory}} і {{div pagePostAuthor}}.

У цій статті я розповім детально про важливість Data Layer і Data Layer Variables, а також покажу, як впровадити Data Layer у вебпроєкт із GA4.

Роль Data Layer у Google Analytics 4

У Google Analytics 4 (GA4) Data Layer виконує роль моста між фронтендом і аналітичною платформою. Розробник додає в шар події (event) і параметри ― value, currency, transaction_id, інші дані про продукт або сесію. Система миттєво зчитує цю інформацію і відправляє її в GA4 через GTM або gtag.js.

Data Layer ― це сховище даних, які можуть бути використані для відстеження подій і формування звітів. Він інтегрується з GA4 через Google Tag Manager (GTM) або безпосередньо через код. Основні цілі використання Data Layer:

спрощення збору даних;
підвищення їхньої точності;
зручність в адмініструванні відстеження без необхідності вносити зміни в код сайту.

Структура Data Layer для GA4

Data Layer ― це насамперед масив JavaScript, який зберігає значення в парах ключ:значення, наприклад:

event ― це ключ, який називає змінну у форматі String;
event_name ― значення будь-якого типу даних, підтримуваного JavaScript, який передається в аналітику в числовому або буквеному вигляді для подальшого аналізу.

Важливо: код створює масив із нуля. Якщо для зазначеного ключа було записано значення, то після відпрацювання коду воно буде перезаписано новим.

Ініціалізація та наповнення Data Layer

Для коректної роботи з Data Layer в Google Tag Manager важливо виконати два кроки: ініціалізувати шар і додавати дані через dataLayer.push().

1. Ініціалізація

Спочатку потрібно створити об’єкт dataLayer як масив, щоб GTM міг його обробляти. Зазвичай його додають у блок <head> відстежуваної сторінки, до завантаження контейнера GTM:

<script>
  window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){
  w[l]=w[l]||[];
  w[l].push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
  var f = d.getElementsByTagName(s)[0],
      j = d.createElement(s), dl = l!='dataLayer'?'&l='+l:'';
  j.async = true;
  j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
  f.parentNode.insertBefore(j, f);
})(window,document,'script','dataLayer','GTM-XXXXXX');
</script>

У цій конструкції window.dataLayer = window.dataLayer || []; браузер перевіряє наявність dataLayer і створює масив під час першого оголошення.

Якщо ж ви використовуєте dataLayer = [...] після завантаження GTM, ви перепишете весь шар і втратите попередні події та дані. GTM при цьому може перестати коректно відстежувати взаємодії.

2. Додавання даних за допомогою .push()

Щоб передати інформацію в GTM, використовуйте метод push():

window.dataLayer.push({
  event: 'buttonClick',
  buttonText: 'Придбати'
});

Push() додає об’єкт у кінець масиву, зберігаючи наявні записи, що дає змогу GTM зчитувати події та параметри по черзі.

3 Альтернативи: push() і gtag

Можна застосувати gtag():

gtag('event', 'buttonClick', { buttonText: 'Придбати' });

Це простіше, але під час виконання він теж використовує dataLayer.push().

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

Так само існують:

Анотації Data Layer до завантаження GTM.

<script>
  dataLayer = [{ userID: '15243' }];
</script>

Ці дані будуть доступні відразу під час завантаження, але так само є більший ризик перезапису.

Надсилання серверної логіки або через сторонні бібліотеки за допомогою Measurement Protocol.

Базовий підхід ― ініціалізація + push() ― залишається пріоритетним.

Дані в DataLayer можна застосовувати для налаштування тригерів і змінних у GTM. Це дає змогу створювати гнучкі правила для відстеження подій і передавання даних в інші системи, як-от Google Analytics і Facebook Pixel.

Змінні DataLayer

Основні змінні DataLayer:

event ― позначає конкретну подію, наприклад, клік по кнопці або відправлення форми. Ця змінна допомагає відстежувати користувацькі дії та запускати відповідні теги в GTM.
event_params ― додаткові параметри події, такі як категорія, дія та мітка.

Приклад. Можна передати подію класичним способом:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'video_play',
  video_title: 'Реклама нових кросівок',
  video_duration: 30,
  category: 'Рекламні відео',
  label: 'Головна сторінка',
  action: 'Play'
});

Або помістити всі параметри у вкладений об'єкт:

dataLayer.push({
  event: 'video_play',
  event_params: {
    video_title: 'Реклама нових кросівок',
    video_duration: 30,
    category: 'Рекламні відео',
    label: 'Головна сторінка',
    action: 'Play'
  }
});

user_properties ― властивості користувача для сегментації аудиторії.
userID ― унікальний ідентифікатор користувача. Корисний для персоналізації контенту і відстеження поведінки.

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

ecommerce ― дані про транзакції та покупки: інформація про продукт, вартість, кількість та ідентифікатор транзакції. Вони особливо важливі для інтернет-магазинів, оскільки дають змогу відстежувати конверсії та аналізувати поведінку покупців.

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

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

Також автоматично збираються змінні про події page_location, page_referrer і page_title. Вони дають контекст кожної взаємодії користувача.

page_location ― повний URL сторінки, де відбулася подія. Він включає протокол, домен, шлях і параметри. Наприклад, юзер заповнив форму на https://site.com/blog/post?id=1289. Завдяки page_location ви знаєте точне місце дії і можете пов’язати його з подальшими метриками.
page_referrer ― URL попередньої сторінки, з якої прийшов відвідувач. Найчастіше це внутрішнє посилання або зовнішнє джерело. Розуміння реферера дає змогу виявити канали та призначені для користувача траєкторії: наприклад, кампанії з 404-сторінками або навігаційні шляхи всередині сайту.
page_title ― значення тега <title> сторінки, або, за необхідності, перевизначена версія через Data Layer. Такий підхід дає змогу показувати зрозумілі та читабельні назви у звітах, навіть якщо URL погано читається.

Приклад структури DataLayer

Нижче наведено приклад структури DataLayer для події purchase (купівля):

// Ініціалізуємо dataLayer як масив (якщо ще не створено)
window.dataLayer = window.dataLayer || [];

// Відправляємо подію покупки
window.dataLayer.push({
    event: "purchase", // Назва події -- тригер для GTM/GA4

    event_params: {
        transaction_id: "T12345",  // Унікальний ID замовлення
        value: 59.99,               // Загальна сума покупки
        currency: "USD",           // Валюта транзакції
        items: [                   // Список товарів у замовленні
            {
                item_name: "Футболка",    // Назва товару
                item_id: "SKU12345",     // SKU або артикул
                price: 29.99,            // Ціна за одиницю
                quantity: 2               // Кількість
            }
        ]
    },

    user_properties: {
        user_id: "user_132",         // Ваш внутрішній ідентифікатор користувача
        user_type: "registered"       // Статус користувача: зареєстрований
    },

    // Контекст сторінки, автоматично збирається браузером
    page_location: window.location.href, // Поточний URL сторінки
    page_referrer: document.referrer,     // Звідки прийшов користувач
    page_title: document.title            // Заголовок сторінки
});

event: «purchase» визначає, що це подія купівлі, GTM відстежує саме це ім’я для надсилання даних у GA4;
event_params описує деталі транзакції ― transaction_id, value, currency, це обов’язкові стандарти GA4;
items ― масив товарів з параметрами, який дає можливість будувати звіти за позиціями замовлення;
user_properties зберігають мета-дані про користувача (ID, тип), застосовуються до всіх подій цього користувача і допомагають у сегментації та мульти-сесійному аналізі;
page_location, page_referrer, page_title ― забезпечують контекст сторінки, автоматично збираються і передаються у звіти GA4.

Що відбувається далі:

GTM читає цей push, активує тег, налаштований на event = purchase, і наповнить його параметрами з event_params і user_properties.
GA4 отримує ці дані й формує звіти за транзакціями ― такі, як Revenue, Items, Cart Conversion Rate.
User properties застосовуються до всіх майбутніх подій протягом терміну життя сесії та користувача.

Кроки з упровадження Data Layer у вебпроєкт із GA4

Впровадження Data Layer дає змогу гнучкіше й точніше відстежувати дії відвідувачів на сайті. Ця інструкція допоможе в кілька кліків реалізувати його на своїй сторінці.

1. Впровадження базового шару даних

Додайте в <head> HTML-сторінки (до скрипта GTM) такий код:

<script>
  window.dataLayer = window.dataLayer || [];
</script>

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

2. Встановлення Google Tag Manager

Після ініціалізації вставте стандартний код GTM-контейнера:

<script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXXXXX');</script>

Цей скрипт підключає GTM і починає відстежувати всі наступні виклики.

3. Надсилання даних через dataLayer.push()

Коли потрібно надіслати дані в GA4, можете застосувати на сторінці підтвердження замовлення:

window.dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'T12345',
    value: 29.99,
    currency: 'USD',
    items: [{
      item_name: 'Товар 1',
      price: 29.99,
      quantity: 1
    }]
  }
});

4. Налаштування GTM: тег і тригер

Створіть тег GA4 Event у GTM і вкажіть Measurement ID GA4.
У секції Event Name використовуйте purchase (або інше ім’я події).
Активуйте чекбокс Send ecommerce data ― GTM автоматично підтягне об’єкт.
Налаштуйте тригер ― Custom Event, ключ ― purchase.

5. Публікація та тестування

Використовуйте режим Preview у GTM: перевірте, чи правильно спрацьовують теги і чи передаються потрібні параметри.
У GA4 увімкніть DebugView, щоб побачити події, що надходять, і перевірити їхній вміст.

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

Висновок

Data Layer ― це спеціальний JavaScript-масив, який зберігає дані про взаємодії користувачів і слугує основою для передавання подій і параметрів у GA4 через GTM.
Структура Data Layer будується на парах «ключ:значення» і дає змогу налаштовувати відстеження будь-яких подій і користувацьких властивостей.
Ініціалізація та наповнення виконуються через window.dataLayer = [] і метод push(), який додає нові дані без втрати вже збереженої інформації.
Змінні Data Layer охоплюють event, event_params, user_properties, ecommerce й автоматичні параметри сторінки, що допомагає створювати розширені звіти та сегментацію.
Впровадження Data Layer складається з налаштування базового шару, встановлення GTM, створення тегів і тригерів, а також тестування в режимі Preview і DebugView у GA4.

Ярослав Приймич

Познайомився з SEO в 2019 році, займаючи позиції веб майстра регіонального інтернет-магазину. Серйозніше почав займатись SEO з 2021 року. Наразі насолоджуюсь своєю позицією в Netpeak Agency Ukraine

Інші пости цього автора

Дізнатися більше

робота в Google Analytics

Знайшли помилку? Оберіть її та натисніть Ctrl + Enter

Свіжі

Маркетинг на новому ринку: стратегії, перевірені 4900+ глобальними кейсами

Тож зібрали для вас все, що варто знати, перш ніж ставити прапорець на мапі і планувати міжнародні кампанії: від перевірки готовності бізнесу до експансії до причин, чому в Японії краще забути про Facebook

Ще 15 фішок, за які ми любимо Telegram

Месенджер оновився, тож час для продовження статті про фішки Telegram

Що таке Grey Hat SEO та як ним користуватись

Біла, чорна і сіра оптимізація сайту. Як використовувати різні способи оптимізації і не потрапити під санкції