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

9
797
Материалы для скачивания

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

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

Если кратко, то для установки Google Tag Manager вам потребуется:

1. Создайте аккаунт и контейнер в Google Tag Manager

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

Теперь нужно завести аккаунт непосредственно в Диспетчере тегов. Для это нажмите «Создать аккаунт»:

Создание аккаунта в Google Tag Manager

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

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

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

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

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

alt — Две части кода GTM для установки на сайт

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

2. Установите код Google Tag Manager на сайт

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

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

Код GTM для установки в раздел <head>

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

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

Код GTM для установки в раздел <body>

Важно!

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

Особенности установки Google Tag Manager на AMP страницы

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

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

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

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

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

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

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

4. Проверьте работу Google Tag Manager

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

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

Проверка работы GTM с помощью Tag Assistant by Google

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

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

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

Больше информации о Tag Assistant вы найдете в справке Google.

Еще пара полезных советов

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

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

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

Что дальше

После установки кода на сайт вам остается добавить и настроить теги и переменные в интерфейсе Диспетчера тегов. Как это сделать, узнайте в статье «Что такое Google Tag Manager и как настроить Google Analytics с его помощью» или вебинаре «На шаг впереди: приемы и тонкости работы с Google Tag Manager».

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

Вас также могут заинтересовать