Google Tag Manager: установка и настройка

Статья обновлена 16.01.2023

Название Google Tag Manager — диспетчер тегов Гугл — означает бесплатный инструмент крупнейшего поисковика для работы с тегами. Сервис упрощает настройку отслеживания событий на сайте и помогает устанавливать различные теги без взаимодействия с кодом страницы. То есть позволяет настраивать интеграции с системами веб-аналитики даже тем, кто далек от программирования.

Основы GTM

Базовые понятия

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

Контейнер — виртуальная «емкость» с фрагментами кода, то есть тегами, триггерами и переменными. Вы управляете ими в рабочем пространстве с интуитивно понятным интерфейсом. Есть и другая часть контейнера — техническая, это код JavaScript, который размещается на всех сайтах, где должен работать GTM. 

Тег, tag — фрагмент кода на языке JavaScript. Например, код счетчика Яндекс.Метрика или Google Analytics, пиксель ВКонтакте. Проще говоря, tag — это скрипт, обычно на сайт их ставят несколько: счетчики аналитических систем, код верификации домена и так далее. 

Триггер — условие, при котором тег сработает. Триггеры связаны с событиями, можно задавать дополнительные условия. Пример: клик пользователя по переходу в корзину, условие — текст кнопки «Оформить покупку». Или заполнение формы на странице. Или скроллинг до кнопки определенного раздела. Слово триггер образовано от английского «trigger», то есть «спусковой крючок» или «импульс». По сути это причина, по которой происходят события.

Переменная — объект, который принимает какое-то значение в зависимости от действия на странице. Например, переменная становится текстом или идентификатором кнопки после ее нажатия. 

Гугл Tag Manager упрощает работу с описанными понятиями. Без GTM потребовался бы специалист по разработке: открыть код сайта, найти нужный фрагмент head или body, добавить скрипт. А в случае GTM вы просто один раз копируете фрагмент его кода в код сайта, а затем все нужные пользовательские триггеры событий сможете добавлять, редактировать и удалять в удобном интерфейсе — вообще без кодов. Для этого не требуется специальных знаний. 

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

Какие задачи можно решать в системе

Чем могут помочь решения для управления тегами? Google Tag Manager упрощает работу с тегами, позволяя устанавливать и менять их без редактирования кода. 

Через GTM часто настраивают цели по событиям:

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

Система позволяет решать не только эти задачи, но и в целом помогает:

• внедрить на сайт аналитический сервис GA или ЯМ и собирать статистику о поведении посетителей;
• настраивать пиксели для сбора данных по аудиториям соцсетей;
• запускать тестирование, например, через Google Optimize;
• добавлять системы, для интеграции которых в исходный код страниц нужно разместить фрагмент на JavaScript. 

Про работу с популярными триггерами расскажем в разделе «Настройка событий». 

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

Читать также

Google Tag Manager: что это и зачем

Многие владельцы сайтов используют рекламные сервисы для продвижения и системы веб-аналитики для детальной отчетности. Существуют и другие инструменты, которые позволяют развивать веб-ресурс, …

Еще

Преимущества использования GTM и кейс Airbnb 

Среди преимуществ GTM отметим следующие. 

• Предоставляет простые и надежные решения для управления тегами. Сами теги, в свою очередь, помогают лучше отслеживать уровень конверсии, статистику сайта и пользовательское поведение.
• Легко интегрируется со всеми тегами Гугл и сторонних производителей.
• Сам проверяет ошибки, функции безопасности и скорость загрузки тегов. Такая система проверки гарантирует качественную работу всех тегов.
• Имеет широкие возможности для командной работы. Функции рабочих областей, детальный контроль доступа и поддержка тестирования в нескольких средах позволяют маркетингу и ИТ эффективно работать вместе.
• Возможность изучения всех имеющихся тегов и всех связанных с ними триггеров одновременно. В сервисе легко добавлять теги или выбирать те, которые нужно изменить или удалить.

Рассмотрим пример конкретной пользовательской выгоды.

Airbnb — туристическое сообщество, основанное в 2008 году, которое предлагает услуги аренды недвижимости, экскурсий и общения в путешествиях. Рынок жилья Airbnb предлагает доступ к миллионам мест для проживания в более чем 190 стран мира. В России на данный момент не работает. 

У Airbnb есть продуктовая группа, которая участвует в маркетинговых проектах. Компания использует большое количество тегов веб-сайтов, в том числе уникальный tag для каждой из своих многочисленных РК в Google Ads. А также другие теги для множества поставщиков, которые измеряют различные типы конверсий.

Чтобы удовлетворить потребности поставщиков, многие теги приходилось дублировать несколько раз. В какой-то момент у Airbnb стало 88 различных списков аудиторий и 100 разных тегов. Чтобы предотвратить возникновение несогласований между операционными и маркетинговыми командами, Airbnb потребовалась надежная система управления тегами. Первое решение, которое попробовала компания, оказалось безуспешным. Для реализации тегов требовались значительные технические знания, а также дополнительные инструменты для контроля качества. Это было слишком дорого.

Изучив альтернативные решения, в Airbnb решили перенести свои теги на Google Tag Manager. На решение повлиял ряд факторов. Во-первых, компания уже использовала несколько инструментов Гугл, поэтому переход на шаблоны диспетчера тегов стал достаточно легким. Обширные функции контроля качества и отчетности в GTM упростили локальное тестирование и развертывание тегов. 

Теперь компания может быстро создавать новые теги от поставщиков и отправлять их команде инженеров для внедрения. В прошлом подобное взаимодействие представляло собой непрерывный процесс, на выполнение которого требовалось в среднем два-три дня. 

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

Читать также

Устанавливаем Google Analytics через Google Tag Manager

Google Tag Manager, GTM — своеобразный контейнер, «склад» тегов. С его помощью становится еще удобнее работать с аналитикой веб-ресурсов. В сегодняшнем материале …

Еще

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

Рассмотрев преимущества работы с сервисом, перейдем к практике и расскажем, как добавить Google Tag Manager на собственный сайт. 

1. Перейдите на страницу GTM и создайте аккаунт.

2. Заполните название аккаунта, адрес ресурса, укажите площадку для сбора данных. Это может быть сайт или приложение. В рассматриваемом примере мы выбрали первую опцию и будем взаимодействовать с сайтом. 
3. Примите соглашение о конфиденциальности от Гугл. Система сгенерирует специальный код.

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

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

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

Как мы уже говорили, устанавливать код Гугл Tag Manager понадобится всего один раз. Дальнейшую работу вы сможете выполнять в удобном интерфейсе GTM. 

Читать также

Яндекс.Метрика через Google Tag Manager: инструкция по установке

Google Tag Manager — инструмент, который помогает в оптимизации работы сайта. С его помощью можно упростить вставку кодов на ресурс и почти забыть …

Еще

Настройка Гугл Тег Менеджер: теги, триггеры, переменные

Теги

1. Перейдите в указанный ниже раздел Google Tag Manager с главной страницы аккаунта.

2. В открывшемся окне вы сможете настроить конфигурацию тега, а также триггера, который его вызывает. 
3. Выберите тип тега: можно отслеживать продажи, конверсии в Google Ads, пользовательское поведение в Google Analytics и многое другое. В примере мы выберем tag для Google Analytics 4.
4. Укажите идентификатор аккаунта Google Analytics. Это позволит подключить GA к GTM.

Идентификатор аккаунта — строка числового типа. Получить идентификатор можно в настройках GA.

5. Задайте название тега и выберите приоритеты активации.

Настройка целей через Google Tag Manager завершена, теперь необходимо сохранить тег. 

Читать также

Как выполнить настройку целей в Google Analytics 4

Относительно недавно появилась обновленная платформа — Google Analytics 4. В ней отсутствует часть возможностей, которые были в старой версии, но есть обновлённый функционал. Поэтому пользователи, …

Еще

Триггеры

Чтобы созданный tag активировался, нужна причина, по которой он это сделает. Речь идет о триггерах. 

В качестве триггера, активирующего теги, можно задать:

• события;
• определенную глубину просмотра ресурса;
• прокрутку до конкретного элемента;
• заполнение формы;
• появление элемента на экране;
• загрузку страницы;
• специально созданное событие;
• клики;
• действия пользователей;
• просмотры видео и так далее.

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

Теперь расскажем о создании такого «спускового крючка». 

1. Перейдите в меню «Триггеры». Появится окно, в котором нужно выбрать тип события. Нажмите кнопку «Подробнее».

2. Выберите интересующий вас вариант в зависимости от задачи тега.

В примере мы выбрали клик по ссылке. 

3. Настройте условие активации триггера: задайте тип переменной Click URL и ссылку, переходы по которой вы отслеживаете. 

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

Переменные

1. Чтобы использовать переменные GTM, выберите пункт с таким названием в главном меню системы. 

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

3. Когда вы отметите переменную, она будет доступна в фильтре триггера. 

Читать также

Настройка отслеживания конверсий в Google Ads и зачем это нужно

Любая реклама должна приносить результат. Google Ads не исключение. Во время работы рекламной кампании необходимо обязательно проводить отслеживание конверсий на сайте. Сколько …

Еще

Настройка целей через Google Tag Manager

Рассмотрим, как настроить систему для отслеживания событий, которые чаще всего нужны в веб-маркетинге. 

Клики по кнопкам соцсетей

1. Создайте тег, подходящая форма — «Пользовательский HTML». 

2. Скопируйте код кнопок «Поделиться» для нужного сервиса.

3. Укажите триггер «All Pages», то есть для всех страниц сайта. 
4. Сохраните и опубликуйте контейнер. Триггер можно указать как для всех страниц, так и выборочно.
5. Зайдите в окно предпросмотра и убедитесь, что теги контейнера работают. 

На скрине ниже показан результат успешной процедуры в форме предпросмотра. 

Переходы по внешним ссылкам

1. Создайте новый тег, подходящая форма — Universal Analytics.

2. Настройте конфигурацию тега, как показано на скрине ниже. 

3. Настройте триггер «Только ссылки», пункт «Некоторые ссылки» и событие активации триггера.

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

5. Проверьте в вашем аккаунте Google Analytics вкладку события в режиме реального времени.

6. Если событие зафиксировано, то необходимые данные передаются — созданный тег работает. 

Показатель отказов

Отказ с точки зрения GA — это визит менее 10 секунд с нахождением пользователя только на одной странице и без совершения любых действий. В противном случае посещение уже не будет считаться отказом. Увеличение или уменьшение числа отказов — важная метрика, по которой можно судить о востребованности контента, технических аспектах работы сайта и так далее. 

Благодаря триггерам вы можете отслеживать длительность визитов без привязки к действиям. Если кто-то просматривал страницу более 10 секунд — это уже не отказ. Если вам подходит подобное событие, настройте это следующим образом. 

1. Создайте тег Universal Analytics, тип отслеживания «Событие». 

2. Задайте триггер «Таймер» и задайте требуемый интервал в миллисекундах.

3. Проверьте подключение тега в окне предпросмотра.

Если вы просматривали страницу больше указанного времени, а показатель отказов в GA снизился, то тег работает. 

Читать также

Многоканальные последовательности и ассоциированные конверсии: почему это важно

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

Еще

Электронная коммерция

Google Tag Manager поможет отследить на сайте результаты электронной торговли: конверсии, продажи и прочие факторы интереса пользователя к товарам. Для активации системы отслеживания сначала нужно настроить функцию e-commerce в Гугл Analytics.

1. Нажмите кнопку настроек в левом нижнем углу экрана и перейдите на панель «Администратор».
2. Нажмите на кнопку «Настройка электронной торговли».

3. Установите значение ВКЛ. 

Теперь осталось обратиться к разработчику, чтобы он отправил новые настройки в код отслеживания на сайте. Данные транзакции электронной торговли вы можете отправить сами в аккаунт Google Analytics через Диспетчер тегов Гугл.

1. Создайте tag через главную страницу Google Tag Manager и кнопку «Добавить новый тег».

2. Выберите подходящую версию. 

3. Выберите триггер, который активирует ваш тег. 

Стандартные отчеты по электронной торговле в Google Analytics позволяют анализировать покупательскую активность на сайте или в приложении. Можно увидеть такие переменные: информацию о продукте и название транзакции, среднюю стоимость заказа, коэффициент конверсии электронной торговли, время до покупки и другие данные.

Мы вкратце описали, как настроить Google Tag Manager для распространенных задач. С переменными, которые система позволяет транслировать, можно ознакомиться в официальной инструкции Гугл. 

Читать также

Настройка электронной торговли в Google Analytics

Google Analytics, или GA, может сообщить многое о посещаемости и аудитории вашего сайта. С помощью сервиса можно проверить показатели отказов и коэффициенты …

Еще

Заключение

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