Что такое Google Tag Manager (Диспетчер тегов)

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

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

Оно и понятно: неискушенному человеку бывает сложно сориентироваться в программных тонкостях.

То же самое относится к любому другому стороннему плагину, скрипту.

Чтобы избавить аудиторию от подобных «головняков», Google создал Диспетчер тегов (Google Tag Manager). С ним нет нужды вручную добавлять и проверять работу кодов сторонних сервисов и программ.

Что такое теги

Тегами называют фрагменты кода тех самых плагинов — скриптов, что вы ставите себе на сайт.

Обычно они помещаются в часть страницы. Чаще всего это упомянутый Google Analytics; настройка ретаргетинга; авторассылка по брошенным корзинам в интернет-магазине; сервисы a/b тестов, тепловых карт, динамического контента и т. д.

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

А если нужно внести изменения и перенастроить правило отслеживания конверсий, к примеру? Вот здесь и начинается «трэш и угар». Не у всех, конечно, но достаточно часто.

Что сделал Google

Разработчики Google решили упростить жизнь «простым смертным» и создали Диспетчер для управления тегами в одном месте.

Теперь вы не вставляете каждый сторонний скрипт отдельно, а размещаете все и работаете в панели управления Диспетчера. В результате вы:

Итак, переходим к процессу настройки.

Настройка Google Tag Manager

1) Открываете страницу проекта.

Если у вас есть аккаунт Google, входите по ссылке «Войдите в аккаунт» в правом верхнем углу, если нет – регистрируетесь.

2) Дальше вы создаете личный аккаунт уже конкретно в Диспетчере.

Для начала даете ему название.

В качестве имени контейнера лучше всего указать доменное имя сайта.

Ставим галочку «Передавать анонимные данные в Google и другие службы» и переходим к следующему шагу.

3) Отмечаете настройки контейнера:

Это выбор платформы, где будет использоваться Google Tag Manager – веб-сайт, мобильная версия под iOS или Android , либо страницы AMP-формата.

Принимаем условия использования Диспетчера и переходим непосредственно к коду.

4) Tag Manager генерирует персональный код, который нужно вставить на любую страницу сайта, где требуется установка и отслеживание скриптов.

Чаще всего это не одна, а все страницы.

Обратите внимание:код ставим в раздел <head> и сразу после открывающего тега <body>.

Если сомневаетесь в своих силах, попросите сделать это программиста – задача на несколько минут.

Жмем ОК и приземляемся на странице Обзор диспетчера тегов Google.

5) Чтобы добавить новый тег, выберите «Теги» из левого вертикального меню, которое покажет все доступные теги в текущем контейнере.

Нажмите ссылку «Новый», чтобы продолжить.

6) После клика на «Создать», дальше вы увидите окно, где могут быть добавлены новые теги.

Кликните по центру и выберите продукты из списка что всплывает справа. Google дает подсказки, так что, там все достаточно просто и без профессиональных навыков. Всего вы можете добавить до 50 тегов разного содержания и целей.

Google Менеджер тегов поможет вам настраивать и развертывать теги, в том числе для Google Рекламы, Google Аналитикии Floodlight, а также сторонние.

Как правило, для компании достаточно одного аккаунта. В аккаунте Менеджера тегов есть один или несколько контейнеров.

Существуют типы контейнеров для сайтов, AMP-страниц, приложений Android и iOS.Как создать аккаунт и контейнер. Откройте Менеджер тегов и нажмите Аккаунты Создать аккаунт.

Введите название аккаунта и при желании установите флажок «Передавать анонимные данные в Google и другие службы».Нажмите Далее.Введите информативное название контейнераи выберите тип ресурса: Веб-сайт, AMP, iOSили Android.

Если вы создаете контейнер для мобильного приложения, выберите также вариант SDK: Firebaseили Устаревшее приложение.Нажмите Создать.Ознакомьтесь с Условиями использования и примите их, нажав кнопку Да.

При первой загрузке контейнера вы увидите приглашение добавить фрагмент кода на сайт или начать работу с Менеджером тегов в рамках SDK для выбранной платформы. Вы можете установить фрагмент кода сразу или нажать ОК, чтобы сделать это после настройки контейнера.

Как добавить контейнер в существующий аккаунт?

В Менеджере тегов нажмите Аккаунты рядом с названием нужного аккаунта.Выберите Создать контейнер.Повторите действия 4–6, описанные выше.

Как установить контейнер если вы не умеете работать с кодом или у вас нет доступа к коду сайта или приложения, вам может понадобиться помощь разработчика. Рекомендуем разработчикам изучить краткое руководство.

В Менеджере тегов откройте раздел Рабочая область.Вверху страницы вы увидите идентификатор контейнера в формате GTM-XXXXXX.Нажмите на идентификатор.Скопируйте и вставьте фрагменты кодана свой сайт в соответствии с инструкциями или загрузите и установите нужный SDK для мобильного приложения.

Ниже приведены советы для веб-страниц, AMP-страници мобильных приложений.Веб-страницы.

Разместите верхний фрагмент кода (начинающийся со <script>) в разделе <head>веб-страницы. Желательно сделать это как можно ближе к открывающему тегу <head>, но после деклараций dataLayer.Разместите нижний фрагмент кода (начинающийся с <noscript>) сразу после тега <body>.

Чтобы предотвратить повторную активацию, удалите из кода все заданные вручную теги, которые были перенесены в контейнер Менеджера тегов.Чтобы предотвратить несанкционированный доступ к контейнеру, фрагмент кода Менеджера тегов по умолчанию использует HTTPS.

Если у вас есть причины использовать адреса без указания протокола, измените https://на //в исходном URL во фрагменте контейнера. Подробнее…Страницы AMPВставьте код с фрагментом <script>непосредственно перед закрывающим тегом </head>.

Вставьте раздел с фрагментом <amp-analytics>сразу после открывающего тега <body>.После установки контейнера выполните следующие действия:Слева нажмите Теги.

Чтобы добавить тег, нажмите кнопку Создать, выберите тип тега и задайте триггеры.Чтобы изменить тег, выберите его в списке и задайте новые настройки, например триггеры, активирующие этот тег.

Чтобы удалить тег, выберите его в списке и справа вверху нажмите  > Удалить.Предварительный просмотрпомогает проверить конфигурацию Менеджера тегов на сайте или в приложении и убедиться, что все работает правильно.

 

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

Подробнее…Если вы размещаете тег в приложении, изучите документацию для разработчиков (Androidи iOS).

Когда все будет готово, справа вверху нажмите Отправить.

Заполните поля Название версиии Описание версии, а затем нажмите Опубликовать.Как правило, работа с Менеджером тегов начинается с добавления тега Google Аналитики «Просмотр страницы».