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

803

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

Свіжі

Як провести SEO-аналіз сайту: покрокові методи і корисні інструменти

Детальний посібник з аналізу сайту: технічний стан, контент, швидкість, структура, зовнішні фактори і поведінкові показники для комплексного SEO-аналізу

Як налаштувати ремаркетинг для реклами в Instagram та Facebook

Розбираэмо, як сегментувати аудиторії і використовувати їх для реклами в Instagram та Meta

AI пошук 2026: що чекає на бізнес і як адаптувати маркетингові стратегії?