dataLayer

dataLayer (уровень данных) — это глобальный JavaScript-массив на странице сайта, играющий роль буфера между кодом сайта и Google Tag Manager (GTM). Технически это переменная window.dataLayer, в которую разработчик в нужные моменты добавляет объекты с данными через dataLayer.push({...}), а GTM читает эти объекты, превращает их в переменные и передаёт в теги (GA4, Google Ads, Meta Pixel и т.д.). Без dataLayer GTM мог бы считывать только то, что видно в DOM (текст, классы, атрибуты). С dataLayer — вы имеете полный контроль над схемой данных и можете передавать то, что вообще не рендерится на странице: user ID, стоимость заказа в валюте магазина, степень членства, внутреннюю категорию товара.

dataLayer — фундамент любой серьёзной аналитической архитектуры в 2026. Без него GA4, Meta Pixel, server-side трекинг работают хрупко: ломаются при любом редизайне фронтенда. С правильно реализованным dataLayer трекинг переживает годы изменений UI без каких-либо правок в GTM.

Зачем нужен dataLayer

dataLayer решает три задачи:

1. Отделить логику сайта от логики аналитики. Разработчики отвечают за push в dataLayer, маркетологи в GTM — за то, куда и как эти данные отправлять. Чтобы добавить новую систему аналитики, не нужно изменений в коде сайта.
2. Передавать данные, недоступные из DOM. Цена с учётом скидки, ID пользователя с бэкенда, тип купленного товара, статус подписки — всё это не видно на HTML-странице, но нужно для анализа.
3. Обеспечить консистентность между системами. Один push в dataLayer может одновременно сработать на GA4, Meta Pixel, Google Ads Conversion — все получают одинаковые цифры.

Без уровня данных приходится либо хардкодить вызовы gtag() и fbq() в коде сайта, либо пытаться вычитать значения из DOM регулярками — оба подхода неминуемо ломаются при перепроектировании фронтенда.

Как dataLayer инициализируется и работает

На старте GTM-контейнер создаёт (или использует существующий) массив window.dataLayer:

<script>
  window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[]; ...})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>

Важно: объявить window.dataLayer = window.dataLayer || [] перед контейнером GTM, если вы хотите передать начальные переменные ещё на этапе загрузки (например, user ID, тип страницы, категорию).

После этого любой скрипт на сайте может добавлять данные:

dataLayer.push({
  event: 'form_submit',
  form_name: 'newsletter',
  form_location: 'footer',
  user_status: 'guest'
});

GTM слушает эти вызовы. Когда появляется объект с ключом event, GTM создаёт Data Layer Event — сигнал, на который можно повесить триггер Custom Event. Триггер включает тег (например, GA4 Event Tag), который в свою очередь читает другие значения из dataLayer через Data Layer Variables.

Архитектура потока данных

Сайт                  dataLayer            GTM Trigger          GTM Tag
[click] ─────push───→ {event:'add_to_cart',  ─→ Custom Event   ─→ GA4 Event Tag
                       value:1490, items:..} ─→ Trigger fires  ─→ Reads DLV
                                                                  ─→ Sends to GA4

Структура push-сообщения

Типичный push имеет одно обязательное поле event и любое количество дополнительных:

dataLayer.push({
  event: 'purchase',
  transaction_id: 'T-12345',
  value: 1999.00,
  currency: 'UAH',
  items: [
    { item_id: 'SKU-001', item_name: 'Курс GA4', price: 1999, quantity: 1 }
  ]
});

Google имеет стандартизованные схемы для популярных сценариев, которых стоит придерживаться, чтобы ваш dataLayer без изменений работал с Enhanced E-commerce GA4:

Именование ключей должно соответствовать спецификации GA4 — тогда GTM-тег GA4 Event может просто выбрать поле «Use Data Layer» вместо ручного маппинга каждого параметра.

Структура items[] для e-commerce

items: [{
  item_id: 'SKU-12345',           // обязательно
  item_name: 'Кожаный рюкзак',   // обязательно
  item_brand: 'BrandX',
  item_category: 'Аксессуары',
  item_category2: 'Сумки',
  item_category3: 'Рюкзаки',
  item_variant: 'Чёрный / L',
  price: 1490,
  quantity: 1,
  index: 0,                        // позиция в списке
  discount: 100,
  coupon: 'SUMMER10'
}]

dataLayer в Single Page Applications (SPA)

В React / Vue / Next.js важно правильно обрабатывать смену маршрута. Браузер не перезагружает страницу, поэтому page_view нужно пушить вручную:

// React Router
import { useLocation } from 'react-router-dom';

const location = useLocation();
useEffect(() => {
  dataLayer.push({
    event: 'page_view',
    page_path: location.pathname,
    page_title: document.title
  });
}, [location]);

// Vue Router
router.afterEach((to) => {
  dataLayer.push({
    event: 'page_view',
    page_path: to.fullPath,
    page_title: document.title
  });
});

// Next.js
import { useRouter } from 'next/router';
useEffect(() => {
  router.events.on('routeChangeComplete', (url) => {
    dataLayer.push({event: 'page_view', page_path: url});
  });
}, []);

Перед push’ем нового page_view рекомендуется очистить старые переменные через специальный push { ecommerce: null }, чтобы предыдущие items[] не накапливались и не попадали в следующие события. Этот паттерн описан в документации Google для Enhanced E-commerce.

Готовые пакеты: react-gtm-module для React, GTM4WP для WordPress, gtag-ssr для Next.js SSR.

dataLayer vs gtag.js: какую разницу знать

На небольших сайтах с единственной системой аналитики gtag.js достаточно. Как только появляется вторая система (Ads, Meta, LinkedIn, коллтрекинг) или потребность в server-side GTM — dataLayer становится необходимостью.

Data Layer Variable в GTM

Data Layer Variable (DLV) — тип пользовательской переменной в GTM, читающей значение из window.dataLayer по указанному пути.

Настройка: New Variable → Data Layer Variable → Data Layer Variable Name (например, ecommerce.value).

Поддерживает вложенные пути через точку:

• ecommerce.value — полная сумма заказа.
• ecommerce.items.0.item_id — первый item в массиве.
• user.subscription.tier — глубоко вложенное значение.

Версия 2 (рекомендованная) — для GA4-эпохи с иерархической структурой. Версия 1 — устаревшая, для старых UA-контейнеров.

Default Value — fallback, если ключ не найден (например, (not set) для отсутствующих категорий).

Интеграция с коллтрекингом и UTM-метками

В типичном сценарии коллтрекинг пушит в dataLayer событие звонка с параметрами:

dataLayer.push({
  event: 'phone_call',
  call_duration: 184,
  call_source: 'google / cpc',
  utm_source: 'google',
  utm_campaign: 'brand_search',
  gclid: 'CjwKCAjw...'
});

GTM имеет триггер на event = phone_call, который запускает тег GA4 generate_lead и тег Google Ads Conversion. Значения utm_source и utm_campaign dataLayer получил от самого коллтрекинга, который ранее привязал номер к источнику. Благодаря этому конверсия «звонок» атрибутируется правильному каналу даже через недели после первого визита, что важно для корректного расчёта CPA и ROAS.

Server-side dataLayer

С появлением server-side GTM (sGTM) архитектура dataLayer расширяется:

Браузер → Client GTM → Sends to → Server GTM (sGTM endpoint)
                                  ↓
                                  ├─ Cleans PII
                                  ├─ Enriches from CRM (LTV, segment)
                                  └─ Forwards to GA4 / Meta CAPI / TikTok

dataLayer на клиенте остаётся тот же, но GTM-контейнер передаёт события не напрямую в вендоры, а на ваш sGTM endpoint в Cloud Run. Это даёт:

• Обход ad-blockers и Safari ITP.
• First-party cookies (28 дней вместо 7).
• Очистка PII перед отправкой.
• Обогащение данных из CRM/бэкенда.

Как проверить, что dataLayer работает

5 инструментов:

1. Console браузера — введите dataLayer и Enter, увидите массив всех push’ей с момента загрузки. Самый быстрый дебаг.
2. GTM Preview Mode (Tag Assistant) — Tags fired/not fired для каждого события, значения DLV, полный state dataLayer.
3. GA Debugger Chrome extension — добавляет debug_mode=1 к запросам GA4, события появляются в DebugView.
4. GA4 DebugView — Admin → DebugView показывает события из debug-сессий в real-time.
5. BigQuery events_intraday_* — для зрелых property с SQL-анализом.

Чек-лист перед Publish:

• Событие имеет правильный event ключ.
• Все обязательные параметры присутствуют и не пустые.
• Нет PII (email, phone, ID карты).
• Для e-commerce items[] не завышен (предыдущие очищены через { ecommerce: null }).
• Значения соответствуют GA4-стандарту (currency в ISO-формате, value числовой).

Типичные ошибки при работе с dataLayer

1. Push перед инициализацией. Если объявить window.dataLayer после GTM-контейнера — ранние события теряются.
2. Нет ключа event. Без него триггер Custom Event не срабатывает, хотя переменные доступны.
3. Неочищенные предыдущие данные. В SPA items[] из карточки товара попадает в следующий purchase, цены растут вдвое.
4. Асинхронный push в момент перехода. Если dataLayer.push вызывается одновременно с переходом на другую страницу, браузер может отменить запрос GA4 — нужен transport_type: 'beacon' или задержка.
5. PII в dataLayer. Email, телефон, номера карт в уровне данных — нарушение политики Google и GDPR. Хешируйте или не передавайте вообще.
6. Хардкод значений. value: 1999 вместо value: window.cartTotal — при изменении корзины value не обновится.
7. Нестандартные имена ключей. user_id вместо user_pseudo_id, total вместо value — ломает автоматическую работу Enhanced Ecommerce.
8. Один большой dataLayer на всю сессию. Вместо push’ей на события — возвращает старые значения с прошлых шагов воронки.

Проверять dataLayer удобнее всего через режим Preview в GTM (панель Tag Assistant), который показывает состояние dataLayer на каждом шаге и какие триггеры сработали.

Связанные материалы

• Tag (тег) в GTM — инструкция что отправить.
• Trigger (триггер) в GTM — условия срабатывания.
• Event (событие) в GA4 — базовая единица аналитики.
• Conversion / Key Event — обозначение важных событий.
• GTM — полное руководство.
• GA4 — полное руководство.
• GA4 Event Builder — конструктор dataLayer push’ей.