Для чего нужен гугл тег менеджер
Обзор Google Tag Manager: зачем он нужен и как начать работать
Про старт работы с Google Tag Manager у нас вышел актуальный материал.
В этом материале разберем, как быстро и просто настроить систему отслеживания с помощью Google Tag Manager, дадим инструкции для установки и покажем пример из проекта.
Что такое Google Tag Manager (GTM)
GTM — бесплатный инструмент, который сокращает время на подключение веб-аналитики Яндекс.Метрики и Google Analytics. Решает задачи по отслеживанию целей на сайте или мобильном приложении. Особенность сервиса — простота работы. Чтобы настроить сбор данных, нужно установить один скрипт в код сайта.
10 преимуществ GTM
Краткая инструкция по базовой настройке
Минимальный набор скриптов для сайта — это веб-аналитика Яндекс.Метрики и Google Analytics, их и будем настраивать.
1 шаг. Вход в аккаунт.
Чтобы войти в аккаунт на сайте GTM, нужно зарегистрироваться в Google. Если вы пользуетесь сервисами Google, то введите адрес почты и пароль.
2 шаг. Создание аккаунта.
Откройте вкладку «Администрирование» и напишите название аккаунта.
Заполните данные о сайте и системах, на которых будет использоваться контейнер:
Отлично, вы создали аккаунт и получили код контейнера, который и нужно установить на сайт.
Обратите внимание: размещать код нужно после открывающего тега.
3 шаг. Заполнить контейнер.
Откройте вкладку «Администрирование» и напишите название аккаунта.
После регистрации аккаунта и размещения кода на сайте, можно наполнить контейнер скриптами: разместить коды Яндекс.Метрики и Google Analytics. Для этого используют теги (поэтому у сервиса такое название — «Диспетчер тегов»). Создание и управление тегами является основой инструмента.
Чтобы создать теги, перейдите в раздел «Контейнер» и выберите в меню пункт «Теги».
Если нужно создать тег Google Analytics, то нажмите на кнопку «Создать» и заполните данные по новому тегу. Сначала дайте имя тегу (1), которое будет понятным для вас. Затем выберите продукт, в нашем случае это Google Analytics (2).
После у тега сохраняется название (в примере «Тест GA») и возможность настроить выбранный продукт.
В пункте 3 («Настройка тега») введите номер идентификатора (он же номер счетчика) из Google Analytics:
На следующем шаге задайте условия активации и завершите создание тега:
Отлично, вы создали первый тег. Теперь сделаем то же для Яндекс.Метрики. Процесс немного отличается. На первом этапе, при выборе продукта, в автоматических шаблонах Яндекс.Метрики нет, выберите «Пользовательский тег»:
Зайдите в Яндекс.Метрику и в меню слева выберите раздел «Настройки». Затем перейдите на вкладку «Код счётчика» и полностью скопируйте код.
Вернитесь в GTM и вставьте скопированный код:
Условия активации аккаунта такие же, как в Google Analytics.
Важно не забывать, что после изменений в настройках GTM необходимо опубликовать их на сайте:
Пример из практики
После изучения GTM и понимания его работы можно решать более сложные задачи. Рассмотрим пример из проекта для нашего клиента — официального дилера Hyundai в Санкт-Петербурге. Мы вели рекламную кампанию с основой на стратегию, которая предполагала смену посадочных страниц 2-4 раза в месяц. В качестве KPI использовали обращения в автосалон, в том числе интернет-заявки.
Перед нами стояла задача: оптимизировать настройку аналитики, учитывая регулярную смену посадочных страниц, отслеживать не просто клик по кнопке, а собирать данные об отправленной информации через форму заявки.
Основная сложность: когда пользователь отправлял заявку, система не переводила его на страницу, которая подтверждает действие: «Спасибо за обращение. ». Если человек перешёл на такую страницу, то он совершил целевое действие. Это позволяет измерять эффективность. Стандартная настройка целей не позволяла решить задачу, поэтому мы установили GTM.
С помощью специальной конструкции dataLayer.push() с обязательным параметром «event» мы добавили определенный фрагмент кода в функцию, которая отвечает за выполнение нужного действия на сайте. Так нам удалось собирать данные по форме.
Когда мы создавали новые страницы, то сразу ставили код GTM, чтобы не настраивать счётчики для каждой посадочной. Так мы настроили сбор данных аналитики и использовали один алгоритм на нескольких однотипных страницах.
Google Tag Manager: что это такое и как его использовать
Кому полезен GTM. Установка Google Analytics и Яндекс.Метрики через GTM, отслеживание событий.
Маркетологи используют разные вспомогательные сервисы: системы аналитики, сервисы A/B тестирования, ретаргетинговые, рекламные и коллтрекинговые платформы, виджеты, онлайн-мессенджеры и многие другие. Для их работы необходимо внедрять коды (теги) на сайт, что вызывает ряд проблем.
Во-первых, каждый раз, когда нужно добавить новый сервис или внести изменения в функционал, приходится ставить задачу программисту и ждать результата несколько дней (а иногда и недель).
Во-вторых, если сервисов много, скорость загрузки страниц замедляется, что, как известно, плохо влияет на SEO.
В-третьих, неудобно работать с массой постороннего кода, из-за чего возникают лишние трудозатраты и повышается вероятность ошибки.
В 2012 году Google запустил Диспетчер тегов (Tag Manager), созданный специально для маркетологов. Он позволяет из одного интерфейса управлять всеми тегами различных сервисов. На сайт интегрируется только один код, а остальные коды маркетолог самостоятельно добавляет в Диспетчер без участия IT-специалиста.
Подобные платформы существовали и до 2012 года, но работали только на платной основе. Революционность Google Tag Manager в его полной бесплатности. Изначально в него были встроены только теги сервисов Google, но позже появилась поддержка сторонних тегов. Также есть возможность добавлять произвольные теги.
Оцените, нужен ли вам Google Tag Manager
Несмотря на всю полезность Диспетчера, его использование не всегда имеет смысл. Вот по крайней мере два случая, когда GTM не нужен:
Если же сервисов много, код часто дорабатывается, постоянно требуется дополнять и изменять его, то Диспетчер тегов должен быть в арсенале инструментов маркетолога.
Как начать работу
Первый этап — регистрация. Для этого перейдите на сайт tagmanager.google.com и заведите аккаунт (или авторизуйтесь с помощью уже существующего аккаунта в Google). Задайте наименование аккаунта и контейнера и укажите место использования контейнера (вебсайт, приложение, AMP-страницы):
Если вы не вставите код сразу после создания аккаунта, то сможете сделать это позже.
Для правильной работы сервиса на сайте рекомендуется размещать только код Диспетчера тегов. Если у вас установлена Яндекс.Метрика, Google Analytics и прочие системы, следует все теги перенести с сайта в созданный контейнер. При этом все данные, собранные ранее, сохранятся. Возможна короткая (обычно не более минуты) «просадка» в сборе статистики на время переноса тега, но это не критично.
Теперь можно создавать теги, но вначале советуем разобраться со структурой Диспетчера.
Структура Диспетчера тегов
Интерфейс Google Tag Manager довольно простой. Меню рабочей области содержит такие вкладки:
Обзор. Это главная страница. Здесь можно создать новый тег, увидеть историю изменений и неопубликованные контейнеры.
Теги. Это фрагменты кода, которые выполняются (активируются) на вебсайте. Теги имеют различное предназначение, но в Tag Manager они преимущественно применяются для передачи данных. Так, теги Google Analytics и отслеживания конверсий Google Ads передают данные о действиях посетителей вебсайта.
В Диспетчере есть готовая система шаблонов тегов. Она существенно упрощает работу с рядом поддерживаемых сервисов: AdRoll, Google Ads, Clicky, Crazy Egg, Criteo, DoubleClick, Google Оптимизатор, Hotjar, Twitter и мн. др. Также можно задавать пользовательские HTML-теги.
Триггеры. Это действия посетителей сайта, в ответ на которые активируются теги. Так, триггер «Глубина прокрутки» при значении 50 % запускает тег ремаркетинга, если пользователь просмотрит более половины страницы.
Как же Tag Manager узнает, что условие, указанное в триггере, выполнилось, и пора активировать тег? Для этого нужно, чтобы программист настроил так называемый объект уровня данных.
Уровень данных — это объект, содержащий все данные, которые вы планируете передавать в менеджер тегов, где эти значения фиксируются благодаря переменным.
Чтобы менеджер тегов получал значение переменной, нужно, кроме того, передать событие с помощью команды push. Подробная информация о добавлении переменных приведена в руководстве Google для разработчиков.
Нет желания вдаваться в детали и заниматься рутиной? Запустите SEO-оптимизацию сайта на полном автомате с помощью модуля SEO системы PromoPult. Специалисты настроят аналитику, сделают сайт удобней для посетителей, повысят его привлекательность для поисковиков.
Примеры использования Менеджера тегов
1. Подключение Google Analytics
Вначале нажмите «Новый тег» / «Конфигурация тега». В появляющемся списке активируйте «Universal Analytics».
В пункте «Настройки Google Analytics» нажмите «Новая переменная…»:
Задайте ваш идентификатор отслеживания. Для этого перейдите в Google Analytics в раздел «Администратор» / «Код отслеживания». Код имеет формат UA-хххххххх-хх — просто скопируйте его:
Вставьте код в соответствующее поле менеджера тегов:
Нажмите «Сохранить», укажите имя переменной и еще раз сохраните. Все, вы создали первый тег.
Теперь нужно задать правило его активации, то есть триггер. Кликните по области «Триггер» под областью «Конфигурация тега», выберите в списке триггер «Просмотр страницы (All pages)» и кликните «Сохранить»:
Это не все. Созданный тег заработает только после его публикации. Для этого кликните по кнопке «Отправить»:
Укажите название версии и краткое описание (чтобы вы понимали, в чем суть внесенных изменений) и нажмите «Опубликовать»:
В разделе «Версии» появится описание новой версии тега и переменных:
Теперь система аналитики начнет собирать данные (при условии, что код Диспетчера тегов интегрирован на все страницы сайта).
2. Подключение Яндекс.Метрики
Яндекс.Метрика не подключена к Диспетчеру тегов, поэтому процедура добавления кода будет немного отличаться. На этапе выбора типа тега кликните на «Пользовательский HTML»:
Теперь перейдите в сервис Яндекс.Метрика в раздел «Настройка» / «Код счетчика» и скопируйте код в поле внизу:
Вставьте этот код в поле в менеджере тегов, добавьте триггер (как вы делали при настройке Google Analytics) и нажмите «Сохранить»:
Остается опубликовать тег, чтобы он начал передавать данные. Аналогично вы можете добавить любой тег, шаблона которого нет в базе Tag Manager.
3. Отслеживание событий
В Google Analytics есть отчет в разделе «Поведение» / «События»:
По умолчанию он пустой. Для сбора данных необходимо настроить события с помощью Tag Manager.
События могут быть нескольких типов:
Рассмотрим настройку события на примере клика по элементу страницы — кнопке «Подробнее». Для этого вначале необходимо узнать класс элемента. Для этого откройте страницу, выделите элемент и кликните в контекстном меню в браузере «Просмотреть код» и найдите название класса (в нашем примере — more-link):
Выберите в Диспетчере раздел «Переменные», нажмите «Настроить» и активируйте переменную «Click Classes»:
Создайте новый триггер (тип — «Все элементы») с условием активации «Некоторые клики». В выпадающем списке выберите переменную «Click Classes» и укажите название класса элемента. Если вы хотите, чтобы событие срабатывало только при клике по элементу на конкретной странице, то нажмите +, выберите переменную Page URL и укажите полный адрес страницы (при условии «равно») или часть страницы (при условии «содержит»):
Нажмите «Сохранить» и назовите триггер «GA — триггер — клик по кнопке Подробнее».
Теперь создайте новый тег (тип — «Universal Analytics»), укажите тип отслеживания — «Событие», Категория — «Кнопка», Действие — «Клик», Ярлык — <
Добавьте к этому тегу триггер «GA — триггер — клик по кнопке Подробнее».
Остается проверить, чтобы не было ошибок («Предварительный просмотр») и опубликовать триггер. После этого в отчет «События» в Google Analytics начнут поступать данные.
Другие возможности Google Tag Manager
Кроме приведенных примеров использования GTM, с его помощью можно:
Подводим итоги
Google Tag Manager — это важный инструмент для онлайн-бизнеса, который делает работу с аналитикой намного проще и безопаснее. Он позволяет быстро управлять тегами отслеживания, оптимизации, ремаркетинга и т. п. Вы можете добавлять и изменять коды Google Ads, Google Analytics и прочих сервисов без необходимости изменения исходного кода сайта и привлечения программистов.
Если вы еще не готовы сами внедрить аналитику на сайт, воспользуйтесь услугой «Персональный менеджер» от PromoPult. Специалист поможет установить и настроить счетчики веб-аналитики, настроить цели и события и прочие параметры.
Google Tag Manager: что это, как его настроить и какие задачи можно решить при помощи тегов
Что такое Google Tag Manager
Сервис представляет собой диспетчер тегов Google, с помощью которых удобно управлять JavaScript и HTML-тегами (фрагментами кода) без помощи разработчиков. Его подключение позволит меньше времени тратить на работу с кодами.
Можно обойтись без сервиса, если рекламную кампанию проводят на одной-двух площадках и все коды отрабатывают вручную. Однако если количество рабочих площадок больше, Tag Manager может оптимизировать процесс работы и сократить время на обработку данных.
Функционал подключит новые коды других служб через соответствующие инструменты. Диспетчер работает с кодами сервисов Google и сторонних сайтов. Например, с Яндекс.Метрикой, Google Analytics, Google Maps, Liveinternet.
Для чего нужен Google Tag Manager
Инструмент помогает составить полный отчет по рекламной кампании с ответами на вопросы:
Аналитика поможет скорректировать состояние текущих проектов, продемонстрировать преимущества и недостатки выбранной стратегии.
Чтобы выяснить пользу рекламных кампаний, подключите маркетинговые продукты Calltouch – систему сквозной аналитики, коллтрекинга и управления рекламой. С интеграцией всех расходов на маркетинг в одном месте легче контролировать все ключевые показатели.
Термины и структура GTM
Контейнер. Это оболочка со всеми тегами сайта или приложения. Контейнер – основной код, который добавляют в GTM, чтобы запустить другие теги сервиса. На каждой площадке есть свой контейнер с информацией.
Тег. Это фрагмент кода JS, к которому подсоединяют триггер. Задачи тегов – отслеживать входящий трафик и поведение пользователей на сайте, анализировать эффективность рекламной стратегии, отвечать за ремаркетинг и настройку таргетинга.
Триггер.
Это определенное условие, связанное с работой тега. Тег может реализовывать свою задачу или блокироваться. В основе триггера лежит действие пользователя, называемое событием: клик по объявлению, переход по ссылке или загрузка страницы. Для каждого триггера можно настроить специальные фильтры, например, прописать адрес страницы, где тег должен работать.
Переменная. Параметр, значение которого передается в процессе работы. Так, если необходимо отслеживать посещение определенной страницы, можно настроить триггер «Просмотр страницы». Он будет работать, если переменная Page URL примет значение страницы. В тегах переменные используют для хранения и передачи данных о действиях пользователей на сайте, транзакциях, товарах.
Сервис предоставляет готовые шаблоны и дает возможность создавать свои переменные или теги.
Макросы
В диспетчере есть встроенные макросы, но также пользователи могут создавать свои. У шаблонных значений несколько разновидностей: URL-макрос, HTTP Referrer-макрос, Event-макрос и пользовательский.
URL-макрос
Этот вид отличается тем, что URL может быть и именем, и значением. При его работе страницы отображают коды метрик и Google Ads. Макрос оптимизирует их действие и упрощает работу с данными.
HTTP Referrer-макрос
Макрос – имя, значение – страница, откуда пришел посетитель. Он помогает задавать значение переменной GA, которую настраивает пользователь.
Event-макрос
События применяют для отслеживания действий посетителей на сайте в момент полной загрузки страницы. Когда пользователь открывает и заполняет форму регистрации на сайте, можно создать соответствующее событие. Если при этом есть правила, которые зависят от события, активируется специальный тег. Вы можете настроить такое событие после заполнения формы заказа пользователем.
Пользовательские макросы
Преимущества и недостатки
Настройка GTM
Чтобы использовать диспетчер тегов, добавьте на сайт контейнер, используйте переменные, настройте триггеры и добавьте теги.
Как добавить на сайт контейнер диспетчера тегов
Для работы с GTM необходим аккаунт Google. Если аккаунт уже есть, выберите раздел Sign in to Tag Manager и создайте учетную запись для диспетчера тегов. Введите название нового аккаунта, контейнера и укажите тип ресурса: сайт или мобильное приложение на базе IOS/Android.
После регистрации вы получите специальный код, который нужно скопировать и разместить на страницах своего сайта.
Также контейнер можно добавить в существующий аккаунт. Для этого зайдите в сервис, затем в «Аккаунты» и выберете название профиля. Затем в «Создании контейнера» введите нужный ресурс.
Как использовать переменные Google Tag Manager
Теги начинают работать, если триггер совпадает по значению с используемой переменной. Чтобы управлять ее настройками, выберете соответствующий раздел из меню «Переменные».
В доступе есть шаблонные переменные и возможность создавать собственные.
Как только переменная начинает активность, она появляется на рабочей панели и связывается с соответствующим триггером.
Как использовать триггеры Google Tag Manager
Триггер – условие активации тега. Для настройки триггера необходимо перейти в меню и выбрать «Создать» в специальном разделе.
GTM по умолчанию включает следующие триггеры:
Триггер активируют с подбором переменной, которая будет соответствовать его значению.
Как настроить и проверить работоспособность тегов в GTM
Google Analytics можно интегрировать со сквозной аналитикой Calltouch, чтобы передавать информацию о звонках клиентов и заявках с сайта. Система собирает данные и из других сервисов аналитики (Яндекс.Директ или myTarget), чтобы вы могли составить прозрачные и подробные отчеты о работе компании.
Сквозная аналитика
Отслеживать клики по кнопкам соцсетей
Установите виджеты социальных сетей (Вконтакте, Facebook, Instagram) вашей компании на сайт. Вы сможете отслеживать конверсию по лайкам и кнопкам «Подписаться».
Для этого нужно создать триггер и выбрать тип «Все элементы».
Далее выбрать в условиях активации триггера «Некоторые клики». Назначьте встроенную переменную Click Classes, укажите значение атрибута кнопки соцсети, чтобы подписаться. Оно есть в коде. Сохраните изменения.
Создайте тег с данными кнопки. Для этого зайдите в «Теги», нажмите «Триггеры», затем – по вашему новому триггеру по кнопке.
В «Конфигурации тега» выберите тип Universal Analytics. Добавьте данные, сохраните изменения, проверьте кнопку в «Предварительном просмотре».
Вставьте код разметки в окно. Выберите триггер активации All Pages.
Отслеживать переходы по внешним ссылкам
Чтобы смотреть источники внешнего трафика, создайте триггер, выберите тип «Просмотр страницы».
Активируйте переменную Referrer, а в третьем окне пропишите URL сайта, переходы с которого хотите отследить. Создайте тег «Событие» к триггеру и сохраните изменения.
Если вы хотите отслеживать посещения с определенной страницы сайта, введите URL этой страницы в поле триггера.
Просматривать показатель отказов
Отказ – просмотр одной страницы сайта пользователем. Если ваш сайт – лендинг, все посещения по статистике будут считаться отказными. Чтобы это исправить, установите триггер «Таймер» в GTM.
В поле «Интервал» укажите количество миллисекунд между новыми событиями. Например, 30 000 миллисекунд. В «Ограничения» впишите единицу, чтобы таймер начинал отсчет сначала для каждого посетителя. В «Переменных» выберите Page URL и введите адрес страницы.
Создайте тег для Universal Analytics, сохраните настройки. Теперь таймер будет фиксировать посещения дольше 30 секунд, а остальные принимать за отказные.
Как установить системы аналитики РС через Google Tag Manager
После необходимо проверить, как функционирует диспетчер на сайте. Для этого подойдет режим предварительного просмотра или специальное расширение Google Tag Assistant. На сайте должна подгрузиться iframe-форма. Когда сервис начнет работу, можно подключать аналитические счетчики.
Установка Google Analytics
Корректность работы можно оценить в режиме предпросмотра или с помощью Google Analytics, если выбрать «Отчет в реальном времени».
Установка Яндекс.Метрики
Для подключения сервиса Яндекс.Метрики нужно:
Установка Facebook Pixel
Добавить пиксель Facebook можно автоматически с помощью специальной интеграции или самостоятельно. При ручной установке нужно проделать то же, что и с сервисом Яндекс: создать тег, выбрать «Пользовательский HTML» и после перенести код.
Для автоматической установки найдите Facebook Pixel в числе партнерских программ Google Tag Manager. Если вы все сделали верно, на рабочей панели появится тег пикселя.
Возможные проблемы при работе с Google Tag Manager
Среди потенциальных проблем можно выделить следующие: