Установка на сайт систем аналитики и сервисов по сбору данных о посетителях сопровождается добавлением HTML- и JavaScript-кодов в административную панель. Выполнить такую работу способен только квалифицированный специалист: некорректное обновление кода может привести к сбоям в работе сайта, нарушению верстки и замедлению загрузки страниц. Поскольку большинство сайтов — это полноценные бизнес-проекты, подобные неполадки могут привести к оттоку клиентов и финансовым потерям.
Чтобы не рисковать работоспособностью сайта, владельцы нередко ограничивают вебмастерам доступ к исходному коду. Причины две: возможная некомпетентность исполнителя и сложности с возвратом к предыдущей версии сайта, если что-то пойдет не так. Оптимальное решение для обеих сторон — система управления тегами Google Tag Manager (GTM).
В статье расскажем о ней подробнее.
Что такое Google Tag Manager?
Google Tag Manager — это единое место для хранения всех тегов, которые подключены на сайте. В GTM можно добавить коды аналитики (Google Analytics, Яндекс Метрика и др.), системы коллтрекинга (Calltouch, Calltracking), онлайн-чаты (Jivosite, Siteheart) и другие сторонние скрипты.
Сервис предоставляет готовые шаблоны тегов, а также позволяет создавать свои. Все подключаемые элементы — HTML или JavaScript — хранятся внутри контейнера GTM, а не в коде сайта. Это упрощает работу, делает процесс гибким и безопасным.
Чтобы начать пользоваться GTM, достаточно один раз установить два кода — в <head> и сразу после открытия тега <body>.
Базовые понятия в GTM
Контейнер — место, где хранятся все теги одного проекта. Рекомендуется создавать отдельный контейнер для каждого сайта. Исключение — полностью идентичные сайты, которые удобно объединить. Для запуска такого контейнера необходимо единожды установить код на сайт.
Тег — участок кода, запускающий внешнюю систему. Например, чтобы подключить Яндекс Метрику, нужно добавить ее код в контейнер GTM. К тегу можно привязать триггеры, которые отслеживают действия посетителей сайта.
Триггер — условие, при котором выполняется запуск или блокировка тега. В диспетчере тегов можно настроить график запуска или конкретные страницы, на которых должно сработать условие. Для этого в GTM предусмотрены фильтры. Каждый триггер включает конкретное событие: переход по ссылке, клик, загрузку страницы и т. д.
Переменная — параметр в формате «ключ — значение», функция или переменная, которую можно использовать в нескольких тегах. Пример: текущий URL или тип устройства пользователя.
Преимущества Google Tag Manager
Google Tag Manager предлагает широкий набор функций, которые упрощают процесс управления кодами на сайте. Он решает сразу несколько проблем: сокращает время на внедрение изменений, устраняет необходимость ручного вмешательства в код и снижает риск технических ошибок. Ниже приведены основные преимущества GTM, которые делают его незаменимым инструментом для маркетологов, аналитиков и владельцев сайтов.
Удобство и бесплатный доступ для всех пользователей с Google-аккаунтом. Его интерфейс интуитивно понятен: основные функции вынесены на видное место, а навигация проста даже для новичков. Для работы достаточно лишь один раз установить код GTM, после чего можно управлять всеми тегами через визуальный интерфейс, не касаясь исходного кода.
Самостоятельное управление без программиста. Система позволяет добавлять и редактировать теги, задавать условия их срабатывания, тестировать изменения и не только без необходимости обращаться к разработчику. Внедрение новых скриптов — будь то аналитика, ретаргетинг или онлайн-чат — занимает считанные минуты. Это ускоряет запуск маркетинговых кампаний и упрощает процессы A/B-тестирования.
Быстрая установка и начало работы. Запустить GTM можно за несколько шагов: достаточно авторизоваться в сервисе, создать аккаунт, добавить контейнер и вставить предоставленные коды на сайт. Благодаря этому вы можете перейти к настройке аналитики уже через несколько минут после старта.
Интеграция с большим количеством систем. GTM поддерживает десятки популярных инструментов: Google Analytics 4, Google Ads, Яндекс Метрика, системы коллтрекинга, CRM и другие. Это превращает GTM в универсальную платформу, через которую можно подключать любые внешние скрипты — от маркетинга до технического мониторинга.
Централизованное управление тегами. Все коды подключаются и хранятся в одном месте — внутри контейнера GTM. Это позволяет легко находить нужный тег, отключать или изменять его без необходимости разбираться в HTML-структуре сайта.
Единоразовое вмешательство в код страниц сайта. После первой установки кода GTM не нужно больше вносить изменения в код сайта. Все новые скрипты добавляются через визуальный интерфейс диспетчера.
Система контроля версий и возможность отката к предыдущим версиям в несколько кликов. GTM автоматически сохраняет все изменения в отдельных версиях. Вы всегда можете вернуться к предыдущей версии контейнера — буквально в два клика. Что особенно удобно, если вы допустили ошибку при настройке тега или если после изменений нарушилась логика работы сайта.
Возможность установки целей и отслеживания конверсий. Система позволяет создавать собственные цели и отслеживать любые действия пользователей: клики, скроллы, отправку форм, переходы по ссылкам и многое другое.
Кроме основных функций, GTM предлагает расширенные возможности для персонализации и тестирования. Благодаря этому вы можете запускать динамические теги, использовать сегментацию пользователей, исключать или включать определенные группы посетителей в кампании, а также корректировать теги в зависимости от поведения, географии или типа устройства. Вот дополнительные плюсы GTM:
Удобство тестирования и возможность проверки кода до его публикации на сайте. GTM предоставляет функцию Debug Mode, которая позволяет тестировать теги до их публикации. Вы можете увидеть, какие теги сработали, какие — нет, и почему.
Совместимость с мобильными сайтами и приложениями. GTM доступен не только для десктопных сайтов, но и для мобильных приложений через Firebase.
Наличие встроенных шаблонов для настройки кода. В диспетчере есть готовые шаблоны для большинства популярных сервисов. При этом вы можете писать свои собственные теги, скрипты и условия, используя пользовательский HTML и JavaScript.
Управление триггерами и возможность создавать собственные переменные для вызова кода в определенное время либо при совершении указанного действия пользователем на сайте.
Асинхронная загрузка тегов способствует ускорению загрузки страниц. Все теги, добавленные через GTM, загружаются асинхронно — это значит, что они не блокируют основную загрузку страницы.
Как создать и запустить аккаунт в GTM
Если вы впервые работаете с Google Tag Manager, начнем с самого начала — создания аккаунта и настройки первого контейнера.
Шаг 1. Зарегистрируйтесь в GTM. Перейдите на страницу диспетчера тегов и войдите под своей учетной записью Google. Нажмите «Создать аккаунт».
В поле «Название аккаунта» введите название вашей компании или проекта. Например, MyStore. Выберите страну, в которой работаете — это влияет только на условия обслуживания.
Шаг 2. Создайте контейнер. Введите его название — это может быть домен сайта или название проекта. Например, mystore.ru.
Выберите, где будет использоваться контейнер:
iOS/Android — для мобильных приложений.
AMP — для ускоренных мобильных страниц.
Нажмите «Создать», прочитайте и примите условия использования.
Шаг 3. Установите GTM на сайт. После создания контейнера система предложит установить код GTM на ваш сайт:
Первый фрагмент нужно вставить в раздел <head> всех страниц сайта.
Второй — в начало <body>.
Важно: Убедитесь, что код размещен на всех страницах, особенно если вы используете одностраничные приложения или динамическую подгрузку контента.
Рекомендуется удалить коды систем аналитики и прочих сервисов до установки диспетчера тегов. Если уже настроены конверсии и удаление кода аналитики невозможно — установите код GTM после кода аналитики.
Шаг 4. Подключите Google Analytics через интерфейс диспетчера тегов.
В конфигурации тега выберите нужный.
В пункте «Настройки Google Analytics» выберите переменную, введите уникальный идентификатор отслеживания в формате UA XXXXXXХХХ-X и нажмите «Сохранить».
Внесенные изменения отображаются в интерфейсе рабочей области.
Перед публикацией введите название правок для удобства их отслеживания в будущем. Для этого нажмите на имя тега в разделе «Изменения в рабочей области», внесите данные и нажмите «Опубликовать».
Перед публикацией можно проверить правильность настройки тега через функцию предварительного просмотра.
Либо перейдите в сервис аналитики и посмотрите, отображаются ли данные о посетителях в режиме реального времени. Проверить работу GTM также можно через соответствующее расширение в браузере Google Chrome.
В разделе «Версии» отображается список сохраненных изменений. Если нажать на три точки справа, откроется список функций, доступных для каждой версии.
Для запуска следующего проекта создайте новый аккаунт. Нажмите «Назад» в левой верхней части экрана, затем кликните на «Создать аккаунт».
Заключение
Google Tag Manager — удобная система управления кодами и аналитикой на сайте. Она позволяет централизованно хранить и контролировать подключаемые теги без вмешательства в исходный код сайта. Это особенно удобно, если:
доступ к коду ограничен;
есть риск нарушить работу сайта при правках;
важно иметь возможность быстро вернуться к предыдущим настройкам.
Система сокращает зависимость от разработчиков, ускоряет запуск изменений и снижает риски технических ошибок.
Больше об актуальных инструментах аналитики можно узнать на онлайн-курсе «Профессия Аналитик данных»
