Установка Google Tag Manager

В теории процесс установки Google Tag Manager на сайт очень прост и состоит всего из трех шагов: регистрация аккаунта, получение кода контейнера и его внедрение. Но на практике оказывается, что перед установкой требуется решить, как минимум, два важных вопроса. Первый – куда именно вставлять код контейнера. Второй – как убедиться, что GTM установлен правильно и присутствует на всех страницах сайта.

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

Регистрация аккаунта GTM и получение кода контейнера

Нужный нам адрес выглядит так: tagmanager.google.com. Если у вас есть аккаунт Google, и вы оказались на странице уже будучи авторизованным, вы сможете сразу приступить к созданию аккаунта GTM. Если нет, то сначала вам необходимо авторизоваться. В случае, если у вас нет аккаунта Google, нажмите создать аккаунт и пройдите несложную процедуру регистрации.

Страница создания нового аккаунта в диспетчере тэгов Google выглядит следующим образом:

создание аккаунта google tag manager

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

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

ВАЖНО: названия аккаунта и контейнера не должны начинаться со знака "_" и содержать зарезервированные символы (!, @, #, $, < и т.д.).

После того, как вы заполнили все поля и выбрали нужные опции, нажмите кнопку создать. Если на этом этапе все выполнено корректно, далее вам предложат ознакомиться с правилами использования GTM (к сожалению, русского перевода пока нет).

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

Подробнее о коде контейнера Google Tag Manager

Если вам хочется узнать подробнее о том, что конкретно происходит, когда код контейнера установлен на сайте, рекомендую ознакомиться с отличной статьей Simo Ahava, которая подробным образом описывает «анатомию» кода контейнера.

Что дальше?

Установка Google Tag Manager практически завершена, осталось только добавить код на сайт. Просто, не так ли? Однако именно в этом месте и начинается самое интересное!

В начале статьи я писал о том, что перед установкой надо решить два важных вопроса: куда именно внедрять код контейнера Google Tag Manager и как убедиться, что он установлен корректно и присутствует на всех страницах сайта? Давайте рассмотрим возможные решения.

Куда именно вставлять код контейнера?

Официальные рекомендации Google выглядит следующим образом:

Paste this snippet into your website template page so that it appears immediately after the opening <body> tag.

Но почему библиотека с асинхронной загрузкой должна располагаться в <body>, когда по логике чем быстрее она подключится, тем лучше? Причин несколько. Главная заключается в том, что библиотека GTM «работает» непосредственно с DOM (appendChild()). В следствие этого в Internet Explorer 7 и более старых браузерах, которые плохо отрабатывают JavaScript, могут возникнуть проблемы с загрузкой страниц.

Здесь я не буду подробнее описывать другие причины, так как эта тема для отдельной статьи. Кроме этого, если вы владеете английским на даже на сносном уровне, узнать больше о методах взаимодействия GTM c вашим сайтом можно в блоге того же Simo Ahava. Вот здесь он пишет о том, где, как и почему лучше размешать код контейнера, а здесь – подробнее об устройстве GTM.

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

Как видите, код внедрен в <head>. В чем преимущества этого метода? Во-первых, библиотека загружается чуть раньше, а это может повлиять на точность собираемых данных. Во-вторых, добавление кода в <head> просто удобней c технической точки зрения. Например, для многих сайтов на WordPress, где нет возможности быстро отредактировать <body> каждого шаблона.

Теперь о минусах. Первое – такой способ внедрения не приветствуется Google. Это означает, что возможные ошибки в работе диспетчера тэгов на вашем сайте могут быть вызваны именно таким расположение сниппета. Второе – вам все же придется расположить содержимое <noscript></noscript> сразу после <body>, так как стандарты HTML5 не предусматривают наличие встроенного кода в <head>. К тому же, если вы собираетесь внедрить Яндекс.Метрику с помощью GTM, лучше всего расположить код контейнера в <body>, так как сниппет Метрики также имеет <noscript>.

Как проверить корректность установки Google Tag Manager?

Почти все готово. Осталось проверить корректность внедрения. Давайте рассмотрим возможные решения задачи.

Tag Assistant

Пожалуй, самым распространенным инструментом для проверки корректности установки GTM является Tag Assistant.

пример tag assistant

Это простое и очень эффективное расширение для Chrome, позволяющее проверить корректность внедрения практически всех маркетинговых скриптов Google, а именно:

  • Google Analytics (ga.js)
  • Google Analytics (dc.js)
  • AdWords Conversion Tracking
  • AdWords Remarketing (legacy)
  • AdWords Remarketing (new remarketing tag)
  • Doubleclick Floodlight
  • Google Tag Manager

C помощью этого инструмента можно контролировать множество важных показателей. Например, данные электронной торговли:

datalayer в tag assistant

Подробнее о том, что из себя представляет Tag Assistant, можно посмотреть здесь. Также рекомендую подробнее изучить возможности Tag Assistant Recordings.

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

GA Checker

Используйте crawler GaChecker. В отличии от Tag Assistant c помощью этого инструмента вы сможете быстро проверить сразу все страницы вашего сайта на наличие вышеописанных скриптов Google. Для этого необходимо лишь задать параметры в специальной форме. Конечно, есть определенные ограничения по количеству страниц. Подробнее о работе инструмента можно узнать здесь.

Проверяем наличие Tag Manager с помощью самого Tag Manager

Звучит странно, но такой метод, предложенный David Vallejo, вполне реален. Логика проста: если страница содержит код GTM, с помощью события beforeunload создаем 10-секундную куку, а на следующей странице проверяем ее наличие. Если кука отсутствует, посылаем событие в GA. Конечно, такой метод не надежен на 100%, однако позволяет достаточно быстро справится с задачей. В одной из следующих статей я постараюсь предложить свой вариант проверки установки GTM с помощью самого GTM.

Другие способы

Кроме вышеупомянутых способов есть и другие. Например, расширения Chrome (GA Debugger, WASP) или инструмент GTM Sonar и др. В конце концов, мы можете использовать консоль браузера.

Итог

Как видите, установить Google Tag Manager на сайт просто. Зарегистрируйте аккаунт, получите код и внедрите его на сайт. Другое дело – убедиться в том, что диспетчер установлен правильно, и тэги отрабатывают так, как надо. К счастью, сейчас есть сразу несколько инструментов, позволяющих с достаточной точность определить наличие кода GTM на странице и корректность его установки.

Share on VKShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *