Для чего нужен тег менеджер
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 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 и как его использовать
Майк Пантолиано, директор по маркетингу аналитической компании Ookla, написал в блоге Moz о том, что такое Google Tag Manager, как использовать теги для измерения маркетинговых кампаний. В рубрике Growth Hacks пример работы тегов в компании SEOmoz.
1 октября 2012 года компания Google представила Google Tag Manager — бесплатный инструмент для управления маркетинговыми активностями и отслеживанием тегов на вашем сайте. Для простоты понимания — их можно называть метками, но не теми, которыми тегируют материалы. В нашем случае, мы говорим о тегировании посетителей. Я почувствовал, что существует много недопонимания вокруг его запуска, поэтому решил обсудить, что такое «управление тэгами» и почему этот инструмент считается таким прорывным.
Существует ряд компаний, которые предоставляют платные инструменты по управлению тегами (я уверен, что они ненавидят Google, который делает это бесплатно). Я не буду обсуждать плюсы и минусы различных предложений для управления тегами, скорее, только концепцию в целом и некоторые действенные советы по использованию решения от Google.
Что это такое и зачем нужно
Теги представляют собой фрагменты кода, которые обычно помещаются в часть страницы. Они позволяют сторонним сервисам собирать данные и проводить анализ. Наиболее очевидными примерами являются Google Analytics и ряд других платформ, но теги используют также для ремаркетинга, отслеживания конверсий и других похожих задач.
Управление тегами является концепцией, которая родилась из растущей потребности в более гибком измерении маркетинга и способности отслеживать изменения. Сразу скажу: управление и внесение изменений в тегах является довольно утомительным занятием. Не хорошо использовать абстракции, поэтому возьмем пример из реальной жизни. Рассмотрим компанию SEOmoz.
Как SEOmoz мог бы использовать управление тегами
Давайте рассмотрим домашнюю страницу SEOmoz. В исходном коде главной страницы я могу выделить ряд кусков, которые бы хорошо работали с менеджером тегов. Можете взглянуть сами, но кажется, что команда Moz использует:
Как вы думаете, что происходит, когда кто-то из маркетинговой команды хочет внести изменения в теги?
Скорей всего это выглядит следующим образом: пишутся письма, предложенные изменения добавляются в рабочую очередь, планируются встречи по этому поводу, некоторое количество усилий для ускорения процесса, доказывается необходимость, далее ожидаем своей очереди в общем потоке задач, в то время как расписание распланировано еще на три недели вперед, и так далее.
Не весело, не гибко.
Менеджер тегов позволяет иметь контроль над отдельным местом на веб-странице. Один контейнер на странице заменяет 6-7 различных интеграций в коде. Этот контейнер содержит код, который управляется маркетологом из личного кабинета.
Если команда Moz хочет попробовать новый ремаркетинговый сервис, они могут взять код, поместить его в менеджер тегов и выкатить на сайт — все в течение 10 минут без привлечения программистов.
Подходит ли вам это
Учтите, что есть множество продуктов, особенно из e-commerce, которые являются гораздо более сложными, чем SEOmoz.org. Но при этом необходимость управления тегами в таких ситуациях только увеличивается.
Для того, чтобы использовать такую простоту и гибкость в будущем, есть довольно много препятствий и сложностей, которые должны быть предусмотрены заранее. Управление тегами просто не стоит затраченных усилий для вас, если вы:
В таком случае управление тегами, вероятно, не для вас. Для всех остальных такой инструмент является отличным средством в арсенале agile-маркетолога. Давайте более подробно рассмотрим Google Tag Manager.
Google Tag Manager
Если вы еще не видели эту презентацию, рассказывающую об инструменте и его установке, то посмотрите.
Затем рассмотрим то, как маркетологи могут кастомизировать его под свои нужды. Google Tag Manager предлагает функции управления версиями и отладки. Кроме того, контейнер представляет собой асинхронный JavaScript-фрагмент, поэтому он не будет влиять на загрузку страницы или блокировать другой JavaScript-код.
Макросы
Google Tag Manager использует макросы и правила, чтобы решить, когда необходимо включить тег. Макросы — это лишь пара «имя-значение», которая может быть использована для создания правил. Само значение, во многих случаях, заполняется в режиме исполнения. То есть, страница настраивается для пользователя в режиме реального времени. В составе менеджера тегов идут три макроса по умолчанию:
URL-макрос
Имя — URL, значение — URL независимо от верхнего уровня. Пример:
If URL = /confirmation.html send our ‘Conversion’ tags.
Ваши страницы конверсий, скорее всего, напичканы кодами наподобие AdWords, eCommerce аналитических систем и другими трекерами.
HTTP Referrer-макрос
Имя — HTTP Referrer, значение — предыдущая страница, которую посетил пользователь. Пример:
If referring page matches Twitter or Facebook, send the ‘Referred by Social’ tags.
Возможно, вы захотите использовать значение пользовательской переменной (custom variable) из Google Analytics.
Event-макрос
Это немного сложнее, особенно если вы привыкли к событиям (Events) в Google Analytics. Есть сходство, и вы можете использовать и их, но я бы не рекомендовал, потому что Google Analytics обладает схожим инструментом отслеживания событий.
События могут быть использованы для отслеживания взаимодействий на странице после ее загрузки. В качестве примера, если пользователь взаимодействует с формой на вашем сайте, то вы можете создать соответствующее событие. Если есть какие-либо правила, которые зависят от значения этого события, то соответствующий тег будет срабатывать.
Например, для страницы покупки SEOmoz, если мы хотим создать событие после подтверждения пользователем формы оплаты, то используем следующий код:
Возможно, у вас есть система, которая отправляем email пользователям, бросившим свои корзины.
Почему мы это делаем
Что делать, если у нас уже есть стандартное событие Google Analytics OnSubmit, и мы можем отслеживать заполнение форм? Какие преимущества при использование менеджера тегов? Необходимо сделать шаг назад и рассмотреть перспективу, чтобы понять преимущества. Заполненная форма на нашем сайте является важным действием пользователя. Независимо от того, какие услуги мы будем использовать для отслеживания наших маркетинговых усилий через 10 лет, это та часть информации, которую мы хотим анализировать. Используя менеджер тегов и настроив эту форму представления, как событие, мы по-прежнему сохраняем гибкость в следующих случаях:
Пользовательские макросы
В дополнение к указанным выше макросам, у нас есть возможность использовать пользовательские макросы для создания правил. Наши варианты включают в себя:
Постоянная строка
У этого макроса есть довольно ограниченное применение. Документация Google предлагает единственный вариант использования, который я могу себе представить:
Если вы хотите установить стандартное название компании на ваш сайт, можно определить его в качестве постоянной строки. Это позволит вам легко обновлять строку в Google Tag Manager и увидеть ее во всех тегах, которые используют данный макрос
JavaScript-переменная
Создать глобальную переменную JavaScript, на основе которой вы хотели бы выдавать содержимое страницы или как-то учитывать ее значение. Вот, что на этот раз предлагает Google. Пример:
В моем Tumblr, как оказалось, сервис по умолчанию печатает теги в глобальной переменной на странице.
Создание макросов и данные в них позволяют мне установить собственные правила для тегов. Довольно легко написать соответствующее правило для специальной версии фрагмента Google Analytics, который помещает обнаруженные теги в пользовательские переменные. Заметьте, что я ссылаюсь на макрос, который мы только что создали выше, используя синтаксис <
Таким образом мы сможем наблюдать в привычном нам интерфейсе Google Analytics интерес к тегам(в данном случае уже тегам материалов, которые также называют метками), которые мы сами указываем при публикации материалов.
Слой данных
Объяснение слоя данных занимает довольно много времени. Если вы хотите узнать подробно, то можете почитать заметку Джастина Кутрони.
Слой данных представляет собой сбор данных со страницы, которая включает в себя любую важную информацию в удобном для доступа формате. Представьте себе страницу подтверждения на eCommerce сайте: у вас есть сведения о транзакции, транспортные детали, количество, коды продуктов, номера заказов и т.д. Все это разбросано на странице. Слой данных хранит всю информацию в паре «имя-значение» в исходном коде (не печатается на странице, чтобы пользователь мог видеть), а менеджеру тегов очень легко получить к ней доступ.
var dataLayer = <
«pageTitle» : «Confirmation page»,
«pageURL» : «/confirmation.html»,
«tranID» : «239871»,
«tranTotal» : «47.54»,
«tranTax» : «1.54»,
«tranShipping» : «5.00»,
«tranShippingMethod» : «USPS»,
«tranCurrency» : «USD»,
«tranProds» : «11312|2335|44443»,
«tranSKUs» : «23|3233|22»,
«tranProdNames» : «Fake Product 1|Fake Product 2|Fake Product 3»,
«tranCategories» : «Misc|Games|Hijinks»,
«tranPayMethod» : «VISA»,
«visitorType» : «Repeat Buyer»,
«visitorFirstPurchDate» : «20121001»,
«visitorFirstProds» : «13333»
>
Помимо данных с eCommerce-сайтов, следующая информация идеально подойдет для слоя данных:
С менеджером тегов и слоем данных, работающих вместе, очень легко создать правило, которое отправляет пользовательские переменные (custom variables) и сегменты (имеется в виду сегментирование в GA), сколько аналитических сервисов вы бы не использовали. Вы отслеживаете поведение авторизованных пользователей в Google Analytics, Mixpanel и KISSmetrics? Создайте правило в Google Tag Manager, которое использует все три пользовательских тега, если слой данных с именем ‘logged_in’ = yes.
Начать использовать слой данных может показаться довольно трудоемкой задачей,, но инвестиции могут сэкономить массу времени в долгосрочной перспективе. Самое главное — это позволяет разработчикам сосредоточиться на исправлении ошибок и улучшении продукта без учета внешних факторов, в то время как маркетологам не придется беспокоиться о времени, необходимом для реализации новых тегов.
Текст и атрибут объектной модели документа (DOM)
Если вам посчастливилось работать с данными, к которым вы хотели бы получить доступ и хранить их с правильно размеченными макросами, вы могли бы использовать их в своих правилах.
Давайте вернемся к моему Tumblr в качестве примера. Эта страница включает в себя код:
Stars and Astral Cars
Если у вас еще есть какие-то полезные данные, размеченные подобным образом, то вы могли бы также работать со следующим примером. В идеале это выглядело бы так:
Но я не уверен, что у вас будут все необходимые данные, прекрасно размеченные таким образом.
Google Analytics
Небольшое примечание по установке Google Analytics через Google Tag Manager:
Основная установка Google Analytics через Google Tag Manager действительно проста. Вы будете использовать правило «Всех страниц», которое Google предоставляет по умолчанию.
Если вы планируете делать более сложные вещи, такие как отправка пользовательских переменных в соответствии с правилами, которые вы установили, вы должны будете использовать «Custom HTML», и появится необходимость в проверке, что вы установили правило для блокировки традиционного фрагмента:
Судя по всему, в скором будущем, когда Google займется этим, у Google Analytics появятся усовершенствования по работе с Google Tag Manager.
Заключение
Управление тегами является мечтой маркетологов. Подобно Google Analytics в 2006 году, Google Tag Manager вступил на платный рынок с бесплатным продуктом, который прочно стоит на ногах с момента запуска. Если Google Tag Manager следует модели Google Analytics, он будет продолжать улучшаться. Есть уже несколько особенностей, намеченных на будущие версии, такие как способность управлять фрагментами при А/В-тестированиях. У меня также есть стойкое ощущение, что Google Analytics охватит Google Tag Manager для своих предстоящих изменений в кросс-доменном отслеживании, что является очень трудоемкой задачей.
Если вас заинтересовала тема управлении тегами, но вас не устроил сервис от Google, предлагаю, я надеюсь, исчерпывающий перечень (спасибо еще раз Джастину Кутрони) других игроков в области управления тегами. Несмотря на то, что я не работал достаточно со всеми ними, некоторые даже более мощные, чем Google Tag Manager: