Как установить Диспетчер тегов Google на свой сайт

Опубликовано: 2022-04-12

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

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

Короче говоря, чтобы установить Диспетчер тегов Google, вам необходимо:

  • создать учетную запись и контейнер в Google Tag Manager;
  • установить код Google Tag Manager на свой сайт;
  • опубликовать контейнер;
  • проверьте Диспетчер тегов Google.

1. Создайте учетную запись и контейнер в Диспетчере тегов Google.

На главной странице Диспетчера тегов нажмите кнопку « Зарегистрироваться » и войдите, используя свой адрес Gmail или любую другую учетную запись Google:

Теперь вам нужно создать учетную запись прямо в Диспетчере тегов. Для этого нажмите Войти в Диспетчер тегов :

Далее нажмите Создать учетную запись :

Придумайте название для своей учетной записи — удобнее всего использовать название вашей компании. Затем выберите страну, установите флажок рядом с пунктом Анонимно делиться данными с Google и другими службами (необязательно) и нажмите Продолжить :

Теперь нужно настроить контейнер. Если сравнить структуру Google Tag Manager со структурой Google Analytics, то контейнер — это эквивалент ресурса в GA. Он хранит теги, триггеры и переменные для всего сайта. В одном GTM-аккаунте может быть несколько контейнеров: для сайта, для мобильного приложения, для AMP-страниц и так далее. Для удобства контейнер лучше назвать в честь ресурса, для которого он создан. Например, это может быть адрес вашего сайта.

После того, как вы ввели имя контейнера, выберите, где он будет использоваться (в нашем примере это Web ) и нажмите Create :

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

После этого вы увидите окно с фрагментом кода GTM, который необходимо установить на ваш сайт:

Вы можете сразу скопировать код и установить его на все страницы сайта, которые хотите мониторить, либо нажать Ок и сделать это позже, когда добавите в контейнер первые теги. Вы можете просмотреть и скопировать код в любое время в разделе « Администрирование » → « Установить Google Tag Manager» :

2. Установите код Диспетчера тегов Google на свой сайт.

Если вы знакомы с разработкой веб-сайтов и имеете доступ к панели администратора, добавить код диспетчера тегов несложно. Вот пример того, как это сделать через WordPress. В противном случае вам все равно придется обращаться за помощью к программистам; в противном случае есть риск сломать исходный код страницы.

Код Диспетчера тегов Google состоит из двух фрагментов и загружается асинхронно. То есть основная часть страницы продолжает загружаться, не дожидаясь загрузки контейнера GTM. Первая часть кода должна быть размещена в шапке страницы, как можно ближе к открывающему тегу <head>:

Это связано с тем, что чем выше позиция первого фрагмента, тем быстрее он будет загружаться. Если вы вставите его в тег <body>, то рискуете потерять данные о пользователях, покидающих страницу до загрузки этого тега.

Вторая часть кода работает как резервная и помогает отслеживать действия пользователей, отключивших JavaScript. Его нужно разместить сразу после открывающего тега <body>:

Важный!

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

Установка Диспетчера тегов Google на AMP-страницу

Если вы используете технологию AMP для быстрой загрузки и адаптации страниц под мобильные устройства, то первую часть кода следует размещать перед закрывающим тегом </head>:

А вторую часть кода нужно вставить сразу после открывающего тега <body>:

3. Опубликуйте контейнер

Даже если вы не добавили в контейнер ни одного тега, мы рекомендуем опубликовать его сразу после установки кода GTM на свой сайт. В противном случае контейнер вызовет ошибку 404. Впрочем, это не критично. Если вы отслеживаете ошибки JavaScript с помощью определенных сервисов, таких как TrackJS, то ошибки 404 будут засорять ваши отчеты. Чтобы не создавать лишнего стресса для разработчиков, лучше публиковать пустой контейнер — это никому не вредит.

Чтобы опубликовать контейнер, перейдите на вкладку « Рабочее пространство » в Диспетчере тегов и нажмите кнопку « Отправить » в правом верхнем углу:

Выберите «Опубликовать» и «Создать версию» . Поскольку это первая версия вашего контейнера, поле « Описание версии» можно оставить пустым. Далее нажмите Опубликовать :

Готово. Контейнер опубликован.

4. Проверьте Диспетчер тегов Google

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

После загрузки и установки дополнения вы увидите этот значок на панели инструментов Chrome. . Нажмите на нее и выберите, какие системные теги вы хотите проверить и на каких страницах. Щелкните Готово .

Затем перейдите на страницу, которую хотите проверить, и щелкните значок Tag Assistant. Чтобы активировать расширение, нажмите « Включить »:

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

Если вы нажмете на конкретный тег, вы увидите возможные причины ошибки и советы по ее устранению:

Дополнительную информацию о Tag Assistant можно найти в справке Google.

Еще пара советов

При установке кода GTM на свой сайт попросите разработчика одновременно добавить фрагмент кода Google Optimize. Это хорошая идея, даже если в данный момент вы не собираетесь экспериментировать с контентом на своем сайте. Всякий раз, когда вы захотите провести A/B-тест, все будет готово.

Этот фрагмент кода необходим для асинхронной загрузки контейнера Google Optimize и не отображения исходной страницы до загрузки контейнера. При использовании фрагмента «Оптимизировать» пользователи не увидят исходное содержимое страницы, пока не будет загружена страница с изменениями в вашем тесте.

При переносе тегов, которые вы вручную внедрили в Диспетчер тегов Google, не забудьте удалить их из кода на сайте, чтобы данные не дублировались. Это важный момент.

Что дальше

После установки кода на свой сайт необходимо добавить и настроить теги и переменные в интерфейсе Менеджера тегов. О том, как это сделать, читайте в статье Что такое Google Tag Manager и как с ним настроить Google Analytics или вебинаре На шаг впереди: приемы и тонкости работы с Google Tag Manager.

PS Мы подготовили чек-лист из 20 шагов, которые должны выполнить маркетологи, чтобы принимать решения на основе правильных и полных данных. Заполните форму, и мы вышлем вам контрольный список по электронной почте.

ПОЛУЧИТЬ КОНТРОЛЬНЫЙ СПИСОК