GTM - прослойка между сайтом и маркетинговыми инструментами. Один snippet на сайте → управление всеми тегами из интерфейса, без разработчиков.
#intermediate #technical #block-10
Навигация
← 10.14 - Яндекс Метрика - цели и JavaScript API | → 10.16 - GTM - dataLayer
Зачем GTM
| Без GTM | С GTM |
|---|---|
| Каждый тег = обращение к разработчику | Маркетолог управляет тегами сам |
| Новый пиксель = deploy | Новый пиксель = 5 минут в GUI |
| Нет версионирования | Git-like версии, rollback |
| Нет debug mode | Preview mode с полным дебагом |
| Хаос в коде | Все теги в одном месте |
Архитектура: Container → Tags → Triggers → Variables
Tags (Теги) - ЧТО отправляем
Тег = фрагмент кода, который выполняется при срабатывании триггера.
| Тип | Пример | Встроенный шаблон? |
|---|---|---|
| GA4 Configuration | Инициализация GA4 | ✅ |
| GA4 Event | Отправка событий | ✅ |
| Meta Pixel | Facebook Pixel events | ✅ (Community) |
| Google Ads Conversion | Conversion tracking | ✅ |
| Google Ads Remarketing | Remarketing tag | ✅ |
| Custom HTML | Любой JavaScript | ✅ (universal) |
| Custom Image | Pixel-трекер (1x1 gif) | ✅ |
Triggers (Триггеры) - КОГДА выполняем
| Тип | Когда | Пример |
|---|---|---|
| Page View | Загрузка страницы | All Pages, specific URL |
| DOM Ready | DOM построен | Для тегов, зависящих от DOM |
| Window Loaded | Страница полностью загружена | Non-critical tags |
| Click | Клик по элементу | CTA button click |
| Form Submission | Отправка формы | Lead form submit |
| Custom Event | dataLayer.push({event: '...'}) | purchase, add_to_cart |
| Element Visibility | Элемент виден на экране | Banner viewed |
| Timer | Через N миллисекунд | Engagement tracking |
| History Change | SPA route change | Virtual pageviews |
| Scroll Depth | % прокрутки страницы | 25%, 50%, 75%, 90% |
Variables (Переменные) - КАКИЕ данные используем
| Категория | Примеры |
|---|---|
| Built-in | Page URL, Page Path, Click Element, Click URL, Form ID |
| Data Layer | ecommerce.value, user.id, event_data.category |
| Custom JavaScript | Любая JS-функция, возвращающая значение |
| 1st Party Cookie | Чтение cookie |
| Constant | Статические значения (API keys, IDs) |
| Lookup Table | Маппинг значений (URL → category) |
| RegEx Table | Regex-based маппинг |
Workspaces и Environments
Workspaces
- Позволяют нескольким людям работать параллельно
- Как branches в Git
- Merge conflicts возможны при одновременном редактировании
Environments
| Environment | URL | Назначение |
|---|---|---|
| Live | (production) | Боевой трафик |
| Latest | Preview link | Тестирование перед publish |
| Dev | Custom URL | Staging/dev сервер |
Naming Convention
Без convention GTM-контейнер превращается в хаос за 3 месяца.
Tags
[Platform] - [Type] - [Detail]
GA4 - Event - purchase
Meta - Pixel - PageView
GAds - Conversion - lead_form
Custom - HTML - Hotjar
Triggers
[Type] - [Condition]
CE - purchase (Custom Event)
PV - All Pages (Page View)
Click - CTA Hero Button
Visibility - Banner Promo
Variables
[Type] - [Name]
DL - ecommerce.value (Data Layer)
JS - getUserSegment (Custom JS)
Cookie - _ga_user_id
Const - GA4 Measurement ID
Preview Mode - Debug
GTM Preview Mode (Tag Assistant) показывает:
- Все dataLayer push'ы в хронологии
- Какие теги сработали (fired) и не сработали (not fired) на каждом событии
- Значения всех переменных в момент каждого события
- Детали каждого тега (payload, request)
Как использовать:
- GTM → Preview → Enter URL
- Сайт откроется с debug-панелью
- Совершайте действия → наблюдайте теги и переменные
Подробнее: 10.24 - GTM - Debug и отладка
Источники
🔧 Практика
- Создайте GTM-контейнер
- Установите на тестовый сайт (или используйте GTM Preview с любым сайтом)
- Добавьте: GA4 Config tag, GA4 Event tag (scroll, click), Meta Pixel
- Настройте naming convention
- Протестируйте в Preview Mode - убедитесь, что все теги firing correctly