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%