Инструкция по работе с Google Tag Manager и примеры использования

Диспетчер тегов упрощает интеграцию сайта со сторонними сервисами и службами аналитики. Из этой статьи вы узнаете, как установить и использовать Google Tag Manager (GTM).

Что такое Google Tag Manager

Настройка Google Tag Manager

  • Как добавить на сайт контейнер диспетчера тегов
  • Как использовать переменные Google Tag Manager
  • Как использовать триггеры Google Tag Manager
  • Как работают теги в GTM

Какие задачи можно решать с помощью диспетчера тегов Google

  • Добавьте на сайт теги ретаргетинга и ремаркетинга
  • Подтверждайте права на сайт с помощью Google Tag Manager
  • Добавьте кнопки шеринга на изображения
  • Отслеживайте внутренние переходы на сайте
  • Отслеживайте переходы по всем внешним ссылкам
  • Отслеживайте переходы по конкретной внешней ссылке
  • Уточняйте показатель отказов
  • Отслеживайте взаимодействие с контактной формой
  • Отслеживайте клики по социальным кнопкам и виджетам
  • Отслеживайте переходы по тексту клика
  • Отслеживайте конкретные источники внешнего трафика
  • Используйте GTM для внедрения микроразметки
  • Отслеживайте источники трафика с помощью событий Google Analytics

Находка для нетехнических специалистов

Что такое Google Tag Manager

Диспетчер тегов — сервис, который упрощает использование кодов сторонних служб на сайтах или в приложениях. Благодаря Tag Manager вебмастеру достаточно один раз добавить на сайт контейнер или мастер-код. После этого код других служб можно добавлять через интерфейс диспетчера.

С помощью диспетчера тегов на сайт можно добавить код любых служб: от сервисов Google до сторонних платформ. Например, вы можете добавить код Google Analytics, «Яндекс.Метрики», Liveinternet и других служб аналитики. Это удобно, если вы пользуетесь разными сторонними сервисами для повышения эффективности и мониторинга сайта.

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

Настройка Google Tag Manager

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

Как добавить на сайт контейнер диспетчера тегов

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

Гуру маркетинга 63a8036a8d022a13ff3f5e7ba720fd7d
Настраиваем аккаунт и контейнер GTM

Скопируйте код и вставьте его на сайт. Если вы работаете с ресурсом под управлением CMS WordPress, воспользуйтесь плагинами для вставки кода, например, Head, Footer and Post Injections. Первую часть кода вставьте в хедер как можно ближе к открывающему тегу, а вторую в тело страницы сразу после тега <body>.

Гуру маркетинга 4793447a876abdbf7609a88f62e141c9
Интерфейс плагина Head, Footer and Post Injections

Сохраните изменения. Публиковать контейнер имеет смысл после добавления первого тега.

Как использовать переменные Google Tag Manager

Активация тегов в диспетчере происходит, когда значение триггера совпадает с заданной пользователем переменной. Например, встроенная переменная Click Text всегда содержит какой-либо текст, а переменная Click URL — URL. В данном случае триггер активируется, если значение переменной совпадает с заданными пользователем параметрами: кликом по элементу с указанным текстом или URL.

Для управления переменными выберите соответствующий раздел меню.

Гуру маркетинга dc922dd27df77b96b88bdc851590dae3
Выбираем меню «Переменные»

Здесь можно воспользоваться встроенными переменными или создать пользовательские. Чтобы использовать встроенные переменные, необходимо нажать кнопку «Настроить» и отметить нужную опцию галочкой.

Гуру маркетинга 3d0313f0f3f65b1dd6f9c82a366f4873
Включаем встроенные переменные

Пользователям доступны следующие типы встроенных переменных:

  • Страницы. В качестве переменной вы можете выбрать полный URL (Page URL), относительный URL (Page Path), имя хоста страницы (Page Hostname), источник запроса (Page Referrer).
  • Утилиты. Этот тип переменных включает события, ID и версию контейнера, название рабочей области и ID HTML-тега.
  • Ошибки. Этот тип встроенных переменных включает просмотр контейнера в режиме отладки, а также сообщение об ошибке, URL ошибки и номер строки ошибки.
  • Клики. В качестве переменной можно использовать HTML-элементы, классы элементов, URL, текст элемента, атрибуты target и ID элемента.
  • Формы. В качестве переменной можно использовать элементы и классы формы, атрибуты target и href, а также текст формы.
  • История. Этот тип переменных поддерживает активацию триггера при изменении хеша URL. В качестве переменной можно использовать новый и старый фрагменты URL, а также новое и старое состояние истории или источник истории.

После включения переменной она становится доступной в фильтре при создании триггера.

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

Триггер — условие активации тега. Оно наступает, когда триггер совпадает с указанным значением переменной. Чтобы настроить триггер, выберите в меню соответствующий раздел и нажмите кнопку «Создать».

Гуру маркетинга 2aa91cc4f5e584aeef283d9388adad5a
Настраиваем триггеры

На странице настройки триггера укажите название и выберите тип.

Гуру маркетинга 1f50800d3f58779f3f7660bd34d330dd
Указываем название и выбираем тип триггера

В GTM доступны следующие типы триггеров:

  • Просмотр страницы. Этот тип активируется по готовности объектной модели документа (Модель DOM готова), после полной загрузки всех элементов страницы (Окно загружено) или сразу после перехода на страницу (Просмотр страницы).
  • Клик. Этот тип триггера фиксирует клики по ссылкам или любым кликабельным элементам сайта.
  • Другие типы. Здесь можно выбрать тип «Ошибка JavaScript», «Таймер», «Пользовательские события», «Отправка формы» и «Изменение в истории».

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

Гуру маркетинга ef927713c95ec40d5babcd6e23502e18
Настройки тега

Флажок в поле «Ждать теги» блокирует действие до активации всех тегов в контейнере. Функция «Проверка ошибок» блокирует активацию тега, если пользователь выполняет ошибочное действие.

Как работают теги в GTM

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

Принцип работы с тегами удобно осваивать на примере интеграции ресурса с системами аналитики «Яндекс.Метрика» и Google Analytics.

Подключите сайт к Google Analytics. В рабочей области воспользуйтесь функцией «Добавить новый тег». В разделе «Конфигурация тега» выберите тип тега Universal Analytics или «Классический Google Analytics». Google рекомендует пользоваться Universal Analytics.

Гуру маркетинга 6f87bd5d62043fb4e04f08dc191b2180
Выбираем тип тега Universal Analytics

Укажите идентификатор ресурса. Его можно найти в аккаунте Google Analytics в разделе «Администратор – Ресурс – Код отслеживания». В разделе «Тип отслеживания» выберите опцию «Просмотр страницы».

Гуру маркетинга 8c76b2b27dcc43101c6be0fef99ebe3a
Настраиваем конфигурацию тега

В разделе «Триггеры» выберите вариант «Все страницы». Сохраните изменения.

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

Гуру маркетинга 7cf51027bf34e208f23e044c29fce6fb
Выбираем тип «Пользовательский HTML»

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

Гуру маркетинга 65b34fc3fb57c21a812da048e2d44ada
Вставляем код «Метрики»

Перед публикацией контейнера воспользуйтесь функцией «Предварительный просмотр и отладка».

Гуру маркетинга d0f4222c1e8c54cfaa4c989f09c94222
Проверяем работоспособность тегов

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

Гуру маркетинга d5791169dcf5dd1c8b73413ed18e2dbe
Теги Google Analytics и «Яндекс.Метрики» работают корректно

Опубликуйте контейнер. Проверьте корректность работы служб аналитики. В Analytics можно отправить тестовый трафик в разделе «Администратор – Ресурс – Код отслеживания». В «Метрике» корректность работы счетчика можно проверить с помощью отмеченной на иллюстрации кнопки.

Гуру маркетинга 14b7e68cdc86fe4da9aa22249912dfa6
Проверяем корректность работы счетчика

Если на сайте реализованы AMP, с помощью диспетчера тегов можно подключить ускоренные страницы к службам аналитики. Если ресурс работает на WordPress, установите надстройку AMP for WordPress. В разделе Analytics включите отслеживание с помощью Tag Manager, укажите ID контейнера, тип службы аналитики и идентификатор аккаунта в Google Analytics.

Гуру маркетинга 8c8ce48eb141bc6361d330baf0153e3c
Подключаем Google Analytics для AMP через диспетчер тегов

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

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

Ниже вы найдете рекомендации по практическому использованию Google Tag Manager.

Какие задачи можно решать с помощью диспетчера тегов Google

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

Добавьте на сайт теги ретаргетинга и ремаркетинга

Чтобы добавить код ретаргетинга «Вконтакте» через Google Tag Manager, создайте новый тег. Выберите тип «Пользовательский HTML». Добавьте в предложенное поле код ретаргетинга. Его можно создать в разделе «Ретаргетинг» кабинета рекламодателя «Вконтакте». В поле «Триггеры активации» укажите вариант All Pages. Если код должен срабатывать при посещении некоторых страниц, укажите их URL в триггере типа «Просмотр страницы». Сохраните изменения и опубликуйте тег.

Гуру маркетинга e6a1684aeac118fa5ab6ffad6d80e82e
Подключаем код ретаргетинга

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

Подтверждайте права на сайт с помощью Google Tag Manager

Если вы еще не подтвердили права на сайт в кабинете вебмастера Google, сделайте это с помощью диспетчера тегов. В Search Console выберите соответствующий способ и нажмите кнопку «Подтвердить».

Гуру маркетинга 6885de6181f572c3badb2feebe2c04e4
Подтверждаем сайт в Search Console через GTM

При необходимости аналогичным способом подтвердите все версии сайта.

Добавьте кнопки шеринга на изображения

Это одна из частных возможностей мгновенной интеграции сайта со сторонними сервисами с помощью Tag Manager. Скопируйте код кнопок шеринга выбранного сервиса, например, AddThis. Создайте тег типа «Пользовательский HTML». Вставьте код кнопок. В качестве триггера активации укажите вариант All Pages. Сохраните изменения и опубликуйте контейнер.

Гуру маркетинга 836823bed3b61b726a074b29601cd930
Настраиваем тег кнопок шеринга для изображений

Проверьте корректность работы кнопок шеринга.

Гуру маркетинга 45c9dbdd4dc9ba9634bb59f8002e5c0f
Кнопки шеринга появились на сайте

Отслеживайте внутренние переходы на сайте

Внешние переходы удобно отслеживать с помощью UTM-меток. А внутренние клики лучше мониторить с помощью событий в Google Analytics.

Представьте, что планируете отследить переходы по конкретной ссылке. В Tag Manager выберите меню «Переменные – Настроить – Click URL». Вы активировали нужную переменную.

Гуру маркетинга 17952bded588f0abd12f47c027eda6d1
Настраиваем конфигурацию переменной

В разделе «Триггеры» создайте новый триггер. Выберите тип «Клик – Только ссылки».

Гуру маркетинга c561331519909ca2f23d8c35a09d7fc9
Выбираем тип триггера

На следующей странице отметьте галочкой опции «Ждать теги» и «Все клики по ссылкам». В качестве условия выполнения триггера укажите URL целевой страницы. Сохраните изменения.

Гуру маркетинга 0db46ddde210dba4d8aba675c093be6c
Настраиваем триггер

После настройки триггера добавьте тег отслеживания. В разделе «Теги» создайте новый. В настройках конфигурации выберите тип Universal Analytics. В меню «Триггеры» выберите соответствующее значение. В настройках конфигурации заполните поля «Тип отслеживания», «Категория», «Действие», «Ярлык». Для удобства мониторинга значение в поле «Ярлык» должно соответствовать выбранному действию.

Гуру маркетинга f709c369f8781034e83813c732026349
Сохраняем тег

После публикации контейнера вы сможете отслеживать выбранное событие в разделе Google Analytics «Поведение – События».

Гуру маркетинга 11f91c1915b962887deecd43b46755d2
Обзор событий в Google Analytics

Отслеживайте переходы по всем внешним ссылкам

В данном случае речь идет о кликах по любым внешним ссылкам, которые есть на сайте. Создайте пользовательскую переменную. Выберите тип компонента «Имя хоста» для переменной типа URL. Отметьте флажком опцию «Убрать www». В дополнительных настройках укажите в поле «Источник URL» значение Click URL.

Гуру маркетинга 57f6e47769c10031c23f6531a9541e2b
Создаем пользовательскую переменную

Создайте триггер типа «Клик – Все элементы». В условиях активации выберите опцию «Некоторые ссылки». В фильтре укажите, что триггер активируется, если имя хоста не содержит URL вашего сайта.

Гуру маркетинга 2f60eb18545778309e93a5c9dbc8b228
Триггер активируется, если в URL не содержится имя хоста вашего сайта

Создайте тег активации триггера. Выберите тип Universal Analytics. Выберите тип отслеживания, заполните поля «Категория», «Действие» и «Ярлык». Опубликуйте тег в контейнере.

Гуру маркетинга d84c07b99a6b34818552066cf973c681
Оформляем тег и публикуем контейнер

Отслеживайте переходы по конкретной внешней ссылке

Создайте пользовательскую переменную, выберите тип URL. Укажите тип компонента «Полный URL». В поле «Источник URL» выберите значение Click URL.

Гуру маркетинга f226de71b3207b47d24ce7f88f9a8016
Настраиваем отслеживание внешнего перехода по конкретной ссылке

В условиях активации выберите значение «Некоторые ссылки». Укажите, что триггер активируется, если пользователь переходит по конкретному URL.

Гуру маркетинга 2d772a7262fa64155833af47495ad90c
Настраиваем триггер для отслеживания переходов по конкретной ссылке

Сохраните триггер. Создайте тег Universal Analytics и опубликуйте его в контейнере.

Уточняйте показатель отказов

Google Analytics не точно определяет этот показатель, если пользователь во время сеанса просматривает только одну страницу. Исправить ситуацию можно с помощью Google Tag Manager.

Создайте новый триггер, укажите тип «Таймер».

Гуру маркетинга f5eef54e5cbf0fa155b0788f90d414d0
Выбираем тип триггера «Таймер»

В поле «Интервал» укажите время активации триггера. Например, для активации таймера через 30 секунд укажите значение 30 000 миллисекунд. В поле «Ограничение» укажите значение «1». В этом случае таймер будет активироваться один раз для каждой сессии.

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

Гуру маркетинга 73884d145756ce4d5ceeab4a6377abfc
Настройки таймера

Создайте и опубликуйте в контейнере новый тег Universal Analytics. Таймер будет активироваться каждый раз, когда посетитель будет проводить на указанных вами страницах более 30 секунд.

Если таймер будет работать на всех страницах сайта, вы сможете отслеживать в Google Analytics уточненный показатель отказов. По умолчанию система аналитики считает отказом все посещения, в ходе которых пользователь просматривает одну страницу сайта. После активации таймера сессии продолжительностью более 30 секунд не будут считаться отказами, даже если посетитель просматривает одну страницу.

Гуру маркетинга ebd04dd8425523eb77dfe27d52b95789
Изменение показателя отказов после активации таймера

Отслеживайте взаимодействие с контактной формой

Если на сайте есть контактные формы, отслеживайте заполнения с помощью GTM. Для этого в меню «Переменные» активируйте переменную Form Classes.

Гуру маркетинга d9e3d77a03b7ee593d91fdc162928fcd
Активируем переменную Form Classes

Создайте триггер. В настройках укажите тип «Отправка формы».

Гуру маркетинга ca9b8f9a06a0666d2255cb27c8b8ad3a
Выбираем тип триггера

В настройках триггера переключите галочку в положение «Некоторые формы». Укажите в качестве условий активации «Фильтр Form Classes содержит» и укажите значение атрибута class формы.

Гуру маркетинга 151100ef1868b317e2855ba36fd13125
Настраиваем активацию триггера

Создайте соответствующий тег Universal Analytics. Сохраните изменения и опубликуйте контейнер. Значение атрибута class формы можно найти в коде страницы.

Гуру маркетинга a58711dd4a93633028a7b37900898ef6
Ищем значение атрибута class контактной формы

Отслеживайте клики по социальным кнопкам и виджетам

Практически на каждом сайте есть социальные плагины, например, виджеты страниц в Facebook и «Вконтакте», кнопки Follow Me. С помощью диспетчера тегов можно отслеживать клики по конверсионным кнопкам виджетов типа «Нравится» или «Подписаться». Например, настройте отслеживание кликов по иконке Twitter в блоке Follow Me.

Гуру маркетинга c67ae8a6169ba99aac70ecaf048808c0
Настраиваем отслеживание переходов по кнопке Twitter на сайте

В меню «Переменные» активируйте переменную Click Classes.

Гуру маркетинга a52bec4c736089776122c3ec3642f041
Активируем переменную Click Classes

Создайте триггер, выберите тип «Клик — все элементы». Переключите флажок в положение «Некоторые клики». В фильтре активации укажите значение атрибута class кнопки Twitter из блока Follow Me. Его можно найти в коде элемента.

Гуру маркетинга d26126cb2f1ebe1ef75ac8934fa67354
Находим значение атрибута class выбранного элемента

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

Гуру маркетинга 441a86937ce412fe226c830a8f3aa440
Настраиваем активацию триггера

Отслеживайте переходы по тексту клика

Эту функцию можно использовать для проверки эффективности CTR элементов ресурса. Представьте, что на сайте есть одинаковые кнопки с разным призывом к действию. Чтобы определить, какие кнопки нажимают чаще, активируйте переменную Click Text.

Гуру маркетинга de405bf00570163fefa3b797dd352d7f
Настраиваем переменную

Создайте триггер, выберите тип «Клик – Все элементы». Установите галочку в положение «Некоторые клики». Выберите фильтр Click Text. В качестве условия активации триггера отметьте «Содержит» и укажите нужный текст.

Гуру маркетинга d8ab6703ee2c1f935f3f7d46ef4b63ba
Настраиваем активацию триггера при клике на элемент с выбранным текстом

Создайте и опубликуйте тег Google Analytics.

Отслеживайте конкретные источники внешнего трафика

С помощью Google Tag Manager удобно мониторить количество посетителей с конкретных сайтов. Для этого создайте триггер. Выберите тип «Просмотр страницы». В качестве переменной укажите Referrer. В качестве правила активации укажите «Содержит» и добавьте URL источника, который планируете отслеживать.

Гуру маркетинга 7bba5bee9a0c20a0c69d41c0dedb57d1
Отслеживаем посещения с vk.com

Создайте тег с типом отслеживания «Событие» и опубликуйте его в контейнере. После этого Google Analytics будет фиксировать событие при каждом посещении сайта из выбранного источника.

Чтобы отслеживать посещения с конкретной страницы, в качестве переменной укажите Referrer, а в правилах активации отметьте «Равно» и добавьте полный URL страницы.

Используйте GTM для внедрения микроразметки

Используйте эту рекомендацию, если внедряете на сайте универсальные типы микроразметки. Они содержат одинаковые данные независимо от страницы сайта. Например, внедрите тип разметки Organization.

Воспользуйтесь генератором Schema JSON-LD или аналогичным инструментом, чтобы получить код. Создайте тег типа «Пользовательский HTML». Вставьте код разметки. Выберите триггер активации All Pages.

Гуру маркетинга f15a3537d60f4335c7990483b8985593
Внедряем микроразметку через диспетчер тегов Google

Отслеживайте источники трафика с помощью событий Google Analytics

Эту функцию можно использовать, чтобы быстро оценить количество источники трафика и количество посещений с того или иного сайта.

Создайте пользовательскую переменную типа «Источник ссылки HTTP». Укажите тип компонента «Имя хоста».

Гуру маркетинга c19c9e006e459c75ef9358c5fcfe1464
Настраиваем переменную для отслеживания источников посещения

Создайте триггер типа «Просмотр страниц». В условиях активации укажите, что тег активируется, если URL источника не совпадает с URL вашего сайта.

Гуру маркетинга b65730ddf30417ad324c2d3bc4fa11d1
Указываем условия активации тега

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

Гуру маркетинга 747d9cb6adab7d2c451b9a7f4b69787d
Отслеживаем источники трафика в разделе «События» Analytics

Это далеко не все возможности диспетчера тегов. Предложенные примеры помогут освоить принцип работы GTM. После этого вы сможете самостоятельно выбирать параметры для мониторинга с помощью служб аналитики и добавлять на сайт коды интернет-сервисов.

Находка для нетехнических специалистов

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

Диспетчер тегов упрощает мониторинг и аналитику эффективности сайта. С помощью набора встроенных и пользовательских переменных вы можете быстро настроить отслеживание практически любых событий на сайте.

Источник

Google Tag Manager
Гуру маркетинга e80d039b9bf125c3740a0637b16f2402

gurumarketing.ru