Google Tag Manager позволяет упростить интеграцию кода от сторонних сервисов на сайте. Это могут быть пиксели социальных сетей, системы аналитики и т.д. Разберем подробнее, что из себя представляет данный инструмент, его преимущества и недостатки, рассмотрим инструкцию по его установке и примеры настроек.
Что такое Google Tag Manager?
Google Tag Manager – набор инструментов, позволяющих работать с различными тегами на сайте. В качестве тегов могут выступать фрагменты исполнительного кода различных систем, например, рекламных или аналитических. Принцип действия прост: на сайт интегрируется код Google Tag Manager в виде специального контейнера. Далее сторонние службы, которые для своей работы также требуют установки кода, добавляются через интерфейс GTM и функционируют внутри этого контейнера.
Преимущества и недостатки GTM
Перед интеграцией GTM следует учесть все его преимущества и недостатки.
К преимуществам использования диспетчера тегов относятся:
- Сокращение количества кода на странице благодаря тому, что устанавливается один контейнер самого GTM, а далее все подключаемые службы функционируют из-под него.
- При установке сторонних служб не требуется редактирование кода страниц сайта. Достаточно один раз установить Google Tag Manager и через его интерфейс интегрировать дополнительные фрагменты кода.
- Этот пункт вытекает из предыдущего, т.к. после установки GTM не требуется постоянного обращения к программисту.
- Тестирование вносимых изменений в режиме предпросмотра позволяет избежать ошибок на сайте: добавляем новый код, тестируем на ошибки и только после публикуем.
- Наличие шаблонов для быстрой установки популярных служб, таких как системы аналитики, пиксели и т.д.
- Кроме предустановленных шаблонов, диспетчер позволяет создавать пользовательские теги.
- Все установленные теги с помощью GTM загружаются поочередно, что положительно сказывается на скорости загрузки страницы, в сравнении, если бы код служб был установлен напрямую.
- GTM запоминает хронологию вносимых изменений, в случае сбоя есть возможность восстановления более ранней версии.
- Все дополнительные службы: пиксели, счетчики и прочие скрипты, хранятся в едином месте.
- Возможность распределения прав доступа к содержимому диспетчера.
Недостатки GTM:
- Для настройки сложных тегов, скорее всего, понадобятся базовые знания HTML и JavaScript.
- Скрипты, установленные через GTM, хранятся в едином контейнере, повреждение которого приведет к сбою в работе всех служб.
- GTM позволяет устанавливать скрипты напрямую на сайте (т.е. необязательно делать это через интерфейс диспетчера), поэтому перед установкой новых служб, следует проверять их наличие в диспетчере, чтобы не возникли дубли.
Как установить Google Tag manager?
Для установки GTM на сайте следует разместить специальный код инструмента. Чтобы его получить необходимо зарегистрироваться и авторизоваться в системе диспетчера, после чего создать аккаунт.
Создание аккаунта
Выбираем целевую платформу
Далее система выдаст два фрагмента кода, которые устанавливаются на сайт в соответствии с указанной инструкцией. Для сайтов на WordPress существуют специальные плагины, которые позволяют устанавливать GTM без вмешательства в код со стороны пользователя. В качестве рекомендации выделим плагин .
Копируем код и вставляем на сайт
Если по какой-то причине первоначальное окно с кодом было закрыто, то эти фрагменты можно получить в другом месте: «Администрирование» – «Установить Google Менеджер тегов».
Код всегда можно найти здесь
Код для вставки на сайт
Что такое теги?
Теги представляют собой непосредственно тот сторонний код, который планируется установить на сайт с помощью GTM. У тега может быть множество функций, например, отслеживание переходов на сайт, ремаркетинг/ретаргетинг, аналитика рекламы и т.д.
Теги бывают:
- Рекомендуемые. Для них подготовлены шаблоны настроек, достаточно указать идентификаторы.
Рекомендуемые теги
- Специальные. Позволяют встраивать пользовательский исполнительный код.
Специальные теги
- Дополнительные. В этом списке находятся теги сторонних сервисов.
Виды дополнительных тегов
Создание тега доступно на Рабочей области в соответствующем пункте меню.
Создаем теги
Выбираем тип тега
Что такое триггеры?
В качестве триггеров указываются условия, по достижению которых будет срабатываться тег:
- Просмотр страницы. В этом случае, тег срабатывает при загрузке указанной страницы в браузере.
- Клик. Активация тега произойдет по клику на элементе. В роли элемента может выступать как любой кликабельный объект, так и конкретно взятая ссылка.
- Взаимодействие с пользователем. Данный триггер позволяет, например, измерить глубину прокрутки страницы и прочие варианты поведения пользователя.
- Пользовательское событие. Если стандартные варианты не подошли, можно реализовать пользовательский сценарий, например, отслеживание форм с предопределенными действиями по умолчанию.
Виды триггеров
Что такое переменные?
В переменных указываются условия для срабатывания треггеров. Иными словами, чтобы триггер сработал, необходимо совпадение его значения со значением переменной.
Переменные, как теги и триггеры, создаются и настраиваются на отдельной странице GTM.
Переменные
Переменные бывают следующих типов:
- Страницы. В этом случае доступен выбор вида URL-адреса: полный, относительный, имя хоста и источник запроса.
- Клики. Указываются идентификаторы, классы и прочие атрибуты HTML-элементов страницы.
- Формы. Категория похожа на клики, но в роли отслеживаемых объектов выступают формы.
- Утилиты. Здесь можно использовать идентификатор пользовательского контейнера или прочей рабочей области.
- Ошибки. Категория для разработчиков, предназначена для аналитики и выявления ошибок работы GTM.
- История. Эта переменная собирает информацию о том, по каким URL-адресам переходил пользователь в открытой вкладке браузера. Это позволяет перемещаться по истории и добавлять или изменять содержимое элемента.
Примеры создания тегов в Google Tag Manager
В качестве примеров рассмотрим настройку популярных сценариев.
Подключение Google Analytics
- В Рабочей области Google Tag Manager открываем страницу создания тегов – создаем тег. Не забываем указывать соответствующее название, это позволит в будущем быстро ориентироваться по всему массиву тегов.
- В качестве Конфигурации тега выбираем готовый шаблон «GA: Universal Analytics».
- Убеждаемся, что в пункте «Типа отслеживания» выбран вариант «Просмотры страницы».
- В пункте настройки GA Аналитики создаем новую переменную,
Создаем новую переменную
5. В ней задаем идентификатор отслеживания, который относится к GA Analytics (взять его можно в настройках ресурса).
Задаем идентификатор отслеживания
6. Далее настраиваем поле Триггеры, здесь указываем All Pages.
7. Сохраняем созданный тег.
Для того, чтобы изменения вступили в силу, их следует опубликовать – кнопка «отправить» в правом верхнем углу интерфейса.
Нажимаем «отправить»
Также созданный тег доступен для редактирования, для этого достаточно вернутся на страницу тегов.
Подключение Яндекс.Метрики
Подключение Яндекс.Метрики в Google Tag Manager происходит по аналогии, но с небольшими изменениями.
- Заходим на страницу Тегов и создаем новый.
- В настройке конфигурации тега выбираем «Пользовательский HTML» – этот режим позволит указать любой фрагмент кода.
- Теперь переходим в кабинет Яндекс.Метрики, открываем настройки и находим Код счетчика. Копируем его.
- После чего, скопированный код вставляем в поле HTML-тега.
- В роли триггера должно выступать значение All Pages.
- Сохраняем тег и публикуем изменения в GTM.
Настройка целей через Google Tag Manager
Перед настройкой выбираем событие, которое хотим отслеживать. Например, это будет клик по ссылке, ведущие на страницу test-page.html.
- Заходим «Переменные – Настроить».
- Выбираем следующие переменные, которые могут пригодиться для решения поставленной задачи:
a. Click Classes – здесь можно указать class объекта.
b. Click URL – отслеживание ссылки с определенным адресом.
c. Click Text – клик по ссылке с указанным текстом.
Выбираем переменные
Переменные
3. Далее создаем триггер.
4. Т.к. у нас условие – срабатывание события только при переходе по ссылке на указанную страницу, то выбираем пункт «Только ссылки».
Выбираем тип триггера
5. После чего выбираем «Некоторые клики по ссылкам», откроются дополнительные настройки, в которых следует указать Click URL (ранее созданная переменная) «равно» и указываем URL-адрес страницы.
Выбираем «Некоторые клики по ссылкам»
6. Сохраняем переменную и публикуем.
Цели для Яндекс.Метрики
- Идем в теги и создаем новый, не забываем про корректные названия.
- Шаблонов настроек для этого случая нет, поэтому выбираем Пользовательский HTML.
- В качестве HTML указываем следующий код:
<script>
yaCounter12345678.reachGoal('ClickOnBestBanner');
</script>
*Цифры – идентификатор счетчика Яндекс.Метрики.
4. В качестве триггера у тега указываем созданный для отслеживания переходов по указанной ссылке.
Цели для GA
- Создаем тег.
- В конфигурации указываем «Google Analytics – Universal Analytics».
- В качестве типа отслеживания: Событие.
- Здесь открывается 4 поля для заполнения:
a. Категория (UserEvents) – действия пользователя.
b. Действие (Click) – сам клик по ссылке.
c. Ярлык (test-page) – информация для аналитика.
5. В поле «Настройки Гугл Аналитики» выбираем переменную, связанную с счетчиком GA.
Выбираем нужную переменную
6. В качестве триггера указываем ранее созданный для отслеживания переходов.
Публикуем изменения и проверяем.
Мы рассмотрели самые основные вопросы, которые часто возникают у тех, кто впервые настраивает GTM, надеемся эта статья будет полезной. Подробнее про Google Tag Manager можно почитать на официальной странице инструмента.
