Аналитика
1753427100
UK

Что такое Data Layer и переменные уровня данных в Google Analytics 4
1026
0
20
Ярослав Приймич

Data Layer — это структурированный слой данных (специальный JavaScript‑объект или массив window.dataLayer), который используется в веб‑аналитике для упорядоченного сбора и хранения информации о взаимодействиях посетителей с сайтом. 

Переменные уровня данных (Data Layer Variables) — это элементы внутри Data Layer. Каждая переменная — пара «ключ:значение», где ключ — название параметра, а значение — передаваемые данные. GTM обращается к парам, чтобы передавать их в теги, триггеры и другие переменные. 

Например, при dataLayer.push({ pageCategory: 'blog', pagePostAuthor: ‘Taras' }) в GTM создаются переменные pageCategory и pagePostAuthor, доступные как {{div pageCategory}} и {{div pagePostAuthor}}.

В этой статье я расскажу детально о важности Data Layer и Data Layer Variables, а также покажу, как внедрить Data Layer в веб-проект с GA4.

Роль Data Layer в Google Analytics 4

В Google Analytics 4 (GA4) Data Layer выполняет роль моста между фронтендом и аналитической платформой. Разработчик добавляет в слой события (event) и параметры — value, currency, transaction_id, другие данные о продукте или сессии. Система мгновенно считывает эту информацию и отправляет ее в GA4 через GTM или gtag.js.

Data Layer — это хранилище данных, которые могут быть использованы для отслеживания событий и формирования отчетов. Он интегрируется с GA4 через Google Tag Manager (GTM) или напрямую через код. Основные цели использования Data Layer: 

  • упрощение сбора данных; 

  • повышение их точности; 

  • удобство в администрировании отслеживания без необходимости вносить изменения в код сайта.

Структура Data Layer для GA4

Data Layer — это прежде всего массив JavaScript, который сохраняет значение в парах ключ:значение, например:

Data Layer — это прежде всего массив JavaScript, который сохраняет значение в парах ключ:значение, например:

  • event — это ключ, который называет переменную в формате String;

  • event_name — значение любого типа данных, поддерживаемого JavaScript, который передается в аналитику в числовом или буквенном виде для дальнейшего анализа.

Важно: код создает массив с нуля. Если для указанного ключа было записано значение, то после отрабатывания кода, оно будет перезаписано новым.

Инициализация и наполнение Data Layer

Для корректной работы с Data Layer в Google Tag Manager важно выполнить два шага: инициализировать слой и добавлять данные через dataLayer.push().

1. Инициализация

Сначала нужно создать объект dataLayer как массив, чтобы GTM мог его обрабатывать. Обычно его добавляют в блок <head> отслеживаемой страницы, до загрузки контейнера GTM:

<script>
  window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){
  w[l]=w[l]||[];
  w[l].push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
  var f = d.getElementsByTagName(s)[0],
      j = d.createElement(s), dl = l!='dataLayer'?'&l='+l:'';
  j.async = true;
  j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
  f.parentNode.insertBefore(j, f);
})(window,document,'script','dataLayer','GTM-XXXXXX');
</script>

В этой конструкции window.dataLayer = window.dataLayer || []; браузер проверяет наличие dataLayer и создаёт массив при первом объявлении. 

Если же вы используете dataLayer = […] после загрузки GTM, вы перепишете весь слой и потеряете предыдущие события и данные. GTM при этом может перестать корректно отслеживать взаимодействия.

2. Добавление данных с помощью .push()

Чтобы передать информацию в GTM, используйте метод push():

window.dataLayer.push({
  event: 'buttonClick',
  buttonText: 'Приобрести'
});

Push() добавляет объект в конец массива, сохраняя существующие записи, что позволяет GTM считывать события и параметры по очереди.

3. Альтернативы: push() и gtag

Можно применить gtag():

gtag('event', 'buttonClick', { buttonText: 'Приобрести' });

Это проще, но при исполнении он тоже использует dataLayer.push().

gtag() — это как сокращение конструкции dataLayer.push(), но под ним — унифицированная структура. Если ваша структура кастомная, данные будут составлены некорректно, что несет за собой риск перезаписи данных. 

Так же существуют:

  1. Аннотации Data Layer до загрузки GTM.

<script>
  dataLayer = [{ userID: '15243' }];
</script>

Эти данные будут доступны сразу при загрузке, но так же есть больший риск перезаписи.

  1. Отправка серверной логики или через сторонние библиотеки с помощью Measurement Protocol. 

Базовый подход — инициализация + push() — остается приоритетным.

Данные в DataLayer можно применять для настройки триггеров и переменных в GTM. Это позволяет создавать гибкие правила для отслеживания событий и передачи данных в другие системы, такие как Google Analytics и Facebook Pixel.

Переменные DataLayer

Основные переменные DataLayer:

  1. event — обозначает конкретное событие, например, клик по кнопке или отправка формы. Эта переменная помогает отслеживать пользовательские действия и запускать соответствующие теги в GTM.

  2. event_params — дополнительные параметры события, такие как категория, действие и метка.

Пример. Можна передать событие классическим способом:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'video_play',
  video_title: 'Реклама новых кроссовок',
  video_duration: 30,
  category: 'Рекламные видео',
  label: 'Главная страница',
  action: 'Play'
});

Или поместить все параметры во вложенный объект:

dataLayer.push({
  event: 'video_play',
  event_params: {
    video_title: 'Реклама новых кроссовок',
    video_duration: 30,
    category: 'Рекламные видео',
    label: 'Главная страница',
    action: 'Play'
  }
});

  1. user_properties — свойства пользователя для сегментации аудитории.

  2. userID — уникальный идентификатор пользователя. Полезен для персонализации контента и отслеживания поведения. 

Например, при входе посетителя на сайт передача userID в DataLayer дает возможность отслеживать его действия на сайте и анализировать взаимодействие с контентом. Это особенно полезно для сайтов с авторизацией.

  1. ecommerce — данные о транзакциях и покупках: информация о продукте, стоимость, количество и идентификатор транзакции. Они особенно важны для интернет-магазинов, так как позволяют отслеживать конверсии и анализировать поведение покупателей. 

Например, при успешной покупке отправляется объект с информацией о купленных товарах. Это поможет в дальнейшем анализе продаж и эффективности маркетинговых кампаний.

  1. pageCategory — категории страницы, на которой находится пользователь. Полезно для сегментации данных и анализа поведения  на разных типах страниц. Например, для интернет-магазина передавайте категорию товаров и анализируйте, какие категории наиболее популярны и где посетители проводят больше времени.

Также автоматически собираются переменные о событиях page_location, page_referrer и page_title. Они дают контекст каждого взаимодействия пользователя.

  1. page_location — полный URL страницы, где произошло событие. Он включает протокол, домен, путь и параметры. Например, юзер заполнил форму на https://site.com/blog/post?id=1289. Благодаря page_location вы знаете точное место действия и можете связать его с последующими метриками.

  2. page_referrer — URL предыдущей страницы, с которой пришел посетитель. Чаще всего это внутренняя ссылка или внешний источник. Понимание реферера позволяет выявить каналы и пользовательские траектории: например, кампании с 404-страницами или навигационные пути внутри сайта.

  3. page_title — значение тега <title> страницы, или, при необходимости, переопределённая версия через Data Layer. Такой подход позволяет показывать понятные и читабельные названия в отчётах, даже если URL плохо читается.

Пример структуры DataLayer

Ниже приведен пример структуры DataLayer для события purchase (покупка):

// Инициализируем dataLayer как массив (если еще не создан)
window.dataLayer = window.dataLayer || [];

// Отправляем событие покупки
window.dataLayer.push({
    event: "purchase", // Название события -- триггер для GTM/GA4

    event_params: {
        transaction_id: "T12345",  // Уникальный ID заказа
        value: 59.99,               // Общая сумма покупки
        currency: "USD",           // Валюта транзакции
        items: [                   // Список товаров в заказе
            {
                item_name: "Футболка",    // Название товара
                item_id: "SKU12345",     // SKU или артикул
                price: 29.99,            // Цена за единицу
                quantity: 2              // Количество
            }
        ]
    },

    user_properties: {
        user_id: "user_132",         // Ваш внутренний идентификатор пользователя
        user_type: "registered"      // Статус пользователя: зарегистрирован
    },

    // Контекст страницы, автоматически собирается браузером
    page_location: window.location.href, // Текущий URL страницы
    page_referrer: document.referrer,     // Откуда пришёл пользователь
    page_title: document.title            // Заголовок страницы
});

  • event: "purchase" определяет, что это событие покупки, GTM отслеживает именно это имя для отправки данных в GA4;

  • event_params описывает детали транзакции — transaction_id, value, currency, это обязательные стандарты GA4; 

  • items — массив товаров с параметрами, который дает возможность строить отчеты по позициям заказа;

  • user_properties хранят мета‑данные о пользователе (ID, тип), применяются ко всем событиям этого пользователя и помогают в сегментации и мульти-сессионном анализе;

  • page_location, page_referrer, page_title — обеспечивают контекст страницы, автоматически собираются и передаются в отчеты GA4.

Что происходит далее:

  1. GTM читает этот push, активирует тег, настроенный на event = purchase, и наполнит его параметрами из event_params и user_properties.

  2. GA4 получает эти данные и формирует отчёты по транзакциям — такие, как Revenue, Items, Cart Conversion Rate.

  3. User properties применяются ко всем будущим событиям в течение срока жизни сессии и пользователя.

Шаги по внедрению Data Layer в веб-проект с GA4

Внедрение Data Layer позволяет более гибко и точно отслеживать действия посетителей на сайте. Эта инструкция поможет в несколько кликов реализовать его на своей странице.

1. Внедрение базового слоя данных

Добавьте в <head> HTML-страницы (до скрипта GTM) следующий код:

<script>
  window.dataLayer = window.dataLayer || [];
</script>

Это создает глобальный объект dataLayer — массив, в котором GTM будет читать поступающие события и параметры, если он еще не инициализирован.

2. Установка Google Tag Manager

После инициализации вставьте стандартный код GTM-контейнера:

<script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXXXXX');</script>

Этот скрипт подключает GTM и начинает отслеживать все последующие вызовы.

3. Отправка данных через dataLayer.push()

Когда нужно отправить данные в GA4, можете применить на странице подтверждения заказа:

window.dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'T12345',
    value: 29.99,
    currency: 'USD',
    items: [{
      item_name: 'Товар 1',
      price: 29.99,
      quantity: 1
    }]
  }
});

4. Настройка GTM: тег и триггер

  1. Создайте тег GA4 Event в GTM и укажите Measurement ID GA4.

  2. В секции Event Name используйте purchase (или другое имя события).

  3. Активируйте чекбокс Send ecommerce data — GTM автоматически подтянет объект.

  4. Настройте триггер — Custom Event, ключ — purchase.

Настройте триггер — Custom Event, ключ — purchase.

5. Публикация и тестирование

  1. Используйте режим Preview в GTM: проверьте, правильно ли срабатывают теги и передаются нужные параметры.

  2. В GA4 включите DebugView, чтобы увидеть поступающие события и проверить их содержимое.

В GA4 включите DebugView, чтобы увидеть поступающие события и проверить их содержимое.

Такой подход обеспечивает гибкое и масштабируемое внедрение событий и пользовательских параметров через Data Layer, упрощает настройку GA4 и дает точное понимание всех этапов взаимодействия юзеров с сайтом.

Заключение

  1. Data Layer — это специальный JavaScript-массив, который хранит данные о взаимодействиях пользователей и служит основой для передачи событий и параметров в GA4 через GTM.

  2. Структура Data Layer строится на парах «ключ:значение» и позволяет настраивать отслеживание любых событий и пользовательских свойств.

  3. Инициализация и наполнение выполняются через window.dataLayer = [] и метод push(), который добавляет новые данные без потери уже сохранённой информации.

  4. Переменные Data Layer включают event, event_params, user_properties, ecommerce и автоматические параметры страницы, что помогает создавать расширенные отчеты и сегментацию.

  5. Внедрение Data Layer состоит из настройки базового слоя, установки GTM, создания тегов и триггеров, а также тестирования в режиме Preview и DebugView в GA4.

Ярослав Приймич

Познакомился с SEO в 2019 году, занимая позиции веб-мастера регионального интернет-магазина. Серьезнее начал заниматься SEO с 2021 года. Сейчас наслаждаюсь своей позицией в Netpeak Agency Ukraine.

Другие статьи автора
Узнайте больше
настройка событий в Google Analytics
0
0
0
Обнаружили ошибку? Выделите ее и нажмите Ctrl + Enter.

По теме

Как рассчитать ROMI для большого интернет-магазина — импортируем себестоимость товаров в Google Analytics

Хотите видеть в отчетах точный ROMI в разрезе рекламных кампаний, групп объявлений и ключевых слов? Импортируйте себестоимость товаров в Google Analytics

Свежее

Как настроить ретаргетинг для рекламы в Instagram и Facebook

Понятная инструкция для SMM-специалистов и тех, кто экспериментирует с настройками аудиторий в рекламных кампаниях

Как подобрать низкочастотные запросы и для чего это нужно

Низкочастотные, низкоконкурентные, Long Tail и другие термины, которые нужно знать и понимать.

AI-поиск и ecommerce: как меняется SEO-оптимизация

В статье разбираю, как меняется поведение покупателей и какие практические шаги нужно сделать уже сегодня, чтобы адаптировать ваш бизнес к новой реальности