Настройка 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 с документацией для маркетологов.