Налаштування Data Layer для Tag Manager

Налаштування Data Layer для Tag Manager

Data Layer — це JavaScript-масив, через який ваш сайт передає структуровані дані в Google Tag Manager. GTM читає Data Layer і використовує ці дані в тегах і тригерах. Правильна архітектура Data Layer дозволяє маркетологам самостійно налаштовувати теги без змін у коді.

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

Data Layer повинен бути ініціалізований перед завантаженням GTM:

<script>
window.dataLayer = window.dataLayer || [];
// Глобальні дані сторінки
window.dataLayer.push({
    pageType:    '{{ $pageType }}',   // 'product', 'category', 'checkout', 'confirmation'
    siteLanguage: '{{ app()->getLocale() }}',
    {% if auth()->check() %}
    userId:      {{ auth()->id() }},
    userType:    '{{ auth()->user()->isB2B() ? "b2b" : "b2c" }}',
    userPlan:    '{{ auth()->user()->plan }}',
    {% endif %}
});
</script>
<!-- Далі GTM snippet -->

Структура подій

Стандарт — кожна подія містить event (назва), тематичні дані та при необхідності ecommerce:

// Добра структура
dataLayer.push({
    event: 'product_add_to_cart',
    ecommerce: {
        currency: 'RUB',
        value:    product.price,
        items: [{
            item_id:       product.id,
            item_name:     product.name,
            item_brand:    product.brand,
            item_category: product.category,
            price:         product.price,
            quantity:      qty
        }]
    }
});

Очищення попередніх даних ecommerce

Перед кожною подією e-commerce потрібно очищати попередні дані — інакше GTM може їх змішати:

// Обов'язково перед кожною подією e-commerce
dataLayer.push({ ecommerce: null });
dataLayer.push({
    event: 'view_item',
    ecommerce: { /* нові дані */ }
});

Налаштування змінних у GTM

У GTM створіть змінні типу "Data Layer Variable":

• dlv - ecommerce.value → ecommerce.value
• dlv - ecommerce.items → ecommerce.items
• dlv - userId → userId

Ці змінні використовуються в тегах GA4 для передачі параметрів.

Тригери для подій

У GTM створіть тригер "Custom Event" з назвою події з Data Layer:

• Trigger type: Custom Event
• Event name: product_add_to_cart
• Fire on: All Custom Events

Налагодження

// Переглянути всі події Data Layer у консолі
window.dataLayer.forEach((item, index) => {
    if (item.event) console.log(index, item.event, item);
});

GTM Preview Mode показує Data Layer у правій панелі для кожної події — це основний інструмент налагодження.

Серверний Data Layer (SSR)

З SSR (Next.js, Nuxt) дані можуть бути вбудовані в HTML на сервері, що виключає мерехтіння undefined:

// На сервері
const initialDataLayer = [
    {
        event:    'page_data',
        pageType: 'product',
        product: { id: product.id, name: product.name, price: product.price }
    }
];

<script>
window.dataLayer = <?= json_encode($initialDataLayer) ?>;
</script>

Час налаштування: 2–3 дні для повної архітектури Data Layer з документацією для маркетологів.