10.16 - GTM - dataLayer

dataLayer - единый интерфейс между сайтом и GTM. Всё, что не в dataLayer - не существует для аналитики.

#intermediate #technical #block-10

Что такое dataLayer

dataLayer - это JavaScript-массив, который служит транспортным слоем между вашим сайтом (или приложением) и Google Tag Manager. Разработчики пушат в него данные, GTM их читает и использует для триггеров и переменных.

// dataLayer создаётся ДО загрузки GTM-контейнера

window.dataLayer = window.dataLayer || [];

Почему не DOM scraping

Подход	Надёжность	Скорость	Масштабируемость
dataLayer push	✅ Высокая - данные структурированы	✅ Мгновенно	✅ Любые данные
DOM scraping (CSS selectors)	❌ Ломается при редизайне	❌ Зависит от рендера	❌ Только видимое
Auto-Event Variables	⚠️ Средняя - зависит от HTML	⚠️ Event-driven	⚠️ Ограничено кликами/формами

Правило: Если данные доступны на бэкенде или в state приложения - всегда используйте dataLayer. DOM scraping - крайний случай, когда у вас нет доступа к коду.

Подробнее: 10.21 - GTM - DOM Scraping vs dataLayer

Источник: Google - Data Layer Developer Guide

Синтаксис

Базовый push

// Простое событие

dataLayer.push({

'event': 'button_click',

'button_id': 'cta-hero',

'button_text': 'Оформить заявку'

});

Push с e-commerce данными

// Просмотр товара (GA4 Enhanced Ecommerce)

dataLayer.push({

'event': 'view_item',

'ecommerce': {

'currency': 'KZT',

'value': 45990,

'items': [{

'item_id': 'SKU-001',

'item_name': 'Смартфон Samsung Galaxy A54',

'item_category': 'Электроника',

'item_category2': 'Смартфоны',

'item_brand': 'Samsung',

'price': 45990,

'quantity': 1

}]

}

});

Важно: ecommerce clear

Перед каждым e-commerce push нужно очищать предыдущие данные:

// ✅ Правильно - clear перед push

dataLayer.push({ ecommerce: null }); // Clear

dataLayer.push({

'event': 'add_to_cart',

'ecommerce': {

'currency': 'KZT',

'value': 45990,

'items': [{ /* ... */ }]

}

});

// ❌ Неправильно - без clear

// Данные предыдущего события могут смешаться с новыми

dataLayer.push({

'event': 'add_to_cart',

'ecommerce': { /* ... */ }

});

Почему: dataLayer делает shallow merge объектов. Если предыдущий push содержал ecommerce.items с 5 товарами, а новый - с 1, без clear вы получите мусор.

Источник: Google - GA4 Ecommerce Developer Guide

Как GTM читает dataLayer

Data Layer Variable (v2)

В GTM создаётся переменная типа Data Layer Variable:

Настройка	Значение	Пояснение
Variable Name	`ecommerce.items.0.item_name`	Dot-notation путь к значению
Data Layer Version	Version 2	Всегда Version 2
Default Value	`(not set)`	Если значение отсутствует

Dot-notation - доступ к вложенным объектам

// Push

dataLayer.push({

'user': {

'id': '12345',

'segment': 'high_value',

'traits': {

'city': 'Almaty'

}

});

// В GTM Data Layer Variable:

// 'user.id' → '12345'

// 'user.segment' → 'high_value'

// 'user.traits.city' → 'Almaty'

Custom Event Trigger

Триггер срабатывает, когда в dataLayer появляется push с определённым event:

Trigger Type: Custom Event
Event Name: add_to_cart

Этот триггер сработает при:

dataLayer.push({ 'event': 'add_to_cart', ... });

Паттерны для разных вертикалей

Финтех (BCC, Halyk, Solva)

// Начало заявки на кредит

dataLayer.push({

'event': 'loan_application_start',

'loan_type': 'consumer', // consumer, mortgage, auto

'loan_amount': 500000, // KZT

'loan_term_months': 12,

'application_source': 'product_page',

'user_segment': 'existing_client' // new, existing_client

});

// Одобрение заявки

dataLayer.push({

'event': 'loan_approved',

'loan_type': 'consumer',

'loan_amount': 500000,

'approval_time_seconds': 45,

'credit_score_range': '600-700' // не передаём точный score!

});

// ⚠️ Никогда не пушим PII в dataLayer без хеширования:

// ❌ 'email': 'user@email.com'

// ❌ 'phone': '+77001234567'

// ❌ 'iin': '123456789012'

// ✅ 'user_id': 'hashed_id_abc123'

E-commerce (Kaspi Shop, Arbuz.kz)

// Полный purchase event

dataLayer.push({ ecommerce: null });

dataLayer.push({

'event': 'purchase',

'ecommerce': {

'transaction_id': 'ORD-2024-00567',

'value': 125780,

'tax': 15093.60, // 12% НДС

'shipping': 1500,

'currency': 'KZT',

'coupon': 'WINTER20',

'items': [

{

'item_id': 'SKU-001',

'item_name': 'Куртка зимняя Columbia',

'affiliation': 'Магазин Центральный',

'coupon': 'WINTER20',

'discount': 8000,

'item_brand': 'Columbia',

'item_category': 'Одежда',

'item_category2': 'Верхняя одежда',

'item_category3': 'Куртки',

'item_variant': 'Чёрная, XL',

'price': 54990,

'quantity': 1

{

'item_id': 'SKU-042',

'item_name': 'Термобельё Craft Active',

'item_brand': 'Craft',

'item_category': 'Одежда',

'item_category2': 'Термобельё',

'price': 35395,

'quantity': 2

}

]

}

});

Mobile App Web-View (гибридные приложения)

// Для web-view внутри мобильного приложения

// Часто нужно передать контекст из native layer

dataLayer.push({

'event': 'webview_loaded',

'app_version': '3.4.2',

'platform': 'ios',

'user_id': 'native_user_abc123',

'session_id': 'native_session_xyz',

'is_webview': true

});

Debugging dataLayer

1. Console

// В DevTools Console:

console.table(dataLayer);

// Или отфильтрованный:

dataLayer.filter(e => e.event === 'purchase');

2. GTM Preview Mode

GTM Preview Mode показывает:

Все dataLayer pushes в хронологическом порядке
Состояние Data Layer Variables в момент каждого события
Какие триггеры сработали и не сработали

3. Расширения

dataLayer Inspector+ (Chrome) - лучший инструмент, показывает real-time pushes
Omnibug - универсальный дебаггер для всех тегов
GA Debugger - специфично для GA4

Источник: Analytics Mania - How to Debug dataLayer

Частые ошибки

1. Push до создания массива

// ❌ GTM ещё не загружен, dataLayer не существует

dataLayer.push({ 'event': 'page_loaded' });

// ✅ Всегда инициализируйте

window.dataLayer = window.dataLayer || [];

dataLayer.push({ 'event': 'page_loaded' });

2. Overwrite вместо push

// ❌ Перезаписывает весь массив

dataLayer = [{ 'event': 'purchase' }];

// ✅ Добавляет в существующий

dataLayer.push({ 'event': 'purchase' });

3. Типы данных

// ❌ value как строка - GA4 не посчитает сумму

dataLayer.push({ 'event': 'purchase', 'ecommerce': { 'value': '45990' } });

// ✅ value как число

dataLayer.push({ 'event': 'purchase', 'ecommerce': { 'value': 45990 } });

4. Timing на SPA (React, Vue, Next.js)

На SPA-сайтах dataLayer.push с событием page_view нужно вызывать при каждом route change, а не только при первой загрузке:

// React Router v6 пример

import { useEffect } from 'react';

import { useLocation } from 'react-router-dom';

function Analytics() {

const location = useLocation();

useEffect(() => {

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

'event': 'page_view',

'page_path': location.pathname,

'page_title': document.title

});

}, [location]);

return null;

}

В GTM для SPA используйте триггер History Change (см. 10.19 - GTM - триггеры глубоко) или Custom Event page_view.

Архитектура: кто что пушит

Ответственность

Источник данных	Кто реализует	Пример
Page-level данные (URL, title)	GTM Built-in Variables	Автоматически
User identity (user_id, segment)	Backend → dataLayer на SSR	`<script>dataLayer.push({user_id: '...'})</script>`
E-commerce (items, prices)	Frontend → dataLayer	На событиях: view, add, purchase
Form submissions	Frontend → dataLayer	На submit, после валидации
Custom interactions	Frontend → dataLayer	Scroll depth, video play, tab switch

Дополнительные материалы

Google - Data Layer Reference - официальная документация
Simo Ahava - Data Layer Best Practices - углублённый разбор
Analytics Mania - dataLayer Tutorial - пошаговый гайд
Measure School - dataLayer Video Guide - видео-формат

🔧 Практика

Задание 1: dataLayer для интернет-магазина

Напишите полный набор dataLayer.push() для e-commerce:

page_view (с user data, если авторизован)
view_item_list (категория товаров)
view_item (карточка товара)
add_to_cart
begin_checkout
purchase

Для каждого: полный код с всеми рекомендованными параметрами GA4.

Задание 2: Debug

Откройте любой e-commerce сайт (arbuz.kz, kaspi.kz, wildberries.kz)
В Console: console.table(dataLayer)
Совершите 5 действий (просмотр, добавление в корзину, поиск)
Задокументируйте: какие события пушатся, какие параметры, что отсутствует?

Задание 3: SPA dataLayer

Реализуйте dataLayer.push для SPA на React/Vue:

Virtual pageview при route change
User properties при авторизации
Custom event при scroll > 50%

10.16 - GTM - dataLayer

Навигация

Что такое dataLayer

Почему не DOM scraping

Синтаксис

Базовый push

Push с e-commerce данными

Важно: ecommerce clear

Как GTM читает dataLayer

Data Layer Variable (v2)

Dot-notation - доступ к вложенным объектам

Custom Event Trigger

Паттерны для разных вертикалей

Финтех (BCC, Halyk, Solva)

E-commerce (Kaspi Shop, Arbuz.kz)

Mobile App Web-View (гибридные приложения)

Debugging dataLayer

1. Console

2. GTM Preview Mode

3. Расширения

Частые ошибки

1. Push до создания массива

2. Overwrite вместо push

3. Типы данных

4. Timing на SPA (React, Vue, Next.js)

Архитектура: кто что пушит

Ответственность

Дополнительные материалы

🔧 Практика

Задание 1: dataLayer для интернет-магазина

Задание 2: Debug

Задание 3: SPA dataLayer

Связанные заметки