Животные меняются при загрузке страницы
Настройка Google Tag Manager для отслеживания пользовательских событий и конверсий
Карточки, чек-листы, таблицы и примеры помогают быстро найти нужный ответ.
Google Tag Manager (GTM) — это инструмент, позволяющий централизованно управлять тегами на сайте без постоянного вмешательства в код. Настройка пользовательских событий и конверсий через GTM обеспечивает точный сбор данных, упрощает интеграцию с рекламными платформами и повышает гибкость аналитики.
Ключевые моменты: подготовка сайта и аналитики, создание контейнера, реализация пользовательских событий, настройка конверсий, проверка в режиме предварительного просмотра, устранение распространённых ошибок и постоянный мониторинг после релиза.
Что такое Google Tag Manager и зачем его использовать?
Google Tag Manager – это контейнер, в котором собираются все теги, скрипты и пиксели, работающие на сайте. Вместо того чтобы встраивать каждую библиотеку вручную, вы добавляете один фрагмент кода, после чего управляете всем через веб‑интерфейс. Это экономит время, уменьшает количество ошибок и позволяет быстро менять поведение без доступа к коду.
Когда нужен GTM? Когда сайт растёт, появляется несколько аналитических и рекламных сервисов, требуется гибкая настройка событий, а команда разработки не хочет заниматься постоянными правками кода. GTM становится центральным хранилищем, где можно создавать триггеры, переменные и шаблоны, а также делиться настройками между проектами.
Преимущества централизованного управления тегами:
- Быстрая интеграция новых сервисов: один клик, новый тег, без изменения HTML.
- Отсутствие конфликтов: GTM гарантирует, что скрипты загружаются в нужном порядке, предотвращая сбои в работе аналитики.
- Упрощённый аудит: в одном месте видна вся история изменений, кто и когда вносил правки.
- Улучшенная производительность: GTM позволяет асинхронно загружать теги, снижая время загрузки страниц.
- Удобство для маркетологов: настройка событий без привязки к разработчикам, возможность тестировать в режиме предварительного просмотра.
Подготовка: технические и аналитические требования
Для корректной работы GTM с GA нужно подготовить несколько ключевых элементов. Сначала убедитесь, что у вас есть доступ к аккаунту Google Analytics и создана нужная property. Далее создайте контейнер в GTM и получите его ID (gtm‑xxxxxx). Затем вставьте скрипт GTM в шаблон сайта: в и сразу после . Наконец, определите цели в GA: это могут быть события, просмотры страниц, длительность сессии или пользовательские параметры. Совместно с аналитиками согласуйте названия и типы событий, чтобы они корректно передавались в GTM.
- Получить Google Analytics Property ID и убедиться, что он активен.
- Создать контейнер GTM, скопировать его ID и подготовить скрипт.
- Вставить скрипт GTM в и всех страниц.
- Определить цели в GA: события, транзакции, пользовательские параметры.
- Согласовать названия событий и параметры с командой разработки.
- Проверить доступ к файловой системе/ CMS для внесения изменений.
- Составить список страниц и элементов, которые будут отслеживаться.
Создание контейнера и базовая структура тегов
- Создайте аккаунт в Google Tag Manager и нажмите «Создать аккаунт». Введите название аккаунта, выберите страну и согласитесь с условиями.
- В диалоге «Создать контейнер» укажите название сайта, выберите «Web» и подтвердите создание. Сразу появится ID контейнера вида GTM‑XXXXX.
- Скопируйте два фрагмента кода из окна «Установка» и вставьте их в шаблон сайта:
- Первая строка (первый тег) – в
<head>: - Вторая строка (второй тег) – сразу после открывающего тега
<body>. - Проверьте, что скрипты видны в исходном коде страницы и в DevTools → Network загружаются как
gtm.js. - В консоли GTM откройте «Теги» → «Создать» и задайте триггер «All Pages». Сохраните, чтобы убедиться, что тег активен.
- Разделите теги по средам, создав три контейнера: «dev», «staging» и «prod». В каждом контейнере настройте переменную
Environmentи используйтеdataLayer.push({environment: 'dev'})для переключения. - Проверьте корректность работы, открыв сайт в режиме
previewи убедившись, что события отправляются только в выбранную среду.
<!-- 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'?'<dl='+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-XXXXX');</script>
<!-- End Google Tag Manager -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->Настройка пользовательских событий
- Вставьте в нужный элемент обработчик, который при срабатывании будет вызывать
dataLayer.pushс объектом события. - В объекте укажите
event– уникальное имя, и параметрыevent_category,event_action,event_label,value(если применимо). - В GTM создайте тег типа «GA4 Event» (или «Universal Analytics – Event») и в поле «Event Name» вставьте то же имя, что в
dataLayer.push. - Создайте триггер «Custom Event» и в поле «Event name» введите то же имя. При включении «All Custom Events» можно отфильтровать по
event_category. - Свяжите тег с триггером. В настройках тега включите отправку в GA4 и, если нужно, в конверсионный пиксель (например, Facebook Pixel) через дополнительный тег.
- Проверьте в режиме предварительного просмотра GTM, что тег активируется при клике и данные отправляются в GA.
document.querySelector('#buyBtn').addEventListener('click', function(){
dataLayer.push({
'event': 'purchase_click',
'event_category': 'Ecommerce',
'event_action': 'click',
'event_label': 'Buy Button',
'value': 1
});
});Соблюдая последовательность: определение события в коде, триггер в GTM, тег в GA, вы получаете точную картину пользовательских действий и возможность привязать их к конверсиям.
Трекинг конверсий и интеграция с рекламными системами
- В GA → Behavior → Events → Custom Events → Создать цель «Event»:
- Категория = «purchase»
- Действие = «complete»
- Метка = «order_id» (если нужна)
- Значение = «amount»
- В Google Ads → Tools → Conversions → New → Import → Google Analytics (UA) → Выбрать созданную цель
- В GTM → Создать переменные Data Layer: «DLV – order_id» и «DLV – amount»
- Создать триггер «Custom Event» → Event Name = «purchase_complete»
- Создать тег GA4 Event:
- Configuration Tag = GA4 Measurement ID
- Event Name = «purchase»
- Parameters: order_id = {{DLV – order_id}}, value = {{DLV – amount}}
- Trigger = «purchase_complete»
- Создать тег Google Ads Conversion:
- Conversion ID и Label из Ads
- Conversion Value = {{DLV – amount}}
- Trigger = «purchase_complete»
- Вставить в код страницы dataLayer.push({event:'purchase_complete', order_id:'12345', amount:99.99});
- Проверить в режиме предварительного просмотра GTM, затем в реальном времени GA и Ads:
- GA → Realtime → Events → поиск «purchase»
- Ads → Conversions → проверка появления новой конверсии
dataLayer.push({
event: 'purchase_complete',
order_id: '12345',
amount: 99.99
});Проверка и отладка
Тестирование Google Tag Manager начинается с режима предварительного просмотра. Включите его, откройте вкладку «Debug» и выполните реальные пользовательские действия: клик, добавление в корзину, переход на страницу благодарности. В консоли GTM вы увидите события, их параметры и, главное, подтверждение, что триггер сработал. Далее проверяем, что данные попадают в Google Analytics. Откройте Real‑Time → Events, убедитесь, что ваш пользовательский event отображается без задержек и с корректными параметрами. Для более детального анализа подключите расширение GA Debugger и сравните payload с тем, что пришло в GA. Кроссбраузерное тестирование обязательное: повторите все шаги в Chrome, Firefox, Safari и Edge, а также на мобильных устройствах. В каждом браузере проверьте консоль на наличие ошибок JavaScript и наличие правильного формата data‑layer. Если всё проходит без ошибок и события видны в реальном времени, можно переходить к публикации.
- Включить режим Preview в GTM и открыть Debug‑панель.
- Выполнить целевые пользовательские действия на сайте.
- Проверить в Debug‑панели, что событие срабатывает и параметры передаются в data‑layer.
- Открыть Real‑Time → Events в GA и убедиться, что событие появляется мгновенно.
- Запустить расширение GA Debugger, сравнить payload с тем, что виден в GA.
- Повторить тесты в Chrome, Firefox, Safari, Edge и мобильных браузерах.
- Проверить консоль браузера на отсутствие ошибок JavaScript.
- Убедиться, что event отображается в стандартных отчетах GA через 24 часа.
После подтверждения корректной работы в режиме Preview, в реальном времени и на всех тестируемых браузерах можно публиковать контейнер. Сохраняйте журнал тестов для аудита и дальнейшего анализа.
Ошибки и риски, как их избежать
-
Дублирование тегов – несколько тегов с одинаковыми триггерами или
один тег, активируемый в разных условиях.
Последствия: двойные события, завышенные конверсии, неверная атрибуция.
Как избежать: проверяйте список тегов в режиме предварительного просмотра, используйте уникальные имена событий, применяйте последовательность тегов (Tag Sequencing) и отключайте лишние триггеры. -
Несоответствие параметров – переменные в GTM не совпадают с
полями GA (category, action, label) или передаются неверные типы данных.
Последствия: пропущенные данные, невозможность сегментировать отчёты, искажение аналитики.
Как избежать: фиксируйте схему именования, проверяйте payload в режиме предварительного просмотра, используйте строгие типы переменных (string, number) и валидируйте данные через консоль разработчика. -
Проблемы с кэшированием – Service Worker, CDN или браузер
кэшируют GTM‑скрипт или страницы с data‑layer, из‑за чего события не
отправляются или отправляются с задержкой.
Последствия: пропущенные события, некорректные временные метки, искажение поведения пользователей.
Как избежать: исключайте GTM‑URL из кэширования, задавайте заголовки Cache‑Control: no-cache, используйте версионирование контейнера (container‑id.vX.js) и очищайте кеш после обновлений.
План релиза и мониторинг после запуска
План релиза и мониторинг после запуска
| Этап | Период | Задачи | КПИ |
|---|---|---|---|
| Подготовка | Неделя 1 | Создание копии контейнера, проверка триггеров в режиме предпросмотра, импорт в GA4, тестирование на staging | 0 ошибок в GTM, валидность данных в GA4, event count ≥ baseline × 0,95 |
| Запуск | День 0 | Переключение контейнера в прод, проверка live‑данных, подтверждение корректности конверсий | 100 % событий, корректные значения целей, отсутствие сбоев в реальном времени |
| Первые 24 ч | День 1 | Слежение за реальными событиями, сравнение с историей, проверка отклонений > 5 % | Event count ≈ baseline, bounce rate ≤ baseline + 2 % |
| Неделя 1 | Неделя 2 | Анализ отклонений, настройка алертов в GA4, корректировка триггеров при необходимости | Отклонения |
| Месячный review | Каждый месяц | Сравнение с baseline, пересмотр целей, оптимизация событий | Рост конверсий ≥ 3 %, снижение стоимости за конверсию |
- Проверить реальное время в GA4 и сравнить с историей.
- Сравнить event count с baseline, отклонения > 5 % – тревога.
- Проверить алерты в GA4 и Data Studio, убедиться в их срабатывании.
- Проверить логи GTM (preview, debug), убедиться в отсутствии ошибок.
- Проверить корректность целей и конверсий в отчётах.
- Проверить офлайн‑режим в PWA, убедиться, что события не теряются.
- Если отклонения > 2 % – провести root‑cause анализ и внести исправления.
- В случае критических ошибок – откатить контейнер к предыдущей версии.
Расширенные возможности: переменные, триггеры, шаблоны
Сравнение подходов к работе с переменными, шаблонами тегов и оптимизации их исполнения в GTM.
| Функция | Стандартный подход | Пользовательский подход | Оптимизированный подход |
|---|---|---|---|
| Переменные | Использование предопределенных (Data Layer, URL, Click) | Создание пользовательских (JavaScript, Lookup Table, Custom JavaScript) | Подключать только необходимые переменные, кешировать значения, избегать пересчётов |
| Шаблоны тегов | Встроенные шаблоны (GA4 Event, Facebook Pixel, Google Ads) | Разработка пользовательских шаблонов (Custom HTML, Custom Tag, Custom Template) | Использовать шаблоны с минимальным кодом, объединять запросы, отключать неиспользуемые поля |
| Файлы тегов | Тег с отдельным триггером, каждый тег активируется по событию | Тег с несколькими триггерами, пакетный запуск через «Event Queue» | Устанавливать priority, использовать «once per event», включать «Tag firing priority» и «Tag sequencing» для снижения нагрузки |
Вопросы и ответы
Как проверить, что событие отправляется в Google Analytics?
В режиме предварительного просмотра GTM откройте консоль браузера и посмотрите, что событие отправляется в GA. В реальном времени GA → События → Выберите ваш параметр. Если видите его, отправка корректна.
Что делать, если GTM не загружается на некоторых страницах?
Проверьте, что тег GTM вставлен в head и body. Убедитесь, что нет конфликтов с другими скриптами, и что CSP не блокирует. Если проблема остаётся, разместите тег в head и отключите асинхронную загрузку.
Какие типы пользовательских событий чаще всего используют в GTM?
Часто используют клики по кнопкам, просмотры страниц, заполнения форм, скролл, взаимодействие с видео. Выбирайте события, которые влияют на конверсии вашего сайта.
Как задать конверсию в Google Analytics через GTM?
Создайте тег типа Universal Analytics (или GA4), выберите событие, укажите категорию, действие, ярлык. В триггере укажите событие GTM, которое срабатывает при конверсии. Сохраните и опубликуйте.
Как отследить клик по кнопке «Заказать звонок»?
Добавьте пользовательский тег GTM с событием «click» и триггером «All Elements». В настройках укажите CSS‑селектор кнопки «Заказать звонок». Отправьте данные в GA как событие с нужными параметрами.
Что такое «Data Layer» и зачем он нужен в GTM?
Data Layer – это объект JavaScript, в который GTM записывает данные о взаимодействиях. Он позволяет передавать динамические значения (например, ID продукта) в теги без прямого доступа к DOM.
Как убедиться, что переменные GTM передают нужные данные?
В разделе Переменные откройте каждую переменную, проверьте, что она возвращает ожидаемое значение в режиме предварительного просмотра. Если значение пустое, проверьте синтаксис и наличие данных в Data Layer.
Как настроить отложенную загрузку GTM для ускорения сайта?
Установите тег GTM с флагом «Отложенная загрузка» (defer) и включите «Событие загрузки страницы» как триггер. Это позволяет браузеру сначала отрисовать контент, а затем загрузить GTM, улучшая скорость.
Как использовать триггер «All Elements» для отслеживания всех кликов?
Триггер All Elements реагирует на любой клик по элементу. Чтобы ограничить его, добавьте условие, например, dataLayer.event === 'click' и CSS‑селектор нужного элемента. Это уменьшит ложные срабатывания.
Что делать, если в GA появляются дублирующиеся события?
Проверьте, что событие не отправляется дважды: в GTM нет дублирующих тегов, а в GA нет двойных параметров. Используйте фильтры в GA, чтобы исключить дубли, и проверяйте в режиме предварительного просмотра.
Важно
Материал носит информационный характер. Перед внедрением рекомендаций учитывайте нишу, регион, конкурентов, текущее состояние сайта и бизнес-цели проекта.
Материал подготовлен и проверен редакцией AX.SEO
Редакция AX.SEO готовит материалы о SEO, разработке, AI, аналитике, маркетинге и росте digital-проектов.
Проверяет практическую применимость рекомендаций, корректность терминов и соответствие материала digital-тематике.