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

Как работает GTM

В этом разделе мы в общих чертах расскажем об устройстве и принципе работы GTM. Ниже приведена подробная пошаговая инструкция по установке и настройке счётчиков и целей веб-аналитики.

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

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

Переменные бывают встроенные и пользовательские и служат для хранения различных данных: URL’ов, настроек аналитики, идентификаторов и других.

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

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

Общая логика работы в GTM следующая: 

настраиваются нужные нам переменные, которые затем используются в тегах → настраиваются триггеры на нужные нам события → настраиваются теги, которые должны срабатывать при этом событии.

Теперь перейдём к практике.

Установка счётчиков веб-аналитики

Итак, нам необходимо установить на сайт счётчики веб-аналитики и настроить цели.

Прежде всего необходимо создать новый аккаунт и контейнер в нём. В одном аккаунте может быть несколько контейнеров. Зайдите в GTM по адресу https://tagmanager.google.com/

Нажмите кнопку «Создать аккаунт»:

Откроется окно создания аккаунта и контейнера:

Здесь указываем следующую информацию:

  • Название аккаунта — задаём понятное название, чтобы потом не запутаться. Обычно это название компании.
  • Указываем свою страну.
  • Задаём название контейнера. Удобнее всего указать название сайта.
  • Указываем целевую платформу. В нашем случае — это веб-сайт.

Нажмите кнопку «Создать» и примите условия пользовательского соглашения. Откроется окно с кодом контейнера:

Этот код необходимо установить на каждую страницу сайта внутри HTML-тегов <head> и <body>. В том числе на страницу пользовательского соглашения и страницу 404. Если используется CMS-система, то код устанавливается в шаблоны страниц. Это первый раз, когда нам понадобится помощь разработчиков.

Установка счётчика Google Analytics

Создайте новый счётчик в Google Analytics (GA). Для его установки через GTM код счётчика не требуется, достаточно будет идентификатора отслеживания. Для нахождения идентификатора:

  1. Войдите в аккаунт Google Аналитики.
  2. Нажмите Администратор.
  3. В раскрывающемся меню в столбце АККАУНТ выберите нужный аккаунт.
  4. В меню РЕСУРС выберите нужный ресурс.
  5. В разделе РЕСУРС выберите Отслеживание > Код отслеживания. Идентификатор отслеживания будет показан в верхней части страницы.

(выдержка из справки по GA).

Настройки счётчика GA лучше всего хранить в переменной. В этом случае при необходимости внести какие-либо изменения в настройки не надо будет изменять тег, достаточно будет поправить переменную. Для этого в рабочей области GTM зайдите в переменные и нажмите кнопку «Создать»:

Откроется окно настройки переменной. Задайте для неё понятное название. Например, “GA-Conf” и кликните по области окна «Конфигурация переменной»:

Откроется окно выбора типа переменной. Здесь в разделе «Утилиты» выберите тип «Настройки Google Analytics»:

В открывшемся окне следует ввести идентификатор отслеживания вашего счётчика:

Для работы с рекламой сразу рекомендуется включить дополнительный сбор данных. Для выберите «Дополнительные настройки» → «Реклама» → галочка на «Включить функции для контекстно-медийной сети»:

Остальные настройки можно пока не трогать. Нажмите кнопку «Сохранить». Переменная с настройками GA готова. В дальнейшем в неё можно вносить изменения для подключения дополнительных функций.

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

Откроется окно настройки тега. Задайте здесь понятное имя тега (например, “GA Main”) и кликните в поле «Конфигурация тега»:

Выберите тип «Google Аналитика – Universal Analytics»:

Далее настройте параметры тега. В качестве типа отслеживания устанавливается «Просмотр страницы», а в поле «Настройки Google Analytics» выберите из выпадающего списка ранее созданную переменную “GA-Conf”. Остальные настройки можно не трогать:

Далее кликните в поле «Триггеры» для выбора триггера. В данном случае нет необходимости создавать новый триггер, используем готовый триггер «All Pages»:

Вибираем этот триггер и нажимаем кнопку «Сохранить». Теперь при просмотре любой страницы в GA будет передаваться информация о просмотре этой страницы.

Установка счётчика Яндекс.Метрики

Для установки счётчика Метрики можно использовать тот же триггер «All Pages», что и для счётчика GA, но нужно создать отдельный тег.

Создайте и настройте новый счётчик Метрики для вашего сайта. Для его установки через GTM вам потребуется его код.

В разделе «Теги» нажмите «Создать», дайте тегу понятное название (например, “YM Main”), кликните в область «Конфигурация тега» и выберите тип «Пользовательский HTML»:

В поле для HTML-кода поместите код счётчика из Метрики:

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

В поле «Триггеры» выберите существующий триггер «All Pages» и сохраните тег. Теперь счётчик Метрики настроен. Но заработает он только после того, как контейнер будет опубликован, об этом позже.

Ещё раз для понимания логики работы GTM:

  1. Когда пользователь заходит на любую страницу сайта, срабатывает триггер «All Pages».
  2. При срабатывании этого триггера запускаются два тега: с настройками GA и ЯМ.
  3. В GA и ЯМ передаётся информация о просмотре страницы, а также все остальные данные, которые собирают системы аналитики.

При этом нет никакой разницы, установлены счётчики через GTM или непосредственно в код сайта.

Разметка целей в коде

Цели вида «Посещение страницы X» или «Просмотр N страниц» вы можете настроить непосредственно в системах аналитики. А вот для настройки событий — нажатий кнопок и отправки форм — вам снова понадобится доступ к коду сайта. Это второй и последний раз, когда нам потребуется помощь разработчика при настройке веб-аналитики через GTM.

Для каждой формы и кнопки, которые мы хотим отслеживать, необходимо задать уникальный идентификатор. Проще всего это сделать с помощью HTML-атрибута “id” внутри тега для кнопки или формы. Например:

id=”Button1”

id=”BottomForm”

Иногда идентификаторы уже присутствуют, но чаще приходится расставлять их самому. Может возникнуть вопрос, зачем же тогда нужен GTM, если всё равно надо что-то прописывать в коде? На это есть как минимум три причины:

  1. Проставить id гораздо проще, чем писать полную строку кода для передачи в GA или ЯМ.
  2. Для каждой цели можно задать один триггер, при срабатывании которого цели будут передаваться в обе системы.
  3. В дальнейшем можно менять настройки целей без необходимости править код сайта.

Кроме того, GTM даёт огромное количество других возможностей, рассказ о которых выходит за рамки этой статьи.

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

  1. Кнопка «Заказать звонок» в шапке сайта.
  1. Форма заказа звонка, которая открывается при нажатии этой кнопки:
  1. Кнопка «Заказать» в блоке «Услуги».
  1. Форма, которая всплывает при нажатии этой кнопки:
  1. Нижняя форма заявки:

Составим таблицу идентификаторов для этих объектов, а также наименования ярлыков для GA:

ОбъектИдентификатор (ID в коде)Ярлык для GA
Кнопка в шапкеButton1Нажатие кнопки заказа звонка
Форма заказа звонкаCallFormОтправка формы заказа звонка
Кнопка в блоке «Услуги»Button2Нажатие кнопки в блоке Услуги
Форма в блоке «Услуги»Form2Отправка формы из блока Услуги
Нижняя формаBottomFormОтправка нижней формы

Эту таблицу вместе со скриншотами нужно передать разработчикам. Ярлыки можно не передавать, они потом пригодятся нам. Пока разработчики размечают объекты в коде, вернёмся в GTM.

Настройка триггеров для событий

Чтобы не создавать отдельный триггер и тег для каждого события воспользуемся переменными. Для начала необходимо активировать встроенные переменные “Click ID” и “Form ID”, если по умолчанию их нет. Для этого зайдите в раздел «Переменные» и нажмите «Настроить» в области «Встроенные переменные». Здесь отметьте галочкой нужные переменные:

Закройте это окно и нажмите «Создать» в области «Пользовательские переменные». Вам нужны две переменные: для кнопки и для формы. Создадим переменную для кнопки.

Задайте понятное название (например, “ButtonName”) и кликните в области «Конфигурация переменной». Выберите тип перменной «Таблица поиска»:

В поле «Входная переменная» выберите “Click ID”, а дальше заполните таблицу с помощью кнопки «Добавить строку». Сюда надо перенести данные по всем кнопкам из таблицы выше:

Во «Входных данных» укажите ID, в «Выходных» — название ярлыка для GA. Таким образом для каждого ID мы поставили в соответствие свой ярлык. Нажмите «Сохранить».

Теперь создайте ещё одну переменную типа «Таблица поиска» и заполните аналогичную таблицу для форм. Только вместо “Click ID” используйте “Form ID”:

Теперь нужно создать триггеры на отправку форм и нажатие кнопок. Перейдите в раздел «Триггеры» и нажмите кнопку «Создать». Создадим триггер для кнопки. Задайте название триггера (“Button” в моём случае) и кликните в область «Настройка триггера». В подразделе «Клики» выберите «Все элементы»:

В настройках триггера отметьте «Некоторые клики» и укажите условие. В нашем случае: “Click ID” содержит “Button”. Если общих элементов в идентификаторах кликов нет, можно для каждого объекта создать свою строчку с условием. Строчки добавляются / удаляются кнопками + / -.

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

Сохраните триггер и настройте аналогичный для форм. Создайте новый триггер и выберите тип «Отправка формы»:

Выберите «Некоторые формы» и укажите условие активации:  “Form ID” содержит “Form”. Нажмите «Сохранить».

Настройка целей для Google Analytics

Чтобы события передавались в GA, настроим соответствующий тег. Перейдите в раздел «Теги» и создайте новый тег. Назовём его “GA ButtonEvent”. Выберите тип “Google Аналитика – Universal Analytics”. Укажите в поле «Переменная настроек» имя переменной с настройками GA и выберите тип отслеживания «Событие»:

Заполните параметры отслеживания событий. Для кнопки:

Категория — Button

Действие — Click

Ярлык — {{ButtonName}}

“ButtonName” — это наша переменная с ярлыками кнопок. Её необходимо указывать в фигурных скобках {{}}, как показано выше, либо можно нажать плюсик справа от поля и выбрать переменную из списка. 

Кликните в области триггеры и выберите ранее созданные теги “Button” и “ButtonLink”. Сохраните тег.

Теперь настроим тег для форм. Все настройки будут такими же, кроме параметров событий и тегов. Поэтому можно создать тег копированием. Откройте только что созданный тег “GA ButtonEvent”, выберите меню в углу и нажмите «Копировать»:

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

Категория — Form

Действие — Submit

Ярлык — {{FormName}}

В области «Триггеры» нажмите на «карандаш» и удалите существующие триггеры, затем добавьте триггер “Form”. Сохраните тег.

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

При этом в отчётах о событиях вы можете просматривать ярлыки событий и понимать, какая именно кнопка была нажата.

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

Теперь для понимания повторим всю цепочку передачи цели в GA:

Пользователь нажимает кнопку на сайте → По Click ID активируется соответствующий триггер → Запускается связанный с этим триггером тег и в GA передаются параметры события → GA фиксирует срабатывание цели по параметрам события

Настройка целей в Яндекс.Метрике

Для передачи целей в ЯМ создайте тег типа «Пользовательский HTML» и пропишите в нём код отслеживания события Метрикой. 

Код выглядит следующим образом.

Для кнопки:

<script>

  yaCounterXXXXXXX.reachGoal(‘{{Click ID}}’)

</script>

Для формы:

<script>

  yaCounterXXXXXXX.reachGoal(‘{{Form ID}}’)

</script>

Где XXXXXXX — это номер счётчика Метрики.

В теге для кнопки выберите триггеры “Button” и “ButtonLink”, для формы — триггер “Form”. На этом настройка тегов для Метрики закончена.

В самой Метрике настройте цели типа JavaScript-событие, где в качестве идентификатора укажите ID из нашей таблицы для разработчиков.

Публикация контейнера и проверка срабатывания целей

Для публикации контейнера нажмите кнопку «Отправить»:

Укажите название версии и при необходимости добавьте описание:

Для проверки работы счётчиков и целей нажмите кнопку «Предварительный просмотр», затем откройте отдельную вкладку браузера и зайдите на сайт, на котором установлен данный контейнер GTM.

Внизу экрана браузера появится консоль GTM. В левой части идёт список событий на сайте, в правой — срабатывание тегов при данных событиях, переменные и другие параметры:

Здесь мы видим, что при заходе на сайт сработали главные теги счётчиков. Теперь можно проверить срабатывание целей. Найдите на сайте кнопку, на которую мы настроили отслеживание, и кликните по ней. Слева мы теперь видим событие Click или Link Click. Можно его выбрать и посмотреть, какие при этом сработали теги:

Мы видим, что сработали теги, фиксирующие нажатие на кнопку. Можно проверить срабатывание цели в GA в «Отчёте в реальном времени»:

В консоли GTM также можно нажать Variables и посмотреть, какие при этом передаются переменные.

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

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

В этой статье мы рассмотрели самые базовые возможности GTM в настройке веб-аналитики. На самом деле возможности GoogleTag Manager намного шире. Здесь можно добавлять гораздо более сложные цели аналитики, настраивать расширенную электронную торговлю, настраивать GoogleOptimize, отслеживать пользователей по User ID и делать ещё множество интересных вещей. Поэтому рекомендуется установить код GTM на сайт для будущих экспериментов и более детальной аналитики в дальнейшем.