Издание о поисковом маркетинге
и заработке в Интернете
Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:

Энциклопедия интернет-маркетинга: что такое Google Tag Manager и как его использовать

Россия +7 (495) 960-65-87
Шрифт:
2 11361

Лого.jpg

SEOnews запустил проект для специалистов и клиентов «Энциклопедия интернет-маркетинга», в рамках которого редакция публикует обучающие материалы от ведущих агентств на рынке. В итоге мы планируем выпустить полное, практически полезное и актуальное электронное руководство.

***

Что такое Google Tag Manager и как его использовать

Тема довольно заезженная, по ней можно найти огромное количество блогов, статей и видео курсов. Но цель этой статьи – дать максимум понимания новичкам, как и для чего можно использовать GTM. Возможно эту статью сочтут полезной даже те, кто уже имеет опыт использования GTM в своей практике.

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

Что такое Google Tag Manager

Tag manager – решение от Google, которое позволяет размещать скрипты на страницах сайта без непосредственного вмешательства в его код. GTM даёт возможность добавлять и обновлять скрипты непосредственно через web-интерфейс, а также задавать правила активации этих скриптов. Диспетчер тегов Google – это простой, надежный и бесплатный инструмент. Маркетологам он обеспечивает гибкость в работе, а веб-мастерам позволяет сосредоточиться на важнейших задачах, не беспокоясь о мелочах. Это решение для специалистов по маркетингу, в котором доступен единый интерфейс управления всеми тегами на сайте.

Структура GTM

  • Аккаунт – то место, где вы можете управлять своими контейнерами.
  • Контейнер – это главный и единственный фрагмент JS-кода, который мы вставляем на все страницы сайта. По сути, он является тегом, но его функция заключается в том, что он служит контейнером для всех тегов.
  • Тег – это небольшие фрагменты кода веб-сайтов, которые позволяют отслеживать трафик и поведение посетителей, анализировать эффективность рекламы на сайтах и в социальных сетях, использовать средства ремаркетинга и таргетинга на определенные аудитории, тестировать и улучшать свой сайт, а также выполнять много других полезных задач.
  • Триггер определяет при каких обстоятельствах будет выполняться или блокироваться тег.
  • Переменные являются парами типа имя/значение, для которых передаются значения в процессе работы. Они используются, как для кастомных переменных, так и для определения условия при котором будет срабатывать тег.

Создание и установка

Первое, что необходимо сделать – это войти под существующим Google аккаунтом в google tag manager, если такового нет – создать новый.

Далее Tag manager предлагает создать аккаунт для вашего ресурса и предоставляет код контейнера, который необходимо установить на сайт.

В данном примере я буду использовать контейнер web-версии.

1.png

Соглашаемся с лицензионным соглашением

2.png

Далее в интерфейсе будет отображен код, который по рекомендациям Google нужно поставить на все страницы сайта после тега <body>. В дальнейшем его можно будет посмотреть во вкладке Admin -> Install Google Tag Manager

3.png

На этом всё. Установка Google Tag Manager закончена. Необходимо переходить непосредственно к настройке тегов и триггеров.

Структура. Как и для чего использовать. Возможности

Остановимся подробнее на общем интерфейсе программы.

Элементы интерфейса

4.png

1 - Элемент поиска, который поможет быстро найти тег, триггер или переменную по названию.

2 - Обзор состояния аккаунта

3 - Вызов списка тегов

4 - Список правил

5 - Список встроенных и пользовательских переменных

5.png

6 - Создание папок для структурирования тегов, триггеров и переменных

7 - Быстрый доступ к созданию нового тега

8 - Создание заметки

9 - Состояние аккаунта, кол-во тегов, триггеров и переменных, и их состояние (опубликован или не опубликован)

10 - История изменения содержимого контейнера.

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

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

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

В интерфейсе google tag manager вы обнаружите, что настройка тегов, триггеров и переменных имеет приблизительно одинаковый порядок:

Название -> Тип -> Настройка -> Правило

Для переменных правило срабатывания отсутствует, значение будет приниматься на всех страницах сайта. В случае если значение не будет определено – ключу будет присвоено undefined.

Для начала посмотрим на этапы создания триггера и переменных.

Переходим на вкладку триггеры и нажимаем New. Далее необходимо придумать название (если не введено, при сохранении будет уведомление, в котором можно будет ввести понятное название для триггера) и выбрать его тип.

6.png

Каждый тип триггера используется для различных задач. Для того чтобы пользоваться всем возможным функционалом по внутренней настройке специфических параметров срабатывания триггера, нужно включить необходимые встроенные переменные на странице Variables. О них речь пойдёт немного ниже, а пока разберем имеющиеся события.

Page View – триггер, который даёт возможность запустить тег при загрузке определенных страниц, загрузки окна (на 3х этапах, предусмотренных в GTM) или при дополнительных условиях, которые можно выбрать из списка.

7.png

Далее нужно установить правило этого триггера – тут может быть 2 варианта – All page views или для более гибкой настройки Some Page Views, где можно указать определенную страницу или параметр, который приведет к срабатыванию триггера при загрузке страницы.

8.png

Следующий вид триггера – Click. Он используется для прослушивания кликов 2х типов – All Elements и Just Links. Как правило, можно использовать для прослушивания всех кликов – All Elements, но это приводит к необходимости более конкретной настройки на этапе Fire On. По аналогии с Page View можно создать условие, при котором будет срабатывать триггер. Чтобы использовать эти условия нужно включить на вкладке Variables показатели, которые относятся к Clicks.(в дальнейшем для Forms и History).

9.png

После чего в списке выбора параметров срабатывания триггера можно выбрать id, class, text и др. параметры, которые необходимо учесть.

10.png

Если необходимых встроенных переменных нет, можно воспользоваться пользовательскими. Они могут быть различного вида, могут иметь значение из разных источников (html, cookie) и могут быть созданы, как на сайте, в виде массива dataLayer так и с помощью Custom JavaScript непосредственно в интерфейсе Tag Manager.

Custom JavaScript в виде пользовательских переменных обладает поистине фантастическими возможностями для аналитиков и маркетологов – необходимость обращаться к программисту практически отпадает.

11.png

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

Аналогичным образом создаются триггеры для Form и History Change.

Отдельного внимания требуют Custom Event и Timer.

Custom Event – тип триггера, правило срабатывания которого устанавливает разработчик, встраивая переменную dataLayer.push({'event': 'event_name'}); в код на определенные действия или просто загрузку страницы. Правилом тут будет выступать загрузка данного события. Тут очень много интересных возможностей и методов реализации, подробнее о них можно почитать в официальной документации Google. 

Timer – триггер, который даёт возможность создать правило для срабатывания тега, по истечению какого-то времени, например, для выделения отдельной, более вовлеченной аудитории ресурса и запуска для такой аудитории код ремаркетинга.

12.png

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

Установка тега – очень важный момент, т.к. именно то, как вы опубликуете скрипт и какие правила срабатывания присвоите, будет влиять на данные, которые отображает установленный продукт. В Google Tag Manager уже существует ряд продуктов доступных к установке.

Установка счётчиков и тегов продуктов, список которых доступен в интерфейсе.

13.png

Посмотреть весь список тегов, предусмотренных компанией Google, можно при создании тега.

14.png

Данный список постоянно расширяется, но в случае, если отсутствует необходимый встроенный функционал, можно воспользоваться полями Custom HTML Tag или Custom Image Tag

15.png

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

Создание самого тега – задача тривиальная. Этапы мы оговорили выше, а что касается полей – это чаще всего опознавательные элементы устанавливаемого скрипта (id, уникальное имя или название в продукте и тд.), которые можно взять из интерфейса устанавливаемого продукта. При настройке встроенных тегов чаще всего есть возможность заполнения полей для создания дополнительных параметров. Здесь можно использовать те показатели, которые мы разбирали выше, выбрав из списка соответствующий. Также тут есть возможность изменить показатель для продукта, если он отправляется по умолчанию, указав новое значение.

16.png

17.png

Далее система требует установки триггера. Как я уже говорил, его можно создать заранее или на моменте создания тега.

Для того чтобы проверить работоспособность установленного тега, в GTM предусмотрен функционал пред-просмотра и отладки.

18.png

19.png

Нажав на данную кнопку и после перейдя на сайт, вы увидите дополнительную консоль в которой будет отображаться ряд тегов, которые сработали или не сработали на данной странице. Так же доступен просмотр момента, на котором сработал тег, причины срабатывания (или не срабатывания) и показатели, которые используются. После того, как вы убедитесь, что всё работает, нажмите кнопку Publish.

У маркетолога или аналитика возникает необходимость использовать Google Tag Manager когда:

  1. У разработчика занимает очень много времени установка или тестирование системы аналитики, а анализировать нужно здесь и сейчас.
  2. На установку кодов ретаргетинга уходит много времени, а руководитель уже хочет видеть результаты.
  3. Нужно настроить десяток событий, а написание ТЗ для программиста и вмешательство в код – в лучшем случае дело нескольких дней.
  4. Возникает необходимость создавать пользовательские переменные и метрики для расширения анализируемых данных и др.

На примере разберем установку кода Google Analytics

Для начала советую создать пользовательскую переменную, которую можно будет использовать как property id для вашего аккаунта.

Заходим на вкладку Variables, нажимаем New и выбираем тип переменной Constant.

Даём ей название GA Property и вносим наш идентификатор из Google Analytics. Нажимаем Create Variable. В дальнейшем данные манипуляции облегчат работу с тегами.

20.png

Далее заходим на страничку Tag и нажимаем New

21.png

Вводим название тега, выбираем необходимый продукт (если его нет – можно воспользоваться Custom HTML), выбираем версию Google Analytics, в поле Tracking ID нужно ввести идентификатор вашего аккаунта, но т.к. на предыдущем шаге мы создали переменную с нашим идентификатором мы указываем его. Track Type – Pageview по умолчанию.

В поле More settings можно ввести дополнительные параметры, которые вы хотите использовать.

22.png

Самые часто используемые:

  • Поле Fields to Set служит для передачи параметров, которые предусмотрены в Google Analytics. Это может быть page (для создания своего названия страницы) или &uid для представления с user id и др.
  • Custom dimentions и custom metrics служат для передачи пользовательских переменных и метрик в Google Analytics.
  • Ecommerce features используется для настройки Enhanced ecommerce. (Для передачи данных Enhanced ecommerce используется тип тега Page View для всех этапов! Тип тега Transaction используется только для классического ecommerce.)

Далее устанавливаем правило срабатывания тега – All Pages. В итоге должно получится нечто похожее на

23.png

Нажимаем Create Tag и следуем пунктам описанными до кейсов. (Preview -> Publish)

Для настройки События необходимо создать дополнительный тег типа Google Analytics и в поле track type выбрать event. Заполняем стандартные параметры и в Fire On создаём правило отправки события (не забывайте отметить галочками необходимые переменные на вкладке Variables).

24.png

Нестандартной, но довольно частой задачей является получение cid или client id Google Analytics, как кастомной переменной. Возникает такая необходимость в случае, если компания хочет отслеживать каждого посетителя отдельно или отправлять какие-либо данные через measurement protocol.

Особенностью данного показателя является то, что он хранится в файлах cookie Google Analytics.

Нам необходимо:

1. Создать переменную 1st Party Cookie с именем “_ga”

25.png

2. Создать Custom JavaScript со следующим кодом

function() {

try {

var cookie = {{ga cookie}}.split(".");

return cookie[2] + "." + cookie[3];

} catch(e) {

console.log("No Universal Analytics cookie found");

return "n/a";

}

}

26.png

А теперь о том, как это работает: 1st Party Cookie с именем “_ga” возвращает данные в виде похожем на GA1.2.475226310.1380715146. Далее Custom JavaScript парсит эту строку и возвращает cid убирая с полученных данных первые 4 символа (GA1.2.) и возвращает набор чисел (475226310.1380715146), который показывает полный clientID пользователя.

Этот показатель можно использовать как кастомную переменную в гугл аналитикс, достаточно создать его в Google Analytics и добавить в тег в поле Custom Dimention c параметром session и настроить передачу данного параметра из GTM в GA.

27.png

28.png

Где Index - номер переменной из Google Analytics.

29.png

Это отличный пример того, как получать и использовать переменные в Google Tag Manager.

В заключение хотелось бы сказать, что Google Tag Manager – это очень мощный инструмент, который можно использовать для достижения множества целей без привлечения разработчика: начиная от установки кодов и настройки систем аналитики и заканчивая A/B тестированием и более сложными задачами.

internet-dlya-biznesa
Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Поделиться 
Поделиться дискуссией:
Отправить отзыв
  • Анна
    5 месяцев назад
    Где можно выставить порядок отработки тегов ? По молчанию они все вместе запускаются, а если надо выстроить порядок?
    -
    0
    +
    Ответить
    Поделиться
    • Еськов Алексей
      1
      комментарий
      0
      читателей
      Еськов Алексей
      Анна
      5 месяцев назад
      В настройке тега есть пункт Advanced Settings. Далее поле - Tag firing priority - в котором можно назначить приоритет вызова тегов. Тег с бОльшим приоритетом будет запускаться первым. Так же есть настройка Tag Sequencing - которая отвечает за порядок запуска тегов - запустить другой тег ДО выбранного тега  или запустить другой тег ПОСЛЕ выбранного тега. Надеюсь понятно)
      -
      3
      +
      Ответить
      Поделиться
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Пишем биддер для Google AdWords из 10 строчек
Anton Stremovskyy
2
комментария
0
читателей
Полный профиль
Anton Stremovskyy - // Позиция рекламного объявления которую пытаемся занять. var TARGET_AVERAGE_POSITION = 3; // Когда позиция обьявления будет между TOLERANCE и TARGET_AVERAGE_POSITION, // Ее ставка не будет изменена. var TOLERANCE = 0.1; // Значение для корректировки ставки (1.05 = 5%). var BID_ADJUSTMENT_COEFFICIENT = 1.05; function main() { raiseKeywordBids(); lowerKeywordBids(); } function raiseKeywordBids() { // Условие для увеличения ставки: Средняя позиция больше (хуже) чем // TARGET_AVERAGE_POSITION + TOLERANCE var keywordsToRaise = AdWordsApp.keywords() .withCondition("Status = ENABLED") .withCondition("AveragePosition > " + (TARGET_AVERAGE_POSITION + TOLERANCE)) .orderBy("AveragePosition ASC") .forDateRange("LAST_7_DAYS") .get(); while (keywordsToRaise.hasNext()) { var keyword = keywordsToRaise.next(); keyword.setMaxCpc(keyword.getMaxCpc() * BID_ADJUSTMENT_COEFFICIENT); } } function lowerKeywordBids() { // Условия для снижения ставки: Ctr больше чем 1% и // средняя позици лучше (меньше) чем TARGET_AVERAGE_POSITION - TOLERANCE var keywordsToLower = AdWordsApp.keywords() .withCondition("Ctr > 0.01") .withCondition("AveragePosition < " + (TARGET_AVERAGE_POSITION - TOLERANCE)) .withCondition("Status = ENABLED") .orderBy("AveragePosition DESC") .forDateRange("LAST_7_DAYS") .get(); while (keywordsToLower.hasNext()) { var keyword = keywordsToLower.next(); keyword.setMaxCpc(keyword.getMaxCpc() / BID_ADJUSTMENT_COEFFICIENT); } }
Тест: проверь свои знания по SEO
Гость - Ну вот и плохо что в каноникалах ты не сечешь, тестировщик. Ни пользоваться ими не умеешь ни назначения не знаешь. За то кого-то там "тестируешь".
Золотое правило SEO: хватит технарствовать – пора фигачить!
Рустем Фахрутдинов
14
комментариев
0
читателей
Полный профиль
Рустем Фахрутдинов - На самом деле, мы сделали почти всё :) А в статье - пример того, как это удалось чуть позже автоматизировать.
Ссылки все еще работают?
Roman Popov
41
комментарий
0
читателей
Полный профиль
Roman Popov - Но это ведь совсем другая история! =)) По коммерческим запросам такими вещами заниматься не следует. По информационным - можно, вероятность схватить по голове тут довольно маленькая даже при злоупотреблениях.
100 полезных ресурсов, без которых не обойтись начинающему SEO-специалисту
Игорь Ходырев
1
комментарий
0
читателей
Полный профиль
Игорь Ходырев - От души. Действительно самые полезные ресурсы. Использую 90% из перечисленного. Кокшаров и Шахов - лучшие!
Мастер-класс: как составить файл sitemap.xml
Айрат Рахимзянов
0
комментариев
0
читателей
Полный профиль
Айрат Рахимзянов - Здравствуйте Максим. Возможно, вам будет интересна новая статья: www.seonews.ru/analytics/metody-bystroy-indeksatsii-sayta/
Энциклопедия интернет-маркетинга: составляем корректный robots.txt своими руками
Kirill Terentiev
10
комментариев
0
читателей
Полный профиль
Kirill Terentiev - "Недокументированные" возможности robots.txt Можно разместить вакансию, например. # Приглашаем на работу SEO-специалистов: оптимизаторов, аккаунт-менеджеров hh.ru/employer/18738 User-agent: * Disallow:
Секреты быстрой индексации в Яндекс и Google
Гость - Игорь, давно не слышал от вас ничего дельного по seo, только и умеете, что других высмеивать - то на конференции, то в комментариях. Если вы такой умный, что же не публикуете тут свои статьи? Боитесь, что также высмеют?
Кому бесплатный билет на базовый курс Excel от Макса Уварова?
Maxim Uvarov
10
комментариев
0
читателей
Полный профиль
Maxim Uvarov - Дайте какой-нибудь контакт в социальных сетях, где видно ваше имя?
Кейс: +1500000 трафика для игрового портала
Артур Латыпов
17
комментариев
0
читателей
Полный профиль
Артур Латыпов - Текущие данные проекта joxi.ru/12M7ZKRs4nLNnr - трафик проекта joxi.ru/n2YRZ7Jhj4nlPA - распределение по источникам Про принципиальные изменения в работе мы не договоримся? :)
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
285
Комментариев
262
Комментариев
171
Комментариев
169
Комментариев
137
Комментариев
131
Комментариев
123
Комментариев
97
Комментариев
97
Комментариев
92
Комментариев
80
Комментариев
68
Комментариев
67
Комментариев
60
Комментариев
55
Комментариев
52
Комментариев
45
Комментариев
44
Комментариев
44

Отправьте отзыв!
Отправьте отзыв!