Что такое гугл тег менеджер
Зачем нужен 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:
Как использовать Google Tag Manager
Google Analytics и Яндекс.Метрика давно стали необходимыми инструментами для любого сайта. Чтобы воспользоваться такими сервисами, достаточно добавить их код на свой ресурс. Это несложно, но здесь могут возникнуть некоторые трудности – обычно они начинаются в тех случаях, когда требуется внести изменения в уже добавленный код. Для начинающего вебмастера сделать это довольно проблематично – чуть что заденешь, и весь сайт полетит. Выходом из ситуации может стать специальный сервис от Google – Tag Manager.
Давайте разберемся, что умеет этот инструмент и как им воспользоваться.
Что такое Google Tag Manager
Google Tag Manager (Диспетчер тегов) – это специальный сервис, благодаря которому можно упростить использование кода сторонних служб на веб-сайтах или в приложениях. Другими словами, это целая система, позволяющая без помощи программиста настраивать и пользоваться популярными службами аналитики. Специалист может потребоваться только на начальном этапе, когда будет нужно внедрить код диспетчера тегов. В последующем все действия для подключения различных сервисов будут выполняться вами самостоятельно.
Стоит также понимать, что GTM – это не единственный сервис в своем роде, существуют такие системы, как Tealium, Adobe Dynamic Tag Manager, Yahoo Tag Manager. Но почему же все выбирают Google? Рассмотрим далее.
Почему Google Tag Manager
Обычно выделяют следующие преимущества сервиса:
Несмотря на это, вы можете обойтись и без Google Tag Manager, но только в тех случаях, когда используете до двух сторонних служб. В противном случае инструмент сильно упростит контроль над множеством сервисов.
Настройка Google Tag Manager
Первое, что от нас потребуется, – это пройти регистрацию и разместить код контейнера на своем сайте. Давайте быстренько сделаем это, а затем уже перейдем к основным настройкам. Так сказать, будем знакомиться по ходу дела.
В данном случае файл, в котором был прописан код, называется index.html. Также он может именоваться как header.php или как-то иначе, если сайт расположен на CMS.
Основные параметры
Прежде чем переходить к настройкам сервиса, давайте остановимся на некоторых понятиях, относящихся к GTM. Это контейнер, тег, триггер и переменная – именно они нас встречают на главной странице сервиса.
Объясняю на пальцах: в каждом аккаунте есть как минимум один контейнер. В нем располагается один или несколько тегов – например, код Google Analytics. Для него устанавливается триггер, который определяет условия срабатывания тега и отправки им данных. После того как триггер срабатывает, он считывает определенную переменную. Например, встроенная переменная Click Text содержит текст, а Click URL — URL. Данный триггер активируется, если значение переменной совпадает с заданными пользователем параметрами: кликом по элементу с указанным текстом или URL.
Именно с переменных и начинается базовая настройка Google Tag Manager.
Настройка переменных
Все переменные в Google Tag Manager разделяются на два типа: встроенные и пользовательские. Сейчас нам достаточно будет встроенных значений, но в последующем вы можете настроить свои переменные.
Процесс настройки довольно прост. По умолчанию у нас уже установлены некоторые переменные, готовые к работе – посмотреть их можно в разделе «Переменные».
В отобразившемся окне мы видим встроенные и пользовательские переменные. По умолчанию список вторых пуст. Чтобы его заполнить, необходимо нажать на кнопку «Создать», в результате чего отобразится дополнительный блок с возможными конфигурациями для настройки. Со встроенным переменными все намного проще – не нужно ничего создавать, можно просто добавить необходимую переменную, и все будет работать автоматически.
Пройдемся по каждому типу встроенных переменных:
Для того чтобы добавить новую переменную, достаточно отметить ее в меню конфигуратора, после чего она автоматически отобразится в рабочей области.
Настройка триггеров
Для начала давайте рассмотрим основные параметры триггеров, а затем перейдем к их настройке. Всего их 4 типа:
Просмотр страницы
Клик
Взаимодействия пользователей
Другое
Вот такой функционал поддерживают триггеры. Давайте создадим один триггер, который будет взаимодействовать с переменной. Для этого выполним следующее:
Готово! Мы создали свой первый триггер. При необходимости вы можете настроить более точное срабатывание с помощью дополнительных параметров.
Настройка тегов
Вот мы и пришли к самому интересному: после того как переменные были определены, а триггеры настроены, можно переходить к тегам. Их настройка начинается в разделе «Теги» с помощью кнопки «Создать».
В меню конфигуратора мы увидим два блока «Конфигурация тега» и «Триггеры». Первым делом нам понадобится верхний раздел – перейдем в него и посмотрим, что там находится.
Здесь мы можем выбрать один из тегов, который соответствует нужному нам сервису. Пусть это будет «Google Аналитика: Universal Analitics».
После этого перед нами отобразится окно настроек выбранного тега. Так как мы хотим использовать Google Analytics, потребуется добавить идентификатор отслеживания. Чтобы это сделать, отмечаем пункт «Включить переопределение настроек в этом теге» и вводим значение.
Теперь нам нужно привязать к этому тегу триггер – для этого на этой же странице открываем блок «Триггеры» и выбираем тип отслеживания просмотра страниц «All Pages». В данном случае мы используем триггер, который был автоматически сгенерирован сервисом. Если вы ранее создавали собственный тег, то можете добавить его, но только в том случае, если он подходит под данное действие.
В завершение сохраняем созданный нами тег.
Готово! Тег был создан, теперь давайте проверим его работоспособность – для этого в Google Tag Manager есть специальная функция «Предварительный просмотр».
На отобразившейся странице вводим ссылку на свой сайт и жмем «Start».
После этого будет выполнен переход на сайт. Если на панели отладки появится тег, то поздравляю. Все получилось!
Осталось опубликовать контейнер с созданным тегом. Для этого на главной странице выбираем «Отправить».
На этом настройка Google Tag Manager завершена. Как только вы нажмете на кнопку «Отправить», перед вами отобразится новое окно, в котором можно указать название версии и ее описание. После внесения изменений останется нажать на кнопку «Опубликовать».
Теперь вы знаете, как можно использовать Google Tag Manager. Спасибо за внимание!
Что такое Google Tag Manager?
Установка на сайте инструментов аналитики, систем по сбору данных о посетителях сопровождается добавлением HTML и JS элементов в коде админки. Выполнить такую работу способен только компетентный человек. Обновление кода иногда приводит к сбоям в работе сайта, поломанной верстке, изменению скорости загрузки страниц. Так как многие сайты по сути представляют бизнес-проекты, подобные неполадки могут привести к оттоку клиентов и убыткам.
Чтобы не рисковать работоспособностью сайта, иногда владельцы отказывают вебмастерам в доступе к коду. Оптимальным вариантом для владельцев сайтов и вебмастеров считается система управления тегами — Google Tag Manager. В этой статье мы расскажем о нем подробнее.
Google Tag Manager — это единое место для хранения всех тегов, которые подключены на сайте.
В GTM можно добавить коды аналитики (Google Analytics, Яндекс Метрика и др.), систем коллтрекинга (Calltouch, Calltracking), онлайн-чатов (Jivosite, Siteheart) и других сервисов. Для этого в интерфейсе диспетчера тегов предусмотрены встроенные шаблоны, а также есть возможность создания персональных шаблонов. Все HTML и JS элементы хранятся в диспетчере тегов.
Чтобы использовать GTM необходимо единожды добавить в раздел кода два фрагмента. Активировать сервис и работать в нем могут специалисты с минимальным опытом в программировании. Готовые шаблоны и функции дают возможность проводить тесты, использовать теги с пользой для каждого посетителя. При этом владельцу сайта легко отследить конверсии и оценить эффективность использования каждого тега по отдельности.
Для работы с диспетчером тегов необходимо понимать значение терминов:
Контейнер — место, где хранятся все теги для одного проекта. Рекомендуется создавать отдельный контейнер для каждого сайта. Исключение составляют полностью идентичные сайты, которые удобно объединить в один контейнер. Для запуска такого контейнера необходимо единожды установить код на сайт.
Тег — Участок кода, который подключает стороннюю систему. Например, для подключения Яндекс Метрики нужно подключить соответствующий участок кода в GTM. К тегу можно подключить триггеры, которые отслеживают действия посетителей сайта.
Триггер — условие, при котором выполняется запуск или блокировка тега. В диспетчере тегов можно настроить график запуска или конкретные страницы, на которых должно сработать условие. Для этого в GTM предусмотрены фильтры. Каждый триггер включает конкретное событие: переход по ссылке, клик, загрузку страницы и т.д.
Переменная — параметр в формате «ключ — значение», функция или переменная, которую можно использовать в нескольких тегах.
Удобство и бесплатный доступ. В админке сайта необходимо добавить лишь код GTM, действия с тегами выполняются в интерфейсе диспетчера тегов.
Самостоятельное управление. Для добавления тегов и настройки триггеров не нужно привлекать дополнительных специалистов.
Быстрая установка и начало работы. Настройка и запуск аккаунта GTM выполняется в несколько кликов.
Интеграция с большим количеством систем. Через GTM можно подключить любые системы аналитики и взаимодействия с пользователями сайта.
Скопление тегов в одном месте.
Единоразовое вмешательство в код страниц сайта.
Система контроля версий и возможность отката к предыдущим версиям в несколько кликов.
Возможность установки целей и отслеживания конверсий.
Привычный интерфейс, схожий со всеми сервисами Google.
Удобство тестирования и возможность проверки кода до его публикации на сайте.
Совместимость с мобильными сайтами и приложениями.
Наличие встроенных шаблонов для настройки кода.
Управление триггерами и возможность создавать собственные переменные для вызова кода в определенное время либо при совершении указанного действия пользователем на сайте.
1. Войдите в аккаунт Google и перейдите на страницу диспетчера тегов.