Интернет-маркетологу и специалисту по контекстной рекламе для работы со счётчиками веб-аналитики часто приходится прибегать к помощи разработчиков либо самому работать с кодом сайта. 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 код счётчика не требуется, достаточно будет идентификатора отслеживания. Для нахождения идентификатора:
- Войдите в аккаунт Google Аналитики.
- Нажмите Администратор.
- В раскрывающемся меню в столбце АККАУНТ выберите нужный аккаунт.
- В меню РЕСУРС выберите нужный ресурс.
- В разделе РЕСУРС выберите Отслеживание > Код отслеживания. Идентификатор отслеживания будет показан в верхней части страницы.
(выдержка из справки по 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:
- Когда пользователь заходит на любую страницу сайта, срабатывает триггер «All Pages».
- При срабатывании этого триггера запускаются два тега: с настройками GA и ЯМ.
- В GA и ЯМ передаётся информация о просмотре страницы, а также все остальные данные, которые собирают системы аналитики.
При этом нет никакой разницы, установлены счётчики через GTM или непосредственно в код сайта.
Разметка целей в коде
Цели вида «Посещение страницы X» или «Просмотр N страниц» вы можете настроить непосредственно в системах аналитики. А вот для настройки событий — нажатий кнопок и отправки форм — вам снова понадобится доступ к коду сайта. Это второй и последний раз, когда нам потребуется помощь разработчика при настройке веб-аналитики через GTM.
Для каждой формы и кнопки, которые мы хотим отслеживать, необходимо задать уникальный идентификатор. Проще всего это сделать с помощью HTML-атрибута “id” внутри тега для кнопки или формы. Например:
id=”Button1”
id=”BottomForm”
Иногда идентификаторы уже присутствуют, но чаще приходится расставлять их самому. Может возникнуть вопрос, зачем же тогда нужен GTM, если всё равно надо что-то прописывать в коде? На это есть как минимум три причины:
- Проставить id гораздо проще, чем писать полную строку кода для передачи в GA или ЯМ.
- Для каждой цели можно задать один триггер, при срабатывании которого цели будут передаваться в обе системы.
- В дальнейшем можно менять настройки целей без необходимости править код сайта.
Кроме того, GTM даёт огромное количество других возможностей, рассказ о которых выходит за рамки этой статьи.
Теперь перейдём к конкретике. Предположим, у нас есть лендинг со следующими объектами, взаимодействие с которыми мы хотим отследить:
- Кнопка «Заказать звонок» в шапке сайта.
- Форма заказа звонка, которая открывается при нажатии этой кнопки:
- Кнопка «Заказать» в блоке «Услуги».
- Форма, которая всплывает при нажатии этой кнопки:
- Нижняя форма заявки:
Составим таблицу идентификаторов для этих объектов, а также наименования ярлыков для 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 на сайт для будущих экспериментов и более детальной аналитики в дальнейшем.