Есть разные системы аналитики, позволяющие отслеживать поведение пользователей сайта или использовать ретаргетинг. А есть система, которая может управлять ими: Google Tag Manager, или GTM.
Сделали самый подробный гайд по инструменту: разбираемся, для чего нужен GTM, как его установить. Настройка триггеров, создание тегов, API — это и многое другое найдете в материале от CPAMonstro.
Google Tag Manager — что это
Google Tag Manager — это диспетчер тегов, позволяющий управлять HTML и JavaScript кодом сторонних сервисов. Например, системами аналитики Google Analytics, «Яндекс.Метрикой», системами от «ВКонтакте» и Facebook. Через GTM можно размещать на сайте счетчики, пиксели и другие скрипты.
В GTM код занимает меньше места, а внедрять его можно без помощи разработчика. Один раз устанавливаете фрагмент кода (он называется контейнер) — а потом управляете всем сами через веб-интерфейс сервиса.
Для тех, кто хочет узнать о Google Tag Manager подробнее, мы подготовили простое объяснение. Каждый тег внутри системы — это какое-то действие: например, передача данных системе аналитики. Чтобы решить, когда нужно использовать тег, GTM использует макросы. По умолчанию их три:
- URL-макрос. Значение — конкретная ссылка.
- HTTP Referrer-макрос. Значение — предыдущая страница, посещенная пользователем.
- Event-макрос. Значение — событие на странице.
Также можно использовать пользовательские макросы. Для стандартных задач маркетинга и аналитики хватает основных: например, event-макрос можно использовать для отслеживания заполнения формы заказа на странице, а HTTP Referrer — для отслеживания воронки продаж на сайте.
Диспетчер тегов GTM — для чего нужен
- Отслеживать переходы по внешним ссылкам: знать, когда и сколько раз пользователи взаимодействовали с анкорами.
- Смотреть показатель отказов на сайте: по всему ресурсу в целом или его отдельным страницам.
- Собирать данные о пользователях, пришедших на сайт с рекламы в Facebook или Google Ads.
- Отслеживать конверсии по разным целям: отправке формы, оформлении заказа, запроса обратной связи, подписки на рассылку и так далее.
- Смотреть, сколько кликов было сделано по кнопкам соцсетей на каждой из страниц.
- Проводить A/B тестирование при интеграции со сторонними сервисами.
И многое-многое другое. В диспетчере тегов можно сделать все то, что и в самых продвинутых сервисах аналитики — просто в удобном интерфейсе и с легкой интеграцией без вмешательства в исходный код сайта. Вместо добавления множества скриптов, которые могут конфликтовать друг с другом, вы используете один фрагмент кода.
Читайте также, как настроить Google Ads.
Как установить Google Tag Manager на сайт
Установка Google Tag Manager не отнимает много времени — с ней тоже можно справиться без разработчика. Для загрузки системы на сайт зайдите в GTM и авторизуйтесь там с аккаунта Google. Дальше вам предложат настроить учетную запись: дать ей имя и выбрать страну.
Следующий шаг — настройка контейнера. Контейнером называют код, который активирует использование GTM на сайте, в приложении или на отдельных страницах. Один контейнер — один ресурс, поэтому если планируете использовать несколько сайтов, давайте им понятное название.
Соглашаетесь с пользовательским соглашением — и вас перебрасывает в личный кабинет, а на экране появляется всплывающее окно с кодом контейнера. Чтобы система заработала, нужно установить его на каждую страницу сайта.
Обратите внимание: нужно сохранять два фрагмента кода. Первый — на каждой странице в блоке <head>, желательно как можно выше. Второй — сразу после тега <body>. Если сайт на CMS, то обычно код вставляют в файл header.php или другой.
Если закрыли всплывающее окно, ничего страшного. Код контейнера можно посмотреть и скопировать в любой момент. Для этого нажмите на ваш уникальный идентификатор на верхней панели.
Если ваш сайт под управлением WordPress, можно не добавлять код на страницы вручную. Есть специальный плагин — Google Tag Manager for WordPress. Устанавливаете в админке сайта, добавляете туда скопированный код контейнера — и плагин сам разносит его по всем страницам ресурса.
Настройка Google Tag Manager
Специфическая настройка GTM не нужна. Сразу после установки контейнера на сайт (добавления кода на все страницы) можно приступать к работе. Для этого есть три основные вкладки: теги, триггеры и переменные. Разбираемся подробнее, как в них работать и что можно сделать с помощью инструментов.
Как создать тег в Google Tag Manager
Основное, что нужно сделать в GTM — добавить системы аналитики «Яндекс.Метрика» и Google Analytics. Делают это с помощью тегов. На главной странице контейнера или во вкладке «Теги» нажмите на «Создать».
Откроется меню с конфигурацией и триггерами. Пока что нам нужна только конфигурация, выбираем ее. Система предложит стандартные наборы тегов. Если нужно добавить систему аналитики, выбираем «Google Аналитика: Universal Analytics».
Дальше загружается окно с параметрами тега. В строке «Тип установки» ничего не меняйте — там должен стоять «Просмотр страницы». В строке «Настройки Google Аналитики выберите «New Variable».
Дальше вам нужно указать в GTM, в какую систему отправлять полученные данные. Скопируйте идентификатор Google в личном кабинете Analytics и укажите его в диспетчере тегов.
Это действие создаст переменную. О том, как они работают и зачем нужны, поговорим чуть позже.
Когда данные обновятся и переменная настроек появится в конфигураторе, обратите внимание на поле «Срабатывание». Выберите там «Все страницы» → «Просмотр страницы».
После сохранения конфигурации тега нажмите в правом верхнем углу на «Сохранить» → «Отправить» → «Опубликовать». Готово, тег начал работать и передает все данные в систему аналитики. Проверить, все ли верно, можно двумя способами:
- предварительным просмотром;
- тестированием «в бою».
В GTM есть функция предварительного просмотра: когда нажимаете на нее, в новом окне открывается ваш сайт. Внизу расположены теги: если там есть созданный вами, все хорошо.
Тестирование еще проще: идете на свой сайт, путешествуете по страницам — и смотрите, отобразились ли данные в Google Analytics. Если да, тег работает корректно.
Как настроить триггеры GTM
Триггеры — события, которые вызывают использование тега. В случае с настройкой систем аналитики триггером выступает просмотр страницы: система учитывает пользователя, как только он открывает любую страницу на сайте. По схожему принципу работают и другие триггеры в Google Tag Manager.
Например, нам нужно отследить, сколько человек выполнили цель: заполнили форму заказа на сайте. Для этого сделаем триггер, который бы вызывал тег при достижении этого события. Идем во вкладку «Триггеры», нажимаем на «Новый».
Дальше выбираем условие срабатывания. Можно сделать это двумя способами: указать «Все элементы» или «Отправка формы». В первом случае придется прописать содержимое URL страницы, на которой нужно отслеживать форму, и текст кнопки для отправки. Во втором можно настроить триггер так, чтобы он вызывал тег при заполнении любых форм. Или тоже выбрать конкретную.
Сохраняем триггер. Это еще не все — сам по себе он не работает, его используют только в связке с тегом. Идем в меню создания тегов, добавляем новый: выбираем Google Analytics или используем пользовательский HTML для «Метрики». Выбираем тип отслеживания «Событие», указываем идентификатор системы аналитики, а в поле «Срабатывание» выбираем созданный триггер. Также можно создать подобный тег через формы AJAX, но это сложнее.
Таким образом можно задать любые триггеры — в наборе событий GTM есть глубина прокрутки, просмотры страниц, специальные события, загрузки окон и множество других действий. Их можно объединять в группы, чтобы тег срабатывал, только если посетитель сайта выполнит одновременно все необходимые условия.
Каждому триггеру дополнительно можно задавать фильтры. В нашем примере — указывать страницы, на которых пользователь должен заполнить форму, или значения в ней.
Что такое переменные GTM и как их использовать
Переменные — функции, вызываемые внутри тегов, триггеров и другой переменной: значения, которые получает система от пользователя или его действий на сайте. Обычно их используют те, кто хорошо разбирается в HTML, DOM и JavaScript. Пользователю без подобных знаний будет сложно, а в случае неграмотной настройки может пострадать весь сайт. Поэтому если нужно реализовать что-то непростое, лучше обратиться к специалисту по Google Tag Manager.
В целом переменные можно назвать дополнительным условием, которое можно задавать в тегах и триггерах. Переменными могут практически любые данные, которые нужны для построения логики работы тегов:
- источник перехода — ссылка или фрагмент ссылки, чтобы отслеживать только тех, кто пришел с нужного сайта или раздела на нем;
- ID формы, чтобы настраивать аналитику по конкретным формам;
- порог глубины прокрутки, чтобы использовать тег для самых заинтересованных пользователей и так далее.
Стандартно в GTM представлены встроенные переменные. По умолчанию включены семь: URL страницы, имя хоста и другие. Можно подключать свои переменные — идентификаторы контейнеров, элементы DOM, видимость элементов и многие другие.
Использовать стандартные переменные придется, потому что именно через них настраиваются интеграции с системами аналитики. В нашем примере мы создавали тег для передачи данных в Google Analytics именно с помощью переменной.
Применяют продвинутые переменные в GTM обычно те, у кого настроена многоуровневая аналитика и подключены множество сервисов ремаркетинга. Для стандартных задач они почти не нужны и могут только сильнее запутать неопытного пользователя.
Как использовать пиксель от Фейсбука в GTM
Пиксель в Facebook — код, который устанавливается на сайт и отслеживает на нем действия пользователей, пришедших с рекламы в соцсети. В том числе собирает данные для обучения алгоритмов в Фейсбуке и дальнейшего ретаргетинга.
Использовать пиксель от Facebook в диспетчере тегов можно так же, как другие: установить на сайт в контейнере в «облегченной» версии и передавать данные рекламной сети, а также собирать статистику по пользователям. Есть два варианта установки пикселя: вручную или через автоматическую интеграцию.
Установка вручную займет 10-20 минут. Вот подробная инструкция от Facebook. Если коротко, то нужно:
- Добавить событие в Facebook Events Manager и выбрать установку вручную с другого сайта.
- Добавить пользовательский тег HTML в GTM и вставить код с Facebook Events Manager в контейнер.
- Выбрать активацию тега один раз на страницу в расширенных настройках тегов.
- Активировать тег на всех страницах и опубликовать его на сайте.
Дальше можно будет создавать теги для определенных действий: просто добавляете к ним свои переменные и фрагмент кода, связанного с нужным событием.
Автоматическая установка проще. Прямо в Facebook Ads после создания пикселя выбираете использование партнерской интеграции и ищете в списке Google Tag Manager. Выбираете тот аккаунт Google, на котором создан GTM, разрешаете доступ и выбираете профиль, на котором работаете с сайтом. Завершаете настройку — и тег появляется в списке.
Зачем нужен API Key
API — это код, благодаря которому программы могут обмениваться между собой информацией. API Key — это ключ, благодаря которому можно работать с кодами GTM. Он нужен, чтобы можно было реализовывать нестандартный функционал или интегрировать GTM с системами, которых нет в стандартном списке. Например, через API можно передавать данные о часовых поясах и геолокации пользователей на сайте в системы аналитики либо отслеживать, на какое видео на YouTube перешли посетители ресурса.
API пользуются только разработчики. Чтобы работать с кодом, нужны знания Python или JavaScript.
Читайте также, как настроить шаблон отслеживания.
Плюсы и минусы Google Tag Manager
Плюсы
- Удобство интеграции. Не нужно привлекать сторонних разработчиков, все можно сделать самостоятельно в понятном интерфейсе и без вмешательства в код.
- Встроенные шаблоны. Внутри GTM уже есть шаблоны для интеграций с популярными сервисами аналитики и другими системами для учета конверсий, ремаркетинга, ретаргетинга. А если готового решения нет, есть возможность использовать пользовательский HTML и интегрировать таким образом диспетчер тегов практически с любым сервисом.
- Контроль версий. Сервис сам сохраняет все версии контейнера, поэтому если что-то идет не так, можно восстановить предыдущее работоспособное сохранение. Удобно для тех, кто работает с инструментом впервые и может совершить ошибку.
- Асинхронная загрузка тегов. Теги в контейнере загружаются не все разом, а только те, которые нужны. Это исключает ошибки и повышает скорость загрузки страницы для пользователя.
- Ускоренная загрузка страниц. Это обусловлено не только асинхронной загрузкой тегов, но и в целом принципом работы GTM. Вместо десятков кодов разных систем вы устанавливаете на сайт один контейнер — он загружается намного быстрее, а скрипты не конфликтуют между собой.
- Безопасность. Чтобы работать со стандартными системами аналитики, скорее всего, придется давать доступ к сайту разработчикам для реализации сложных функций. Здесь можно сделать все самому, поэтому риски намного меньше.
- Многопользовательская работа. Можно давать доступ к GTM трем людям одновременно. Удобно, если ведется командная работа и нужна помощь специалистов. Они не будут вмешиваться в работу сайта и смогут контролировать только контейнер.
- Режим предпросмотра. Внутри сервиса можно посмотреть, как будут работать изменения на сайте. Можно заметить ошибку и исправить ее еще до момента публикации.
Минусы
- Нужны минимальные навыки. Без знаний кода с диспетчером тегов можно работать, но придется разбираться в каждом теге, в каждом триггере и каждой переменной с нуля. Базовые вещи типа интеграции со счетчиками можно выполнить за пару минут, а на остальное потратится куда больше времени.
- Некоторые сервисы работают некорректно. Например, если «Метрика» установлена через диспетчер тегов, то в Jivosite не отображаются данные по цели взаимодействия с онлайн-консультантом.
- Объединение тегов. Все теги хранятся в одном контейнере. Это удобно, но в случае повреждения самого контейнера произойдет сбой в работе всех тегов. Соответственно, придется перенастраивать все для каждого сервиса аналитики или другого сервиса, исполняющего скрипт на вашем сайте.
Не проще ли использовать «Яндекс.Метрику»
Все зависит от того, какой у вас сайт, какие задачи вы на нем решаете и как дальше будете развивать проект. Большинство небольших компаний, развивающихся в онлайне, не знают про Google Tag Manager и успешно используют только стандартные системы аналитики. Это оправдано, если:
- на сайте установлены скрипты только 2-3 систем аналитики;
- не нужно отслеживать сложные составные цели, интегрировать ресурс с «Директом» или другими системами.
Также использование GTM неоправдано для информационных ресурсов, получающих весь трафик из органической выдачи.
В случае, если используете множество систем автоматизации маркетинга и сервисов аналитики, если нужно отслеживать множество целей и событий одновременно, а скорость загрузки страдает из-за обилия кода, использование GTM необходимо. Без него придется каждый раз при необходимости вручную править код сайта, а это чревато ошибками.
Использовать Google Tag Manager или нет, решайте сами. Если ничего не понимаете в коде, попробуйте добиться нужного эффекта стандартными инструментами аналитики или приготовьтесь оплачивать труд разработчика, который реализует все нужные теги. А если у вас есть базовые навыки работы с кодом, попробуйте начать с малого: когда потестируете контейнер, поймете, стоит ли использовать его дальше.
Чтобы устанавливать коды сторонних систем на сайт в одном контейнере. Обычно GTM используют для установки систем аналитики, ремаркетинга и ретаргетинга. С его помощью можно отслеживать конверсии, показатели отказов и любые другие данные.
Настроить теги. Это фрагменты, находящиеся в контейнере и отвечающие за определенные действия: например, передачу данных системе аналитики. В GTM есть шаблоны для тегов, поэтому стандартные сервисы легко подключаются.
Событиями в диспетчере тегов от Google называют действия, которые вызывают срабатывание тега. Например, при событии «Заполнение формы» тег, который собирает данные о ней, активируется, только если пользователь начинает заполнять ее.
Цели — действия, которые должен выполнить пользователь. В диспетчере тегов для настройки их отслеживания нужно выбирать «События»: переход на определенную страницу, заполнение формы или что-то еще.
User ID — параметр, по которому можно настроить отслеживание разных устройств пользователя и связывать их в одно. С помощью функции системы аналитики понимают, что переход с ПК, смартфона и планшета совершил один и тот же человек, и засчитывают одного уникального посетителя, а не трех. Параметр можно отслеживать в GTM, но смысла в этом нет, если на сайте нет функции авторизации через системы идентификации.
Cookiebot — провайдер, который проверяет, правильно ли на сайте работают cookie-файлы и соответствуют ли они общепринятым требованиям. В Google Tag Manager есть готовый шаблон для интеграции с системой Cookiebot, что упрощает настройку.
Как и в других рекламных сетях — отслеживать поведение пользователей в рекламной сети или пришедших с нее с помощью пикселя Facebook. Добавляете его в новый тег — и система аналитики начинает работать.
Буквально все, что могут отслеживать сторонние системы аналитики типа «Яндекс.Метрики». Это поведение пользователей на сайте, переходы по страницам, нажатия кнопок, источники переходов, клики по внешним ссылкам, время, проведенное на странице и многое другое.
В какой-то степени да, потому что использование одного контейнера вместо множества фрагментов кода ускоряет загрузку страницы. Часть пользователей, не привыкших долго ждать, не уходит с сайта. А в целом показатель отказов не зависит от систем аналитики: они лишь предоставляют данные, а что с ними делать — решаете вы.
При создании тега выбрать шаблон пользовательского кода HTML. В открывшееся окно можно будет вставить любой код, взятый из стороннего сервиса для интеграции с GTM или другими системами.
Двумя способами: вручную и через автоматическую интеграцию. Вручную нужно будет добавить переменную с идентификатором пикселя «ВКонтакте», а при создании нового тега выбрать ее. Автоматически — выберите в рекламной сети «ВКонтакте» интеграцию с партнером и подтвердите подключение к GTM.
