Google Tag Manager (GTM) — перспективное решение от Google, которое позволяет размещать пользовательские скрипты на страницах сайта без непосредственного вмешательства в его код. GTM дает возможность не только легко добавлять и обновлять скрипты сервисов Google на вашем сайте, но и задавать правила активации различных тегов. Фактически, все, что вам нужно — аккаунт в службе GTM и единичный доступ к начинке сайта. Все остальные настройки производятся через удобный пользовательский интерфейс и не требуют участия IT-шников. На примере сайта нашего клиента я покажу, как настроить диспетчер тегов и на что обратить пристальное внимание.

Открыть в майнд-карту в новом окне

Итак, единственное действие, которое будет требовать доступа к коду сайта, — это само размещение скрипта GTM, т.н. «контейнера».

Важно: если на сайте размещен GTM, то скрипты, которые будут через него выводиться, не должны больше присутствовать на сайте. Итого, если мы размещаем через GTM код Google Analytics (GA), то размещенный ранее непосредственно в коде сайта код GA следует убрать, иначе они будут конфликтовать.

Разместив код GTM, мы получаем мощный и готовый к работе инструмент. Теперь мы можем помещать в контейнер GTM как готовые функции, которые уже предусмотрел Google (GA, события, транзакции, ремаркетинг и др.), так и свои скрипты, которые можно размещать как произвольный код («Яндекс.Метрика», например). И все это через интуитивно понятный веб-интерфейс, без доступа к коду сайта. Весомым преимуществом будет и то, что клиент не сможет испортить размещенные скрипты, ну, разве что сам код контейнера :)

Важно: все производимые с GTM действия, включая проверку их работоспособности, не должны проводиться в браузере, переведенном в режим инкогнито! Какой-либо абсолютной зависимости я не обнаружил, но поведение GTM в анонимном режиме нестабильно. Очевидно, проблема в работе с файлами cookies.

Установка и настройка диспетчера тегов Google

А теперь приступим к самому процессу интеграции GTM с вашим сайтов. Все скриншоты ниже были сделаны во время настройки диспетчера тегов для нашего клиента «Универсального агентства по продаже авиаперевозок».

Размещение кода контейнера

Сначала необходимо зарегистрироваться в сервисе GTM: google.com/tagmanager. После введения e-mail и пароля аккаунта Google, который вы будете использовать в этих целях, создаем аккаунт в GTM. Это верхний уровень иерархии в сервисе.

GTM 1

Жмем «далее» и переходим к следующему этапу: это базовые настройки для создания аккаунта и самого контейнера.

GTM 2

Именем для контейнера может служить адрес вашего сайта. Далее указываем, где будет расположен контейнер (в нашем случае это «веб-страницы»). Добавлять домен сейчас не обязательно, это можно сделать и позднее. Выбираем правильный часовой пояс и кликаем на «Создать аккаунт и контейнер». Вам будет предложено согласиться с условиями использования. Тут выбора нет, соглашаемся :)

В результате получаем код контейнера:

GTM 3

Теги добавим позже.

Теперь скопируйте предложенный код и разместите в шаблоне сайта сразу после открывающего тега body. В дальнейшем код контейнера можно найти с помощью меню: Пользователи и настройки → Настройки. Там же можно менять введенные ранее параметры (название контейнера, часовой пояс).

Поздравляю, на этом работа, которая требует доступа к сайту, завершена! Все остальные действия проводятся только в интерфейсе GTM.

Понятия в GTM. Установка тега GA

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

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

Слева направо: тег, правило, макрос.

GTM 4

Тег

Тег – это, по сути, функция или скрипт, который вы хотите выполнять.

Разберем на примере установки кода GA. Этот код может быть размещен как пользовательский тег на сайте. Чтобы создать новый тег, нужно кликнуть на флажок в правом верхнем углу экрана.

GTM 5

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

Однако это не совсем «кошерный» путь. В GTM уже предусмотрен функционал, который позволит работать с GA и подобными тегами удобнее. Создавая тег, вы увидите и другие варианты:

GTM 6

После того, как мы зададим имя тега (например, GA) и выберем тип тега Google Analytics, появятся новые поля. Далее достаточно ввести идентификатор веб-ресурса из GA — UA-XXXXXXXX-X. Найти его можно в настройках, в интерфейсе GA: Администратор → Ресурс → Код отслеживания. Тип отслеживания не меняем, по умолчанию установлен нужный нам «просмотр страницы». Нажимаем «сохранить» и переходим к настройке правил.

GTM 7

Правило

Правило — это условия выполнения тега. Его можно установить как при создании самого тега, так и отдельно. Потом лишь нужно будет «приклеить» правило к соответствующему тегу.

GTM 8

В данном случае нам необходимо, чтобы код GA выполнялся на всех страницах сайта. Мы создаем условие, которому будут соответствовать все URL сайта.

В дальнейшем мы разберем и другие варианты условий:

GTM 9

Макрос

{{url}} — это макрос, т.е. заранее заданная функция, которая проверяет соответствие url страницы заданным параметрам. В GTM уже «из коробки» доступен основной набор макросов, кроме того, есть возможность создать и свои функции, если предложенных в GTM не достаточно.

Например, нам нужно проверять значение DOM-элемента на странице. Мы отслеживаем заполнение формы, и нам нужно ее идентифицировать среди прочих на странице. Предположим, что форма отличается элементом class.

GTM 10

Так, при создании правила для выполнения тега отслеживания события (который мы разберем позднее) мы сможем задать условие, при котором данное событие будет выполняться. В результате мы внедрим логику, согласно которой при соответствии элемента class значению form-inline будет выполняться тег отслеживания события. Макрос нужен для того, чтобы в будущем мы могли использовать его для множества правил и других тегов, когда понадобится проверить соответствие элемента calss нужному нам значению.

Работа с тегом Google Analytics

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

Кликнем на созданный тег GA, что переведет нас к странице его настройки.

Там будет кнопка «создать правило» и диалоговое окно:

GTM 11

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

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

В правом верхнем углу мы найдем:

GTM 12

Кликаем на синюю кнопку: версия будет создана, а надпись на синей кнопке изменится на «Опубликовать». Теперь GTM будет работать лишь с тегами из нашей версии контейнера.

Итак, мы успешно установили счетчик — все должно работать. Проверить это можно в консоли браузера (F12 → вкладка Network). При обновлении страницы мы сможем найти упоминание о выполнении ga.js. Также можно просмотреть активность в разделе «В режиме реального времени» в отчетах GA.

Настройка отслеживания событий GA

Напомню, что данный мануал основан на решении для сайта ufsa.com.ua (бронирование авиабилетов). Наша задача: отслеживать каждый этап выбора рейса и его оплаты, чтобы обнаружить места, где клиенты уходят, не завершив процесс оформления.

Мы настроим следующие события для GA (категория, действие, ярлык):

Жирным выделены конечные этапы последовательности заказа.

  1. Заказ билета, Выбор рейса, Клик Поиск рейса
  2. Заказ билета, Выбор рейса, Купить за
  3. Заказ билета, Выбор рейса, Забронировать
  4. Заказ билета, Выбор рейса, Оплата
  5. Заказ билета, Выбор рейса, Оплата картой
  6. Заказ билета, Выбор рейса, Оплатить в офисе
  7. Заказ билета, Выбор рейса, Оплатить в офисе — Печать подтверждения
  8. Заказ билета, Выбор рейса, Распечатать счет
  9. Заказ билета, Выбор рейса, Распечатать счет — Напечатать
  10. Заказ билета, Выбор рейса, Распечатать счет — Отправить

Для лучшего понимания процесса стоит самому пройти процедуру бронирования на сайте ufsa.com.ua.

Важно: далее я не стану постоянно писать о создании новой версии и ее публикации. Это стоит делать после внедрения каждого нового тега.

Теория

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

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

Ознакомьтесь со справкой Google для лучшего понимания вопроса.

Нас интересует три тега прослушивания событий: прослушивание кликов, прослушивание кликов по ссылкам и прослушивание форм.

Настройка тегов прослушивания

Начнем с создания тега «Прослушивание кликов».

  1. Создаем правило, согласно которому он будет выполняться на всех страницах сайта.
  2. Выбираем типа тега: Блок прослушивания событий → Прослушивание кликов.
  3. Задаем ему правило активации: {{url}} равен .*, по аналогии с кодом GA.
  4. Сохраняем.

GTM 13

Аналогично поступаем с остальными тегами прослушивания:

  1. Прослушивание кликов по ссылками
    • Выбираем тип тега: Блок прослушивания событий → Прослушивание кликов по ссылке
    • Задаем ему правило активации: {{url}} равен .*
  2. Прослушивание отправок форм
    • Выбираем тип тега: Блок прослушивания событий → Прослушивание отправок форм
    • Задаем ему правило активации: {{url}} равен .*

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

Отслеживание поддоменов

Функционал бронирования билетов вынесен на поддомен flight.ufsa.com.ua из-за особенностей системы.

Чтобы настроить отслеживание поддомена, заходим в созданный ранее тег GA и разворачиваем меню дополнительных настроек. Там мы найдем графу «Имя домена», отметим ее галочкой и укажем наш домен с точкой перед ним, как мы делали в стандартном коде GA (SetDomainName) — .ufsa.com.ua.

GTM 14

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

Настройка отслеживания событий GA

1) Заказ билета, Выбор рейса, Клик «Поиск рейса»

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

Сперва нам нужно создать тег события GA.

Создаем тег с названием «Кнопка — Поиск рейсов», выбираем тип тега Google Analytics, изменяем тип отслеживания с «Просмотр страниц» на «Событие» и вносим наш идентификатор отслеживания из GA.

Далее указываем параметры отслеживания события.

  • Категория: Заказ билета
  • Действие: Выбор рейса
  • Ярлык: Клик поиск рейса

GTM 21

Теперь зададим условие его выполнения.

Важно:

  • Можно создать несколько правил для тега, в каждом по одному условию. При создании под каждое условие отдельного правила, событие будет срабатывать при выполнении любого из правил. Т.е. работает логика «или».
  • Можно создать одно правило и задать в нем несколько условий. При создании нескольких условий в одном правиле, включится логика «и» — событие сработает только при выполнении всех условий.

GTM собирает абсолютно все заполнения форм на сайте, и теперь следует найти среди них нужные нам. Создадим правило под названием «Кнопка поиск рейсов». Первым условием станет выполнение тега прослушивания отправок форм, вторым — соответствие id формы нужному нам значению.

GTM 16

Макрос {{element id}} проверит соответствие DOM-элемента id= нужному нам значению. Такой макрос работает в GTM из коробки. Собственно, все использованные здесь макросы уже есть в GTM.

Макрос {{event}} выделит среди всех событий именно те, которые фиксирует тег «Прослушивание отправок форм».

Сохраняем, создаем версию, публикуем, через минуту-две (GTM может подхватить новые настройки с некоторым опозданием) проверяем получение события в GA в разделе «Он-лайн отслеживания», подраздел «События».

2) Заказ билета, Выбор рейса, Купить за

В результатах поиска рейсов на нашем сайте выдается список готовых решений для бронирования с кнопкой «Купить за NN грн.». Нам нужно повесить выполнение события на эту кнопку.

Создаем тег отслеживания события, называем его «Выбор рейса», задаем названия категории, действию, ярлыку и прописываем наш идентификатор отслеживания. Все так же, как и с предыдущим событием.

Далее настраиваем правило выполнения:

GTM 17

Т.к. эта кнопка реализована как ссылка, а не как форма, нам необходимо выделить события, которые фиксирует тег прослушивания кликов по ссылке. Сделаем это по условию gtm.linkClick.

Нужную нам ссылку на странице мы выделим из общей массы за счет ее целевого URL. Ссылка в коде выглядит таким образом:

 

Мы можем указать как условие, что ссылка должна содержать booking__info. Этот кусок одинаков для всех ссылок на странице, которые позволяют выбрать один из вариантов перелета, — что нам, собственно, и нужно.

Далее зададим макросу {{element url}}, который проверяет элемент href у ссылки, условие: он также должен содержать в себе booking__info.

Событие готово.

3) Заказ билета, Выбор рейса, Забронировать

После выбора определенного варианта перелета клиент попадает на страницу оформления, где вносит личные данные и жмет кнопку «забронировать». Отследим и это событие.

Здесь мы работаем с элементом button, а не ссылкой или формой. Создадим, как и ранее, тег отслеживания событий, зададим нужные данные и перейдем к созданию правила.

Нас интересует выполнение тега прослушивания кликов. Потому макросу {{event}} мы скормим значение gtm.click.

Тип button имеет DOM-элемент class, по которому мы сможем его идентифицировать.

gtm20

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

Событие работает.

Остальные события настроены по тому же принципу. Все тонкости настройки показаны в первых трех вариантах, потому расписывать остальные нет смысла.

Пост фактум

Итак, на выходе мы получаем статистику поведения пользователей в процессе оформления брони авиабилета, с которой мы теперь можем работать в GA:

GTM 19

Стоят ли эти данные времени, потраченного на настройку GTM? Однозначно — да.

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

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

У вас остались вопросы? Буду рад ответить на них в комментариях!