Веб-маркетологи должны внимательно отслеживать данные о трафике, пользователях и их действиях. Без этого невозможно проанализировать эффективность маркетинговых кампаний и выполнить оптимизацию. Один из популярных инструментов в арсенале веб-аналитика — контейнер данных. Многие специалисты знакомы с ним, но не все понимают, что такое dataLayer и зачем он на самом деле нужен.
В этой статье мы подробно рассмотрим контейнер dataLayer и расскажем о его преимуществах.
Что такое dataLayer простыми словами
dataLayer (уровень данных) — это своего рода «посредник», который собирает и передаёт информацию о действиях пользователей на сайте. Это специальный контейнер, куда записываются данные о посещениях, кликах и других взаимодействиях.
Проще говоря, dataLayer — это виртуальное хранилище, в котором размещается информация о пользователях, содержимом страницы и других параметрах. GTM обращается к этим данным, использует их в тегах, триггерах и переменных, а также может передавать в сторонние сервисы, такие как Google Analytics, Google Ads, Facebook Pixel и другие.
История появления и роль в веб-аналитике
До появления dataLayer сбор данных на сайтах был сложным и хаотичным процессом. Маркетологам и аналитикам приходилось встраивать множественные скрипты напрямую в код страницы, что:
- Замедляло загрузку сайта из-за дублирования кода.
- Требовало постоянного участия разработчиков даже для мелких изменений.
- Усложняло масштабирование и поддержку аналитики, особенно для динамических событий (например, кликов в SPA-приложениях) 18.
Решение этих проблем началось с внедрения систем управления тегами (TMS), таких как Google Tag Manager (GTM), который появился в 2012 году. Однако GTM нуждался в унифицированном способе передачи данных между сайтом и контейнером — так появился DataLayer. Изначально он использовался только для базового трекинга, т.е. отслеживания кликов и просмотров. Сейчас dataLayer — ключевой метод передачи данных в e-commerce, поэтому каждому аналитику стоит разобраться в нем.
Где и как используется dataLayer
Он активно применяется в разных сферах:
- Веб-аналитика (Google Analytics, Яндекс.Метрика):
- Отслеживание просмотров страниц, событий (клики, скроллы, формы).
- Передача данных о пользователях (ID, демография, интересы).
- Интеграция с GA4, где DataLayer используется для автоматического сбора событий.
Пример:
dataLayer.push({
‘event’: ‘page_view’,
‘page_title’: ‘Главная страница’,
‘user_type’: ‘guest’
});
- Электронная коммерция:
- Трекинг добавления товаров в корзину, покупок, возвратов.
- Передача данных о товарах (цена, категория, бренд) для аналитики и ремаркетинга.
Пример:
dataLayer.push({
‘event’: ‘add_to_cart’,
‘ecommerce’: {
‘items’: [{
‘item_name’: ‘iPhone 15’,
‘price’: 999,
‘item_category’: ‘Смартфоны’
}]
}
});
- Реклама и ремаркетинг (Google Ads, Meta Pixel, TikTok Pixel):
- Настройка аудиторий для таргетинга (например, пользователи, просмотревшие товар).
- Оптимизация рекламных кампаний на основе данных о конверсиях.
Пример:
dataLayer.push({
‘event’: ‘view_item’,
‘product_id’: ‘12345’,
‘product_name’: ‘Ноутбук ASUS’
});
- Персонализация и A/B-тестирование (Google Optimize, VWO):
- Передача данных для показа персонализированного контента.
- Запуск экспериментов на основе поведения пользователей.
Пример:
dataLayer.push({
‘event’: ‘user_segment’,
‘user_tier’: ‘premium’
});
- CRM и автоматизация маркетинга (HubSpot, Salesforce):
- Синхронизация данных о лидах (заполнение форм, скачивание материалов).
- Сегментация пользователей для email-рассылок.
Пример:
dataLayer.push({
‘event’: ‘lead_submitted’,
‘lead_email’: ‘user@example.com’,
‘lead_source’: ‘landing_page’
});
Как работает dataLayer
Когда пользователь взаимодействует с сайтом (например, кликает по кнопке), система собирает данные и отправляет их в dataLayer. Затем GTM считывает информацию и передает ее другим инструментам, которые аналитик подключил.
Структура dataLayer
DataLayer — это JavaScript-массив (обычно window.dataLayer), который содержит объекты с данными о событиях, пользователях и содержимом страницы. Каждый элемент в DataLayer представляет собой отдельный объект или «слой» данных.
Структура объекта DataLayer приведена в таблице.
| Поле | Тип | Описание | Пример |
| event | string | Название события (для триггеров в GTM) | ‘page_view’, ‘form_submit’ |
| ecommerce | object | Данные для Enhanced Ecommerce | { ‘items’: [{…}] } |
| user | object | Сведения о пользователе | { ‘id’: ‘123’, ‘tier’: ‘premium’ } |
| page | object | Информация о странице | { ‘title’: ‘Главная’, ‘url’: ‘/’ } |
| customData | any | Любые кастомные данные | { ‘promoCode’: ‘SUMMER25’ } |
Примеры данных, которые можно передавать
Приведем примеры данных, актуальные для e-commerce, которые аналитик может передавать через dataLayer:
- Идентификатор товара.
- Наименование продукта.
- Цена.
- Бренд.
- Товарная категория.
- Количество.
Кроме того, в dataLayer необходимо предусмотреть следующие ключевые события:
- Просмотр товарной карточки.
- Добавление в список желаний.
- Добавление в корзину.
- Оформление покупки.
Для каждого из этих событий требуется указать переменные, которые в них участвуют.
Для чего используется dataLayer в маркетинге и аналитике
По сути, единственная цель использования dataLayer — централизация и унификация данных о показателях, которые нужны аналитикам и маркетологам. Применяя его, специалисты решают 3 ключевые задачи.
Отслеживание событий и конверсий
dataLayer помогает аналитикам отслеживать ключевые действия пользователя на сайте. Благодаря этому можно изучить весь маршрут человека от захода в онлайн-магазин до совершения покупки или другого финального действия, предусмотренного воронкой.
Улучшение качества данных в отчетах
DataLayer улучшает качество данных в отчетах за счет:
- Стандартизации – единый формат передачи данных для всех систем аналитики.
- Полноты – сбор всех нужных параметров (цена, категория товара и т.д.) без пропусков.
- Точности – данные передаются напрямую из кода сайта, минуя парсинг и ошибки сбора.
- Гибкости – можно добавить любые метрики без изменения структуры отчетов.
- Скорости – данные сразу доступны для тегов и триггеров в GTM.
Мониторинг сложных пользовательских сценариев
Благодаря dataLayer можно отслеживать более сложные сценарии, чем при использовании других методов. Основные причины:
- Точечный трекинг – фиксация каждого шага (просмотры, клики, скроллы) в виде структурированных событий.
- Связка действий – передача контекста между этапами (например, товар → корзина → оплата).
- Гибкие триггеры – в GTM можно настроить реакцию на кастомные события (например, «просмотрел 3 карточки → показал popup»).
Примеры использования dataLayer на практике
Рассмотрим пару примеров применения dataLayer.
Отслеживание кликов по кнопкам и формам
dataLayer часто используется для отслеживания кликов. Его преимущество — отсутствие необходимости добавлять скрипты, кроме базового кода GTM, устанавливаемого на весь сайт. Это достаточно для простого мониторинга.
Пример кода:
document.querySelectorAll(‘.wishlist-button’).forEach(button => {
button.addEventListener(‘click’, function() {
dataLayer.push({
‘event’: ‘add_to_wishlist’,
‘product_id’: this.dataset.productId,
‘user_status’: ‘guest’ // Пример сегментации
});
});
});
Передача e-commerce данных (покупки, корзина и т.д.)
Если вы работаете с онлайн-магазином, то нужно создавать более сложные скрипты, чтобы получать детализированные отчеты. Один из сценариев применения dataLayer — фиксация товаров, добавляемых в корзину, для последующего создания персонализированных рекламных кампаний.
Пример кода:
document.querySelector(‘.buy-button’).addEventListener(‘click’, function() {
dataLayer.push({
‘event’: ‘add_to_cart’, // Название события для триггера в GTM
‘product_id’: ‘iphone_15_pro’,
‘product_name’: ‘iPhone 15 Pro’,
‘price’: 999,
‘currency’: ‘USD’,
‘category’: ‘Смартфоны’
});
});
Как внедрить и настроить dataLayer
На первый взгляд, использование dataLayer кажется сложным. Однако для создания и размещения контейнеров не нужно иметь глубокие познания в программировании, поскольку GTM помогает генерировать фрагменты кода и содержит полезные подсказки.
Где размещать код dataLayer
Сначала вам нужно создать новый контейнер. Как это сделать:
- Нажать на кнопку «Создать контейнер».
- В новом окне указать название контейнера, выбрать платформу (например веб-сайт).
- Нажать на клавишу «Создать».
- Принять условия использования GTM.
Затем перейдите в раздел «Триггеры» и выберите один из готовых вариантов или создайте индивидуальный скрипт, который будет определять события. После этого останется разместить код на сайте, следуя инструкциям в Google Tag Manager.
Сервис указывает, где именно нужно разместить код. Обычно одну часть нужно вставить сразу после <head>, а другую — после <body>.
Рекомендации по структуре и наименованию переменных
Чтобы GTM работал исправно, и данные передавались без проблем, важно правильно называть переменные и создавать логичную структуру контейнера. Мы рекомендуем придерживаться ряда простых советов:
- Применяйте один стиль написания snake_case или camelCase для единообразия (например, product_id или productId).
- Используйте понятные названия и избегайте аббревиатур без пояснений (prod_id → product_id), чтобы в будущем вы или другой специалист точно поняли, какие именно данные собираются.
- Создавайте логичные структуры, т.е. объединяйте связанные данные в объекты (например, user: { id: «123» }).
- Избегайте множеств уровней вложенности (product: { details: { specifications: { color: «black» } } } — плохой вариант). Оптимально — не более 2 уровней.
- Унифицируйте форматы данных – например, price всегда числом, id строкой.
Ошибки при работе с dataLayer
Нередко аналитики допускают банальные ошибки, из-за которых GTM передает некорректные данные или вообще отказывается работать. Рассмотрим 2 наиболее распространенные проблемы:
- Ошибки регистра. dataLayer чувствителен к регистру. Корректное написание: все буквы в нижнем регистре, кроме заглавной «L» (dataLayer). Нельзя использовать разные наименования одного и того же в рамках одного проекта, т.е. DataLayer, datalayer, DATA_LAYER — плохо.
- Неправильная последовательность загрузки. Вызов dataLayer.push() до загрузки контейнера GTM может вызвать потерю данных, так как уровень данных еще не инициализирован. Мы рекомендуем размещать код с dataLayer.push() после фрагмента GTM либо использовать отложенную отправку данных.
Расширенные возможности dataLayer
В документации, созданной разработчиками Google, указаны следующие возможности dataLayer, которые также стоит использовать в работе:
- Групповая отправка информации. Поддерживается одновременная передача нескольких параметров и событий в рамках одного вызова.
- Функциональные возможности работы с хранилищем. При передаче функции в dataLayer создается абстрактная модель, обеспечивающая: чтение и запись значений, обработку данных в формате ключ-значение, а также полный сброс состояния хранилища.
Заключение
dataLayer используется для сбора и передачи данных о взаимодействии пользователя с элементами сайта. Он характеризуется централизацией информации, гибкостью и масштабируемостью. Поэтому dataLayer необходим, когда аналитику нужно отслеживать сложные сценарии.