Google Tag Manager для новичков

1. Как работали аналитики до появления Google Tag Manager

Какая была ранее стандартная процедура отслеживания каких-либо действий пользователей:

• задача — установка Google Analytics или другого инструмента отслеживания;
• решение — программист добавляет на сайт фрагмент кода JavaScript нужных инструментов;
• посетитель попадает на веб-сайт;
• загружается добавленный код отслеживания;
• посетитель отслеживается.

По умолчанию GA4 предлагает множество метрик и некоторые возможности автоматического отслеживания событий. А чтобы принимать действительно правильные и продуманные решения, отслеживать нужно гораздо больше событий: взаимодействия (например, отправку форм), продажи и т. д.. Т. е. на сайт придется добавить еще больше кодов отслеживания, и их количество будет постоянно расти. И каждый раз придется обращаться к программисту и ждать.

Выход — установить на сайт код GTM и уже внутри самого GTM активировать любые необходимые коды отслеживания.

2. Что такое Google Tag Manager?

Google Tag Manager — это бесплатный инструмент для управления тегами от Google. GTM – связующее звено между сайтом и маркетинговыми инструментами. По сути, это та же система управления контентом (CMS или движок сайта).

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

А далее — протестировать установленные теги. Посмотреть, срабатывают ли они при загрузке страницы или нажатии определенной кнопки. И если обнаружилась какая-то неполадка, редактируете теги в самом Google Tag Manager, а не исходный код сайта. Что очевидный плюс.

3. Google Tag Manager vs. Google Analytics

Google Analytics и Google Tag Manager не одно и то же.

Часто новички не могут определиться, что из них важнее и что следует поставить на сайт в первую очередь. Очередности нет, оба инструмента: и Аналитика, и ГТМ работают сообща, а не по отдельности.

Google Analytics отслеживает данные о посетителях сайта и отображает информацию в отчетах, а Google Tag Manager отвечает за активацию GA4.

GA – один из тегов отслеживания. GTM используется для передачи данных из одного источника в другой. Детальнее о GA и GTM ITForce писали в статье.

Google Analytics — не единственный тег, который совместим с Google Tag Manager. Другие примеры включают:

• тег конверсии Google Ads;
• код пикселя Facebook;
• любой другой пользовательский код HTML/Javascript и т. д..

Основные преимущества Google Tag Manager:

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

Подробнее о них и еще 6 других мы писали об 11 преимуществах использования Диспетчера тегов Google.

4. Как работает Google Tag Manager?

GTM работает с 3 основными понятиями:

• теги;
• триггеры;
• переменные.

Рис. 1 – Google Tag Manager

Тег — это фрагмент кода, который запускается на сайте при определенном действии посетителя.

Например: отследить этот клик и отправить в Google Analytics и т. д..

Триггер — это условие, при котором тег должен сработать.

Например: триггер с условием активировать тег только тогда, когда пользователь просматривает URL-адреса, содержащие путь /blog/. Когда выполняется определенное условие (или набор условий), активируется триггер и с сайта отправляются все теги, связанные с триггером.

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

Например: переменная класса click имеет имя значения (например, строку слова), назначенное кнопкам на сайте.

Переменная может:

• содержать единый фрагмент данных (например, URL-адрес страницы, домен веб-сайта, идентификатор продукта, расширение ссылки и т. д.);
• содержит набор данных/настроек (переменная настроек GA (для Universal Analytics) содержит несколько настроек, связанных с GA, таких, как идентификатор отслеживания, настройки медийной рекламы и т. д.);
• быть сложной функцией (но это слишком продвинутый момент для новичков) и т. д..

Рис. 2 – Теги и триггеры

Разберем взаимосвязь между тегами, триггерами и переменными в Google Tag Manager на примере ниже.

Рис. 3 – Взаимосвязь между тегами, триггерами и переменными в Google Tag Manager

1. Тег конверсии Google Ads — это тег. Он указывает Google Tag Manager отслеживать конверсию.
2. Когда должен активироваться тег конверсии? На Thank You Page (она же страница подтверждения заказа). Это условие и есть триггер.
3. Теперь нужно, чтобы триггер сработал и данные отправились в Google Ads. Как это сделать?

• Тег конверсии Google Ads может отправить итоговую сумму заказа, которая и есть переменная. Каждый раз по завершении покупки тег Google Ads извлекает значение переменной Общая сумма заказа и отправляет его на серверы Google.
• Теперь в триггере нужно точно указать Google Tag Manager, когда срабатывать. Слова на странице Спасибо понятны человеку. Но не Google Tag Manager. Что такое Thank You Page? Это страница, URL которой содержит /purchase-successful/. И в этом случае URL страницы — переменная. И GTM будет постоянно проверять URL страницы при ее загрузке. Если переменная (URL) содержит /purchase-successful/, триггер сработает.

Итак, переменные можно использовать и в тегах, и в триггерах, а также в других переменных.

5. Как создать учетную запись Google Tag Manager

Для начала давайте создадим учетную запись GTM.

1. На официальном сайте Google Tag Manager кликаем на кнопку Start for Free.

Рис. 4 – Стартовая страница ГТМ

Если у вас уже есть аккаунт Gmail, Google Ads, Google Analytics и т. д., то вы автоматически войдете в Google Tag Manager. Если нет, сначала нужно будет создать учетную запись Google.

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

1. В поле Имя вводим название компании. Если вы представляете агентство, попросите клиента создать учетную запись GTM, а затем предоставить доступ к ней вам.
2. В разделе Настройка контейнера введите имя сайта. Например, его домен. Выбираем Веб как целевую платформу.

Рис. 5 – Добавить новый аккаунт в ГТМ

Учетная запись Google Tag Manager работает так же, как учетная запись GA, обычно она предназначена для компании/бизнеса/клиента, а контейнер — для сайта или приложения. Один контейнер может содержать множество тегов, триггеров и переменных.

Однако если у одного человека несколько сайтов, и их структура и реализация отслеживания схожи (например, это 2 интернет-магазина), то можно использовать один контейнер на нескольких сайтах.

1. Нажимаем Создать.
2. Читаем Соглашение об условиях использования ГТМ и условия обработки данных.

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

Один контейнер у нас уже есть. После его создания имеем 2 кода, которые нужно добавить на сайт. Здесь понадобится помощь программиста: один код добавляется в <head> сайта, а второй — сразу после тега <body>.

Рис. 6 – Код ГТМ

Этот код активирует все настроенные вами теги.

Как проверить, работает ли Google Tag Manager?

Включить Debug view (режим предварительного просмотра и отладки) и посмотреть, появится ли он на экране.

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

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

Доступ к GTM можно предоставить на уровне:

1. учетной записи;
2. контейнера.

Для учетной записи есть 2 типа разрешений:

• администратор — пользователь может просматривать и редактировать настройки учетной записи, активность учетной записи и управление пользователями. Пользователь получает доступ Чтение ко всем контейнерам учетной записи;
• пользователь — пользователь может видеть настройки учетной записи, ее активность и управление пользователями, но не может редактировать настройки, доступа ко всем контейнерам также нет, они не видны.

Как предоставить доступ к учетной записи, описано в статье Как открыть доступ к Google Ads, Google Analytics, GTM, Google Shopping?

6. Создание первого тега в Google Tag Manager

Как правило, самый первый тег, который устанавливают в Google Tag Manager, это Google Analytics 4.

Переходим на страницу analytics.google.com в режим Администратор. В разделе Свойства нажимаем Создать ресурс.

Рис. 7 – Создать ресурс в ГТМ

Введите название объекта. Это может быть название сайта, компании, бренда и т. д.. Выберите страну компании, часовой пояс и основную валюту, в которой работает ваш бизнес.

Рис. 8 – Выбор страны компании, времени и валюты

Затем нажмите Далее, ответьте на несколько вопросов и кликните Создать.

Следующий шаг — настройка сбора данных. Это источник данных, из которого события будут отправляться в ваш ресурс Google Analytics 4.

В одном ресурсе может быть несколько источников данных. Например, 3 веб-ресурса, 1 для приложения Android и 1 для приложения iOS.

Рис. 9 – Настройка сбора данных

Введите URL своего сайта (например, https://www.mywebsite.com). Обратите внимание, что протокол (https) уже выбран.

Когда вы создаете поток веб-данных в Google Analytics 4, у вас есть возможность включить или отключить расширенные события (enhanced measurement).

Рис. 10 – Активация расширенных событий

Когда будете готовы, нажмите кнопку Создать поток. Когда вы создаете поток данных (веб), вы увидите идентификатор измерения.

Рис. 11 – Идентификатор измерения

В правом верхнем углу указан идентификатор отслеживания вашего нового ресурса. Скопируйте его, он будет использоваться в Google Tag Manager.

Перейдите в контейнер Google Tag Manager > Теги > Создать и выберите Конфигурация GA4.

В поле Идентификатор измерения введите идентификатор, который был скопирован из GA4. Сохраните событие Отправить просмотр страницы при загрузке этой конфигурации, если есть необходимость автоматического отслеживания просмотров страниц.

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

В разделе Инициирование выберите Все страницы, а затем назовите тег, например Конфигурация GA4 — [идентификатор измерения].

Рис. 12 – Созданный тег

Нажмите Сохранить тег.

Готово. Вы подключили Google Analytics на сайт.

FAQ о Google Tag Manager

№1. Google Tag Manager работает только с продуктами Google?

GTM работает со многими платформами. Он предлагает 80+ шаблонов тегов (Google Analytics, HotJar, тег Twitter и т. д.). Кроме того, в GTM можно добавлять собственные коды с помощью HTML.

№ 2. Google Tag Manager бесплатен?

GTM имеет как бесплатный, так и премиум-план. Бесплатный тариф хорошо подходит для пользования МСБ. Крупные предприятия могут приобрести платную версию Google Tag Manager 360. Сравнение двух тарифных планов.

№3. Что делать, если моя CMS не позволяет размещать код Google Tag Manager в <head>?

Код GTM <script> можно разместить в любом месте сайта. Суть в том, что чем выше размещен код GTM, тем быстрее он загрузится и тем более точным будет отслеживание ваших событий. Самое главное не размещать код <noscript> в <head> сайта. Все остальные варианты приемлемы (например, оба кода могут быть размещены сразу после открывающего тега <body> или оба кода перед закрывающим тегом </body>).

№ 4. Нужно ли учиться программировать, чтобы использовать Google Tag Manager?

Нет, но знание JavaScript, HTML, CSS, регулярных выражений и пр. станет плюсом, т. к. ваши возможности расширятся.

№ 5. Нужны ли мне программисты после того, как я начну использовать Google Tag Manager?

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

№ 6. Где я могу получить помощь по Google Tag Manager?

• Сообщество Google Tag Manager на Facebook;
• Сообщество Google Tag Manager на Reddit;
• Официальный форум сообщества;
• stackoverflow.com.