Введение
Google Tag Manager — это мощный инструмент, который позволяет управлять тегами (маленькими кусочками кода или сценариями) на сайте. Теги могут отслеживать аналитику, управлять рекламными кампаниями, проводить тестирование и многое другое. Используя Менеджер тегов, можно значительно упростить процесс добавления, редактирования или удаления тегов без необходимости каждый раз изменять исходный код сайта или приложения.
Определения
Теги – это куски кода аналитических и маркетинговых сервисов , упрощающие их интеграцию с сайтами и приложениями. GTM позволяет установить теги и определить условия их активации в интерфейсе, избегая прямой вставки кода в проект без привлечения разработчиков.
Аккаунт – верхний уровень Google Tag Manager, обычно один на компанию, может содержать несколько контейнеров.
Контейнер – содержит в себе несколько тегов и триггеры управляющие их активацией. Контейнеры бывают разных типов и могут быть предназначены для:
- сайтов;
- AMP-страниц;
- Android приложений;
- iOS приложений;
- для серверов.
Триггер – это условие или событие, которое запускает активацию тега.
Переменная — это имя, присвоенное значению, которое можно использовать в тегах и триггерах. Переменные служат для хранения данных, которые могут изменяться в зависимости от контекста пользовательской сессии или конкретного взаимодействия на сайте.
Преимущества
Использование GTM предоставляет ряд значительных преимуществ для веб-сайтов и их владельцев, особенно когда дело доходит до управления, оптимизации и безопасности. Вот некоторые из них:
1. Централизованное управление: Менеджер тегов позволяет управлять всеми тегами с одной платформы.
2. Улучшение производительности сайта: Загрузка тегов через Менеджер тегов осуществляется асинхронно, что означает, что они не блокируют загрузку основного содержимого страницы.
3. Гибкость и масштабируемость: Менеджер тегов позволяет легко добавлять, обновлять или удалять теги, что делает процесс экспериментирования или внедрения новых технологий гибким и быстрым.
4. Улучшенная точность данных: Поскольку все теги управляются централизованно, снижается риск ошибок при их ручной установке, что приводит к более точному сбору данных.
5. Безопасность: Менеджер тегов обеспечивает повышенный контроль над тем, кто и как может вносить изменения в теги.
6. Совместная работа и контроль доступа: Платформы для управления тегами включают функции контроля версий и управления правами доступа.
Установка и настройка Google Tag Manager
Создаем аккаунт и устанавливаем контейнер
Переходим на сайт Менджара тегов: https://tagmanager.google.com/ и нажимаем кнопку “Создать аккаунт”. Форма состоит из двух частей:
- Создание аккаунта:
- Название аккаунта – название вашей компании;
- Страна;
- Чекбокс “Передать анонимные данные в Google и другие службы”.
- Создание контейнера
- Название контейнера – Google предлагает использовать доменное имя;
- Целевая платформа – так как мы будем устанавливать контейнер на сайт, выбираем “Веб-сайт”.
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/1-1.png)
Жмем кнопку “Создать”, в открывшемся окне ставим галочку в чекбоксе согласившись с условиями обработки данных и нажимая кнопку “Да” соглашаемся с “Условиями использования Google Менеджера тегов”.
После процедур проведенных выше платформа должна показать нам всплывающее окно с кодом контейнера и инструкциями по его установке.
![Скришот](https://pavelkoryakin.com/wp-content/uploads/2024/04/2-1.png)
Мы можем закрыть его и открыть повторно нажав на идентификатор контейнера в шапке приложения:
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/3-1.png)
Есть несколько способов для установки кода на сайт:
- обратиться к разработчику, отправив ему код и инструкции по установке;
- установить самостоятельно, если у вас есть доступ к коду сайта и вы уверены в своих силах;
- установить с помощью специальных плагинов, которые предоставляет ваша CMS.
После установки кода контейнера возвращаемся в интерфейс GTM и тестируем правильность установки. Для этого открываем окно с кодом (см. скриншот выше), вводим в нижнее поле URL сайта и нажимаем кнопку “Тестировать”. Если контейнер установлен правильно, мы должны получить следующий результат:
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/4-1.png)
Закрываем окно и приступаем к настройке нашего первого тега.
Устанавливаем Google тег с помощью GTM
Для того, чтобы продолжить, у нас должен быть создан аккаунт, ресурс и поток данных в Google Analytics. Как это сделать вы можете прочитать в статье Как пройти регистрацию и настроить аккаунт Google Analytics 4.
- Переходим в Google Analytics, страница Администратор.
- Настройка ресурса – Сбор и редактирование данных – Потоки данных.
- Жмем на стрелку потока.
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/5-1.png)
- Копируем Идентификатор потока данных.
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/6-1.png)
- Возвращаемся в интерфейс GTM.
Подготовительные действия завершены, коротко опишу основной этапы настройки тега:
- Создание переменных, они могут быть нужны не всегда.
- Создание триггера, который будет запускать наш тег.
- Создание тега.
В левой панели GTM нажимаем на пункт “Переменные”, а на открывшейся странице в разделе “Пользовательские переменные” кнопку “Создать”.
![](https://pavelkoryakin.com/wp-content/uploads/2024/04/7-1.png)
Нажимаем на поле “Конфигурация переменной” и выбираем в разделе “Утилиты” – “Константа”:
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/8-1.png)
В поле “Значение” вставляем скопированный в GA4 Идентификатор потока данных и нажимаем кнопку “Сохранить”.
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/9-1.png)
Система предложит добавить имя создаваемой переменной, вписываем имя и нажимаем “Сохранить”.
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/10-1.png)
Мы создали свою первую переменную и теперь она будет доступна в любом элементе контейнера.
Так как сейчас для активации тега мы будет использовать встроенный триггер, создавать новый мы не будем. Переходим на вкладку “Теги” и нажимаем кнопку “Создать”. Кликаем по полю “Конфигурация тега” – “Рекомендуемые” – “Google Аналитика”.
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/11-1.png)
Выбираем “Тег Google”
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/12-1.png)
В поле идентификатор тега вводим две фигурные скобки и выбираем созданную переменную. Можно было бы просто ввести значение идентификатора, но сохранив его в переменной мы сможем в будущем переиспользовать ее в других настройках.
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/13-1.png)
Чтобы тег Google Analytics активировался раньше других триггеров, мы будем использовать триггер “Инициализация всех страниц”.
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/14-1.png)
Сохраняем изменения предварительно введя имя нового тега.
Тестирование
Google Tag Manager
Для того чтобы протестировать нашу работу нажимаем на кнопку “Предварительный просмотр” в правом верхнем углу приложения.
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/15-1.png)
На открывшейся странице вводим URL сайта и нажимаем кнопку “Connect”.
![](https://pavelkoryakin.com/wp-content/uploads/2024/04/16-1.png)
Откроется главная страница вашего сайта с окном GTM в правом нижнем углу:
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/17-1.png)
Возвращаемся на страницу agassistant.google.com и нажимаем кнопку “Continue”.
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/18-1.png)
Нажимаем на пункт “Initialization”. В открывшемся окне проверяем, что тег отработал правильно и отображается идентификатор потока данных Google Analytics.
![Скриншот](https://pavelkoryakin.com/wp-content/uploads/2024/04/19-1.png)
Если вы получили схожий результат, значит все сделали правильно.
Мы можем поделить результатом тестирования, для этого нужно нажать на три точки в верхнем правом углу и в диалоговом окне скопировать ссылку на страницу отладки.
Для того чтобы выйти из режима отладки GTM нужно проделать одно из двух следующих действий:
- нажать на кнопку “Finish” в правом нижнем углу сайта;
- нажать на крестик в левом верхнем углу интерфейса отладчика.
Google Analytics
Еще один этап тестирования – это проверка поступающих данных в Google Analytics. Они могут приходить в обычные отчеты с задержкой и для решения этой задачи GA предоставляет нам два способа:
- “Отчет в реальном времени” – расположен на странице “Отчеты”;
- DebugView – расположен на странице “Администратор”, Настройка ресурса – Просмотр данных – DebugView.
Так как DebugView более удобен и информативен, воспользуемся им. Для этого в режиме “Предварительный просмотр” GTM перейдем в интерфейс GA и откроем вкладку DebugView. Здесь в режиме реального времени отображаются наши действия на сайте.
![](https://pavelkoryakin.com/wp-content/uploads/2024/04/20-1.png)
Все элементы этой страницы кликабельны и несут большое количество полезной информации, изучите ее.
Публикация
Если результаты тестов вас удовлетворили, остается только опубликовать контейнер и начать собирать данные. Для этого в правом верхнем углу интерфейса Google Tag Manager нажимаем кнопку “Отправить”. Система предложит указать имя и описание последней конфигурации, а также покажет внесенные изменения. Нажимаем кнопку “Опубликовать” и завершаем настройки.
Заключение
Только что мы проделали большую и важную работу создали аккаунт Google Tag Manager, запустили свой первый контейнер, установили и протестировали Google тег.