Зачем нужен Google Tag Manager и как его использовать

Зачем нужен 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 использует:

1. Google Analytics — разумеется.
2. Kiss Metricks — для более продвинутого изучения аудитории.
3. AdRoll — для ремаркетинга.
4. Simpli.fi — также для ремаркетинга.
5. Optimizely — для тестирования CRO (conversion rate optimization). Google Tag Manager не поддерживает A/B-тесты, но в следующей версии обещают включить.
6. Я предполагаю, что у них есть еще интеграции сторонних кодов на страницах конверсий, как при работе с AdWords или любыми другими системами, которые просят разместить код в виде некоторого пикселя.

Как вы думаете, что происходит, когда кто-то из маркетинговой команды хочет внести изменения в теги?

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

Не весело, не гибко.

Менеджер тегов позволяет иметь контроль над отдельным местом на веб-странице. Один контейнер на странице заменяет 6-7 различных интеграций в коде. Этот контейнер содержит код, который управляется маркетологом из личного кабинета.


Если команда Moz хочет попробовать новый ремаркетинговый сервис, они могут взять код, поместить его в менеджер тегов и выкатить на сайт — все в течение 10 минут без привлечения программистов.

Подходит ли вам это
Учтите, что есть множество продуктов, особенно из e-commerce, которые являются гораздо более сложными, чем SEOmoz.org. Но при этом необходимость управления тегами в таких ситуациях только увеличивается.

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

1. Не испытываете сложностей при размещении дополнительных кодов.
2. Не экспериментируете часто с системами, которые просят размещать коды.

В таком случае управление тегами, вероятно, не для вас. Для всех остальных такой инструмент является отличным средством в арсенале 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 обладает схожим инструментом отслеживания событий.

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

Пример кода:

dataLayer.push({'event': 'event_name'});

Например, для страницы покупки SEOmoz, если мы хотим создать событие после подтверждения пользователем формы оплаты, то используем следующий код:

<form id="user_data" class="ignore_dblclick" method="post" action="https://www.seomoz.org/cart/purchase_checkout">

<form id="user_data" class="ignore_dblclick" method="post" action="https://www.seomoz.org/cart/purchase_checkout" onsubmit="dataLayer.push({'event': 'form_submitted'});">

If event = 'abandonedFunnel' - send the 'Cart Abandoned' tags.

Возможно, у вас есть система, которая отправляем email пользователям, бросившим свои корзины.

Почему мы это делаем
Что делать, если у нас уже есть стандартное событие Google Analytics OnSubmit, и мы можем отслеживать заполнение форм? Какие преимущества при использование менеджера тегов? Необходимо сделать шаг назад и рассмотреть перспективу, чтобы понять преимущества. Заполненная форма на нашем сайте является важным действием пользователя. Независимо от того, какие услуги мы будем использовать для отслеживания наших маркетинговых усилий через 10 лет, это та часть информации, которую мы хотим анализировать. Используя менеджер тегов и настроив эту форму представления, как событие, мы по-прежнему сохраняем гибкость в следующих случаях:

• Хотите начать работать с новым партнером с оплатой за заполненную форму, но вам необходимо установить код «пикселя»? Мы уже создали соответствующее событие и поэтому нужно лишь добавить правило в менеджер без дополнительных интеграций в коде.
• Хотите попробовать новую платформу веб-аналитики? Нет необходимости в дополнительной разметке на странице, просто настройте менеджер тегов.
• Один из сервисов-партнеров обновился сам и обновил код, который требуется заменить? Мы можем внести изменения на сайт в течение 5 минут с менеджером тегов.

Пользовательские макросы
В дополнение к указанным выше макросам, у нас есть возможность использовать пользовательские макросы для создания правил. Наши варианты включают в себя:

Постоянная строка

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

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

JavaScript-переменная

Создать глобальную переменную JavaScript, на основе которой вы хотели бы выдавать содержимое страницы или как-то учитывать ее значение. Вот, что на этот раз предлагает Google. Пример:

В моем Tumblr, как оказалось, сервис по умолчанию печатает теги в глобальной переменной на странице.

Возьмите этот пост. В , мы видим, что теги передаются в tumblr_meta_keyboards (Почему, черт возьми, они решили назвать эту переменную «keyboards»? Опечатка?):

<script>var tumblr_meta_keyboards = 'xoxo,xoxofest,texts';</script>

Создание макросов и данные в них позволяют мне установить собственные правила для тегов. Довольно легко написать соответствующее правило для специальной версии фрагмента Google Analytics, который помещает обнаруженные теги в пользовательские переменные. Заметьте, что я ссылаюсь на макрос, который мы только что создали выше, используя синтаксис {{macro_name}} в строке пользовательской переменной.


Таким образом мы сможем наблюдать в привычном нам интерфейсе 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-сайтов, следующая информация идеально подойдет для слоя данных:

• категория страницы,
• подкатегория страницы,
• ID посетителя,
• статус пользователя,
• состояние авторизации,
• еще примеры.

С менеджером тегов и слоем данных, работающих вместе, очень легко создать правило, которое отправляет пользовательские переменные (custom variables) и сегменты (имеется в виду сегментирование в GA), сколько аналитических сервисов вы бы не использовали. Вы отслеживаете поведение авторизованных пользователей в Google Analytics, Mixpanel и KISSmetrics? Создайте правило в Google Tag Manager, которое использует все три пользовательских тега, если слой данных с именем 'logged_in' = yes.

Начать использовать слой данных может показаться довольно трудоемкой задачей,, но инвестиции могут сэкономить массу времени в долгосрочной перспективе. Самое главное — это позволяет разработчикам сосредоточиться на исправлении ошибок и улучшении продукта без учета внешних факторов, в то время как маркетологам не придется беспокоиться о времени, необходимом для реализации новых тегов.

Текст и атрибут объектной модели документа (DOM)

Если вам посчастливилось работать с данными, к которым вы хотели бы получить доступ и хранить их с правильно размеченными макросами, вы могли бы использовать их в своих правилах.

Давайте вернемся к моему Tumblr в качестве примера. Эта страница включает в себя код:

<div id="title"> <h1 class="logo"><a href="/" title="Stars and Astral Cars - Home"> Stars and Astral Cars</a></h1> </div>


Так это выглядит для значения с ID «title» , мы получим следующее значение “Stars and Astral Cars" и сохраним его в макрос.

Если у вас еще есть какие-то полезные данные, размеченные подобным образом, то вы могли бы также работать со следующим примером. В идеале это выглядело бы так:

<p id="transaction_amount">35.45</p> <p id="transaction_tax">2.43</p>

Но я не уверен, что у вас будут все необходимые данные, прекрасно размеченные таким образом.

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:

• Ensighten;
• TagMan;
• Tealium;
• Satellite;
• OpenTag;
• Tag Commander;
• Super Tag;
• Site Tagger;
• Bright Tag.