dataLayer: что это, как работает уровень данных в GTM и примеры реализации

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

Зачем нужен dataLayer

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

Отделить логику сайта от логики аналитики. Разработчики отвечают за push в dataLayer, маркетологи в GTM — за то, куда и как эти данные отправлять. Чтобы добавить новую систему аналитики, не нужно менять код сайта.
Передавать данные, недоступные из DOM. Цена с учётом скидки, ID пользователя с бэкенда, тип купленного товара, статус подписки — всё это не видно на HTML-странице, но нужно для анализа.
Обеспечить консистентность между системами. Один 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.

Структура 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:

Схема	Для чего	Обязательные ключи
`view_item_list`	Список товаров (категория)	`items[]`
`view_item`	Карточка товара	`items[]`, `currency`, `value`
`add_to_cart`	Добавление в корзину	`items[]`, `currency`, `value`
`begin_checkout`	Начало оформления	`items[]`, `currency`, `value`
`purchase`	Покупка	`transaction_id`, `value`, `currency`, `items[]`
`generate_lead`	Форма заявки	`value`, `currency`

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

dataLayer в Single Page Applications (SPA)

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

// На смену маршрута
router.afterEach((to) => {
  dataLayer.push({
    event: 'page_view',
    page_path: to.fullPath,
    page_title: document.title
  });
});

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

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

Аспект	dataLayer + GTM	gtag.js
Что нужно на сайте	Один контейнер GTM + `push` от разработчика	Вызовы `gtag('event', ...)` по коду
Кто управляет тегами	Маркетолог в GTM	Разработчик в коде
Поддержка многих систем	Один push → много тегов	Отдельный вызов для каждой системы
Версионирование	Встроенное в GTM	Через git
Релиз изменений	Публикация в GTM (минуты)	Релиз кода (дни)

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

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

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

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

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

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

Push до инициализации. Если объявить window.dataLayer после GTM-контейнера — ранние события теряются.
Нет ключа event. Без него триггер Custom Event не срабатывает, хотя переменные доступны.
Неочищенные предыдущие данные. В SPA items[] с карточки товара попадает в следующий purchase, цены растут вдвое.
Асинхронный push в момент перехода. Если dataLayer.push вызывается одновременно с переходом на другую страницу, браузер может отменить запрос GA4 — нужен transport_type: 'beacon' или задержка.
PII в dataLayer. Email, телефон, номера карт на уровне данных — нарушение политики Google и GDPR. Хэшируйте или не передавайте вообще.

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

dataLayer