Google Tag Manager: что это такое и как настроить отслеживание событий

Google Tag Manager (GTM) — инструмент управления тегами, который позволяет настраивать отслеживание действий посетителей сайта без постоянного редактирования его исходного кода. С его помощью можно фиксировать клики по кнопкам, отправку заявок, оформление заказов, переходы между страницами и другие события, необходимые для веб-аналитики.
После установки контейнера GTM большинство изменений выполняется через специальный интерфейс. Это упрощает работу с аналитикой, сокращает количество обращений к разработчику и позволяет централизованно управлять измерительными инструментами.
Рассмотрим, как устроен Google Tag Manager, какие компоненты используются для отслеживания событий и как правильно настроить систему.

Как работает Google Tag Manager

Основной принцип работы GTM заключается в использовании единого контейнера, который устанавливается на сайт. Внутри него размещаются теги, триггеры и переменные, отвечающие за сбор и передачу информации.
Вместо добавления отдельных скриптов для каждой задачи специалист может создать необходимые настройки непосредственно в интерфейсе GTM. После проверки изменения публикуются и начинают действовать на сайте.

Основные компоненты GTM

Тег отвечает за выполнение определённого действия. Например, он может передавать в систему аналитики информацию об успешной отправке формы.
Триггер задаёт условие, при котором должен запускаться тег. Таким условием может быть загрузка страницы, нажатие кнопки или пользовательское событие.
Переменные позволяют использовать дополнительные сведения: адрес страницы, стоимость заказа, название товара или идентификатор формы.
dataLayer представляет собой JavaScript-массив, через который сайт передаёт события и связанные с ними данные в GTM.

Для чего нужен dataLayer

Использование dataLayer позволяет получать информацию непосредственно от сайта, не пытаясь определять результат действия по внешним признакам.
Например, посетитель нажал кнопку отправки заявки. Само нажатие ещё не означает, что форма успешно обработана: пользователь мог не заполнить обязательное поле или сервер мог вернуть ошибку.
Чтобы отслеживать именно успешную отправку, сайт может передать специальное событие:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({​
event: 'form_success',
form_id: 'callback'
});

После этого в GTM создаётся триггер пользовательского события form_success, переменная для получения form_id и тег, передающий информацию в аналитику.
Такой подход помогает получать более точную статистику и не учитывать неуспешные действия как конверсии.

Как установить Google Tag Manager на сайт

Для начала работы необходимо создать аккаунт GTM и добавить контейнер для сайта. Для обычного веб-ресурса используется тип контейнера Web.
После создания система предоставляет уникальный идентификатор вида GTM-XXXXXXX и два фрагмента кода для установки.

Пошаговая установка

1. Откройте Google Tag Manager и создайте аккаунт.
2. Укажите название контейнера и выберите платформу Web.
3. Скопируйте предоставленный код контейнера.
4. Разместите основной JavaScript-фрагмент как можно выше внутри раздела <head>.
5. Добавьте второй фрагмент noscript сразу после открывающего тега <body>.
6. Сохраните изменения на сайте.
7. Откройте режим Preview и проверьте подключение контейнера.
8. После проверки опубликуйте настройки.

Для одного сайта обычно достаточно одного основного Web-контейнера. Создавать отдельный контейнер для каждой страницы не требуется.
Важно использовать код, сформированный именно для вашего контейнера, а не копировать идентификаторы из сторонних инструкций.

Первоначальная настройка dataLayer

Если определённые параметры должны быть доступны сразу после загрузки страницы, их необходимо передать до выполнения кода контейнера GTM.

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({​
page_type: 'catalog',
user_status: 'guest'
});
</script>

После этого размещается основной код GTM.
Не следует повторно создавать пустой массив dataLayer после загрузки контейнера. Для передачи новых данных используется метод dataLayer.push().

Как организовать названия элементов

При большом количестве настроек удобно придерживаться единого принципа именования.

Такая структура облегчает поиск настроек, помогает ориентироваться в контейнере и упрощает работу нескольких специалистов.

Настройка отслеживания кликов

Одной из распространённых задач GTM является фиксация нажатий на кнопки и ссылки.
Например, на сайте продажи металлопроката можно отслеживать, сколько посетителей нажимают кнопку «Запросить цену» в карточке товара.
Предположим, кнопка имеет следующий HTML-код:

<button
type="button"
id="request-price"
data-track="request-price">
Запросить цену
</button>

Для настройки отслеживания необходимо открыть GTM, включить встроенные переменные кликов и создать новый триггер.
В качестве типа триггера выбирается Click — All Elements, а в условиях указывается Some Clicks.
Пример условия:

Click ID equals request-price

Затем создаётся тег события с названием:

request_price_click

После публикации GTM сможет фиксировать нажатия на соответствующую кнопку.
Для настройки желательно использовать постоянные идентификаторы или специальные HTML-атрибуты. Привязка к тексту кнопки либо нестабильному CSS-классу может перестать работать после изменения дизайна сайта.
При этом важно разделять клики и реальные обращения. Нажатие кнопки «Отправить заявку» не должно автоматически считаться успешным лидом.

Как отслеживать отправку форм

Формы обратной связи используются для получения заявок, запросов стоимости, заказов обратного звонка и других обращений.
GTM позволяет отслеживать их отправку несколькими способами.
Для обычных HTML-форм может использоваться встроенный триггер Form Submission. Однако на современных сайтах отправка часто выполняется без перезагрузки страницы, через AJAX-запросы.
В таком случае предпочтительнее фиксировать событие после получения подтверждения об успешной обработке формы.

Пример настройки

После успешной отправки сайт передаёт событие:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({​
event: 'form_success',
form_id: 'request_quote',
form_type: 'lead'
});

Далее в Google Tag Manager создаются следующие элементы:

Такая схема позволяет учитывать только подтверждённые обращения.
Например, если посетитель открыл форму запроса стоимости трубы, но не заполнил телефон, событие успешной заявки не должно передаваться в аналитику.

Отслеживание электронной торговли

Для интернет-магазинов и сайтов с возможностью оформления заказа GTM может использоваться для передачи событий электронной торговли.
Это позволяет анализировать поведение покупателей на разных этапах взаимодействия с каталогом.
К основным событиям относятся:

• view_item — просмотр карточки товара;
• add_to_cart — добавление товара в корзину;
• begin_checkout — начало оформления заказа;
• purchase — завершение покупки;
• refund — возврат.

Для передачи сведений о товарах используется массив items. Дополнительно могут указываться стоимость, валюта, количество товаров и идентификатор заказа.

Пример передачи покупки

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({​
event: 'purchase',
ecommerce: {​
transaction_id: 'ORDER-10582',
value: 48500,
currency: 'RUB',
shipping: 1500,
items: [
{​
item_id: 'PIPE-40X20X2',
item_name: 'Труба профильная 40×20×2',
price: 47000,
quantity: 1
}
]}
});

В приведённом примере передаются идентификатор заказа, общая стоимость, валюта, стоимость доставки и информация о товаре.
В GTM для события purchase создаётся пользовательский триггер, после чего данные направляются в подключённую систему аналитики.
Особое внимание необходимо уделять уникальности идентификатора транзакции. Одну покупку нельзя повторно учитывать при каждом обновлении страницы подтверждения заказа.

Как настроить отслеживание конверсий

Конверсия — значимое действие посетителя, связанное с целями сайта. Для коммерческих ресурсов это может быть отправка заявки, оформление заказа, запрос коммерческого предложения или другое целевое действие.
В GTM настраивается передача события, а его дальнейшая классификация выполняется в системе аналитики.
Общая последовательность выглядит следующим образом:

1. Посетитель выполняет действие на сайте.
2. Сайт передаёт событие через dataLayer.
3. GTM определяет событие с помощью триггера.
4. Тег отправляет информацию в аналитику.
5. В аналитической системе событие при необходимости отмечается как ключевое.
6. Данные используются для оценки эффективности сайта и рекламных кампаний.

Важно, чтобы конверсия соответствовала фактическому результату. Например, просмотр страницы контактов и успешная отправка заявки — разные события, которые не следует объединять.

Проверка работы Google Tag Manager

Перед публикацией новых настроек необходимо убедиться, что события передаются правильно.
Для этого используется режим Preview и инструмент Tag Assistant. Они позволяют просматривать последовательность событий, значения переменных и результаты срабатывания тегов.

Как проверить настроенное событие

1. Откройте контейнер GTM.
2. Нажмите Preview.
3. Укажите адрес сайта.
4. Подключитесь к странице через Tag Assistant.
5. Выполните нужное действие: нажмите кнопку, отправьте форму или оформите тестовый заказ.
6. Найдите соответствующее событие в списке.
7. Проверьте значения переменных и условия триггера.
8. Убедитесь, что необходимый тег сработал.

При тестировании важно проверить несколько параметров.

Если тег не срабатывает, следует проверить название события, условия триггера и значения переменных.

Ошибки при передаче dataLayer

Одна из распространённых проблем — неправильная последовательность передачи данных.
Например:

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

В таком случае значение order_value может оказаться недоступным при обработке события purchase.
Правильнее передавать событие и его параметры одновременно:

dataLayer.push({​
event: 'purchase',
order_value: 48500
});

Это уменьшает вероятность ошибок и делает структуру событий более понятной.

Особенности GTM для сайтов без перезагрузки страниц

На некоторых сайтах переходы между разделами происходят без полной перезагрузки браузерной страницы. Такая архитектура характерна для одностраничных приложений — SPA.
В подобных случаях обычный триггер загрузки страницы не всегда позволяет корректно учитывать внутренние переходы.
Для решения задачи можно использовать History Change или передавать отдельные события через dataLayer.
Если приложение самостоятельно сообщает о смене маршрута, отслеживание становится более предсказуемым и меньше зависит от особенностей интерфейса.

Безопасность и управление доступом

Google Tag Manager позволяет управлять кодом, который выполняется на страницах сайта. Поэтому доступ к контейнеру необходимо предоставлять с учётом обязанностей сотрудников.
Для работы с контейнером предусмотрены различные уровни прав.

Желательно, чтобы административный доступ сохранялся у владельца проекта, а специалисты получали только необходимые полномочия.
Также рекомендуется иметь резервного администратора и регулярно проверять доступы сотрудников, которые больше не участвуют в работе над сайтом.

Защита персональных данных

При настройке аналитики важно контролировать, какая информация передаётся через GTM.
Не следует без необходимости включать в параметры событий телефонные номера, адреса электронной почты, имена пользователей и содержимое обращений.
Для анализа эффективности форм обычно достаточно технических параметров: идентификатора формы, её типа, названия события и других обезличенных значений.
Использование аналитических инструментов также должно соответствовать требованиям к обработке персональных данных и настройкам согласия пользователей.

Использование пользовательского кода

Для отдельных задач GTM позволяет добавлять собственный HTML и JavaScript.
Однако чрезмерное использование произвольных скриптов усложняет сопровождение контейнера и повышает риск ошибок.
По возможности лучше применять встроенные шаблоны тегов и Custom Templates, предусматривающие дополнительные ограничения на выполнение кода.
Если на сайте действует Content Security Policy (CSP), необходимо учитывать её требования при установке GTM. Для разрешения необходимых скриптов могут использоваться nonce или hash.

Распространённые ошибки при работе с GTM

Даже правильно установленный контейнер не гарантирует корректную аналитику. Большинство проблем возникает из-за неправильных условий запуска тегов и передачи событий.

Дублирование событий

Если один измерительный код установлен одновременно напрямую на сайте и через GTM, данные могут отправляться повторно.
Необходимо проверить все способы подключения аналитики и убедиться, что одно действие не учитывается несколько раз.

Клик ошибочно считается заявкой

Нажатие кнопки отправки формы не всегда означает успешное обращение.
Для подсчёта заявок лучше использовать событие, которое возникает после подтверждения обработки формы.

Повторный учёт покупки

Если событие purchase запускается при каждом открытии страницы благодарности, одна покупка может попадать в статистику несколько раз.
Необходимо использовать уникальный идентификатор транзакции и предусмотреть защиту от повторной передачи события.

Переменная возвращает undefined

Такая ошибка может возникать из-за неправильного названия переменной, отсутствия данных или нарушения порядка передачи событий.
Следует проверить регистр символов, структуру dataLayer и момент появления нужного значения.

Тег не работает после настройки

Изменения в рабочей области GTM не начинают автоматически действовать на сайте.
После проверки необходимо опубликовать новую версию контейнера.

Не подключается режим Preview

Причинами могут быть блокировщики скриптов, ошибки установки контейнера, ограничения браузера или настройки безопасности сайта.
Проверку следует начинать с наличия кода GTM на странице и корректности его загрузки.

Чек-лист настройки Google Tag Manager

Перед запуском аналитики рекомендуется проверить основные элементы конфигурации.

Каждую публикацию желательно сопровождать понятным названием и описанием изменений. Это позволит быстрее находить нужные версии и при необходимости возвращаться к предыдущей конфигурации.

Заключение

Google Tag Manager упрощает управление аналитикой и помогает централизованно отслеживать действия пользователей на сайте. Система подходит как для небольших корпоративных ресурсов, так и для крупных интернет-магазинов с каталогами, формами заявок и электронной торговлей.
Для получения достоверных данных важно не только установить контейнер, но и правильно организовать передачу событий. Использование dataLayer, точная настройка триггеров, проверка переменных и предварительное тестирование позволяют избежать ошибочных конверсий и дублирования статистики.
Грамотно настроенный GTM становится удобным инструментом для оценки поведения посетителей, анализа эффективности страниц и принятия решений по развитию сайта.