GTM и GA4 на живых данных
Два сайта с реальным бэкендом: лендинг с формами и API, магазин с полной e-commerce воронкой. Все события уже в dataLayer. Твоя задача их поймать.
GTM за 90 секунд
Если вы ещё не настраивали трекинг, прочитайте эту страницу первой. Ниже четыре карточки. По сути, в них весь GTM.
Контейнер
Это небольшой скрипт, который один раз вставляют на сайт. Внутри хранятся все теги, триггеры и переменные. После установки всё настраивается в интерфейсе tagmanager.google.com, в код возвращаться не нужно.
dataLayer
Обычный JavaScript-массив, который есть на каждой странице. Сайт добавляет в него события (например, отправлена форма или товар добавлен в корзину). GTM следит за этим массивом и реагирует на новые записи.
Триггер
Условие, при котором запускается тег. В большинстве случаев подходит тип Custom Event: указываете имя события из dataLayer (например, generate_lead), и тег сработает в нужный момент.
Тег
То, что выполняется при срабатывании триггера. Отправить событие в GA4, активировать пиксель Meta, вызвать webhook. Один триггер может запускать сразу несколько тегов.
Коротко: сайт добавляет событие в dataLayer, триггер его замечает, тег отправляет данные в GA4. Когда эта последовательность станет привычной, останется только настройка деталей.
Как GTM устроен внутри
В 90 секундах вы поняли идею. Теперь разберём, что происходит за кулисами и почему GTM сделан именно так.
GTM работает как пульт управления для всей аналитики на сайте. Раньше каждый сервис (Google Analytics, рекламные пиксели и так далее) требовал ставить отдельный код на каждую страницу. С GTM устанавливают только один скрипт, а все остальные теги настраиваются в его интерфейсе. Маркетолог может сам добавлять и менять трекинг, не обращаясь к разработчикам.
Важно понимать: GTM сам ничего не придумывает. Он только распределяет данные, которые сайт уже отправляет в dataLayer. Поэтому первое, с чего стоит начать, это структура данных: какие события и поля сайт будет складывать в массив. Если структура продумана, оставшаяся работа в GTM почти техническая.
На практике вы будете повторять один и тот же цикл. Сайт отправляет событие в dataLayer. В GTM настраивается триггер, который реагирует на это событие. Затем тег, который пересылает данные в GA4 или другую систему. Проверка идёт через GTM Preview и DebugView в GA4. Десять-пятнадцать таких циклов, и базовый трекинг уже готов.
Шесть минут от команды Google Tag Manager. Посмотрите перед тем, как пойдёте в песочницы. Это сэкономит час разбирательств позже.
Два сайта, два сценария
Каждый заточен под свой класс задач. Начни с лендинга, потом переходи в магазин.
Лендинг
Лидогенерация: простая форма, мульти-шаговая форма, YouTube-видео, внешние ссылки, промо-баннер, подписка на рассылку. Всё с реальными API-ответами.
E-Commerce магазин
Полная воронка: каталог товаров, карточка, корзина, чекаут с шагами, оплата, подтверждение, возврат. GA4 e-commerce в чистом виде.
Настройка за пять шагов
Эти шаги нужно пройти один раз. После этого можно переходить к заданиям на лендинге и в магазине.
GTM-XXXXXXX ). На обеих песочницах уже подготовлено место для этого кода: вставьте его и обновите страницу.G-XXXXXXX ). Этот ID вы укажете в теге GA4 Configuration на следующем шаге.F12 прямо на странице песочницы. Каждое добавление в dataLayer выводится в консоль с префиксом [DL] каждый запрос к API с префиксом [FETCH] . Команда window.dataLayer покажет весь массив целиком. Это основной инструмент для отладки.