Инструкция по Google Tag Manager от Инитлаб

Для полноценной аналитики самого сайта и продаж на нём необходима интеграция с внешними сервисами — например Яндекс.Метрика, Google Analytics, Битрикс24, Roistat, а также подключение пикселей Facebook и ВКонтакте. Но при таком количестве скриптов вы обязательно столкнётесь с необходимостью их упорядочить.

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

Решение есть: инструмент, с помощью которого внедрить новый скрипт сможет и маркетолог, и специалист по SEO — Google Tag Manager.

В этом посте я делюсь нашей внутренней инструкцией по внедрению GTM.

Google Tag Manager несёт сплошные плюсы — экономит время, деньги и силы.

Если у вас есть своя команда — они могут воспользоваться нашей инструкцией для внедрения GTM.

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

Краткая справка

Чтобы быстро управлять множеством скриптов в маркетинговых целях без участия программистов можно использовать Google Tag Manager (GTM).

Google Tag Manager – это не счетчик веб-аналитики, он не имеет самостоятельных параметров, показателей, не собирает данные, не хранит их у себя, не предоставляет отчетов, не заменяет Google Analytics, Яндекс.Метрику и другие сервисы. Он лишь позволяет гибко управлять различными тегами в одном пространстве.

Использование GTM не является самостоятельным решением ускорения загрузки скриптов аналитики. То есть переход на GTM автоматически не поможет повысить показатели PageSpeed, но поможет упорядочить скрипты и даст возможность ускорить сайт за счёт удобной настройки отложенной или условной загрузки некоторых из них.

Размещение кода GTM

Алгоритм для маркетолога:

1. Создайте новый или выберите аккаунт на https://tagmanager.google.com/

2. Нажмите на номер счётчика и скопируйте скрипт GTM

Инструкция по Google Tag Manager от Инитлаб

3. Передайте скрипт из 2-х фрагментов для установки программистам.

Действия разработчика:

1. Получите код от маркетолога или создайте самостоятельно как указано выше. На 2021 код выглядит так: Фрагмент для вставки в раздел <head>:

<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’: new Date().getTime(),event:‘gtm.js’});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!=‘dataLayer’?‘&l=‘+l:‘’;j.async=true;j.src= ’https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,‘script’,‘dataLayer’,‘GTM-XXXXXXX’);</script> <!-- End Google Tag Manager --> Код для вставки после открывающего тега <body>: <!-- Google Tag Manager (noscript) --> <noscript><iframe src=“https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX” height=“0" width=“0” style=“display:none;visibility:hidden”></iframe></noscript> <!-- End Google Tag Manager (noscript) -->

Где GTM-XXXXXXX — номер счётчика.

2. Вставьте код GTM в шаблон сайт.

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

Добавление скриптов аналитики Google Analytics в GTM

  • В Google Tag Менеджере создайте новый тег — Google Аналитика конфигурация GA4 или Universal Analytics:
  1. Выбираете: Теги → Создать.
  2. Далее: Конфигурация тега.
  3. Выбираете GA4 или Universal Analytics.
  4. Вводите идентификатор потока данных для GA4 — номер счётчика в Google Analytic, он написан в правом верхнем углу, начинается на G-.

Либо оставляйте тип отслеживания для Universal Analytics «Просмотр страницы» и тут же, в настройках GA, создайте новую переменную, куда впишете номер счётчика из Google Analytics.

Инструкция по Google Tag Manager от Инитлаб
  • В разделе «Триггеры» выберите события, которые будут активировать тег — All Pages (то есть просмотр всех страниц).

  • Сохраните конфигурацию тега и нажмите «Опубликовать контейнер».

Если код отслеживания GA уже был размещен на сайте, после добавления его в GTM нужно удалить его с сайта.

Добавление скриптов аналитики Яндекс.Метрика в GTM

  1. Если у вас нет счётчика Яндекс.Метрики, то вы переходите на сайт https://metrika.yandex.ru/ и создаёте счётчик.

  2. Заполните поля и включите Вебвизор по необходимости.

  3. Для установки кода счетчика через GTM необходимо выбрать «Системы управления тегами».Дополнительные настройки оставьте по умолчанию пустыми.

Инструкция по Google Tag Manager от Инитлаб

Чекбокс: поставьте метку на пункте «Отправка в Метрику данных электронной коммерции». Это необходимо, если планируете подключить e-commerce через интерфейс и собирать данные о количестве заказов, сумме покупок и т. д.

4. Скопируйте код счётчика и вернитесь в интерфейс GTM.

Далее проделайте стандартную процедуру установки кода:

  1. Перейдите в «Теги».
  2. Нажмите «Создать».
  3. Во вкладке «Конфигурация тега» выберите «Пользовательский HTML».
  4. Вставьте скопированный код счетчика.
  5. Установите триггер «All Pages» на все страницы сайта.
  6. Сохраните и опубликуйте изменения.

Если код отслеживания Метрики уже был размещен на сайте, после добавления его в GTM удаляем его с сайта.

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

Подписывайтесь на мой блог если вам интересна тема тонкой настроки GTM, особенности работы с Google Analytics 4, тестирование гипотез в Google Optimize и т.д.

55
5 комментариев

и это все?? Я уж думал расскажите об отслеживании событий

2
Ответить

Расскажу скоро! Подписывайтесь )

Ответить

Хорошая внутренняя инструкция!
Можно разве упомянуть, что есть пара модулей для GTM:
https://www.drupal.org/project/google_tag (Drupal 7/8/9)
https://www.drupal.org/project/gtm (Drupal 8/9) - от нашего товарища Анатолия Полицина, модуль был сделан пока основной не сразу портировался на свежий друпал.

1
Ответить

Как с spa дела обстоят?

Ответить

Аналогично

Ответить