Обсудим ваш проект?
15 лет опыта
90+ специалистов
Комплексный интернет-маркетинг
15 лет опыта | 90+ специалистов
Отправить заявку

Настройка и принципы работы Google Tag Manager

Дарья ,
редактор
Наталья ,
руководитель отдела SEO-продвижения
Поделиться
Просмотров:
1615
Время на прочтение:
Статья обновлена:
19 июня 2021
Информация о статье
Просмотров: 1615
Время на прочтение:
Статья обновлена: 19.06.2021
Дарья , редактор
Наталья , руководитель отдела SEO-продвижения
Поделиться

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

Директ Лайн
Кто мы
Крупнейшее региональное интернет-агентство России. ТОП-10 в рейтинге Рунета.
1200+ проектов
90 специалистов
15 лет на рынке
Коммерческое предложение

Что такое Google Tag Manager?

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

Преимущества и недостатки GTM

Перед интеграцией GTM следует учесть все его преимущества и недостатки.

К преимуществам использования диспетчера тегов относятся:

  • Сокращение количества кода на странице благодаря тому, что устанавливается один контейнер самого GTM, а далее все подключаемые службы функционируют из-под него.
  • При установке сторонних служб не требуется редактирование кода страниц сайта. Достаточно один раз установить Google Tag Manager и через его интерфейс интегрировать дополнительные фрагменты кода.
  • Этот пункт вытекает из предыдущего, т.к. после установки GTM не требуется постоянного обращения к программисту.
  • Тестирование вносимых изменений в режиме предпросмотра позволяет избежать ошибок на сайте: добавляем новый код, тестируем на ошибки и только после публикуем.
  • Наличие шаблонов для быстрой установки популярных служб, таких как системы аналитики, пиксели и т.д.
  • Кроме предустановленных шаблонов, диспетчер позволяет создавать пользовательские теги.
  • Все установленные теги с помощью GTM загружаются поочередно, что положительно сказывается на скорости загрузки страницы, в сравнении, если бы код служб был установлен напрямую.
  • GTM запоминает хронологию вносимых изменений, в случае сбоя есть возможность восстановления более ранней версии.
  • Все дополнительные службы: пиксели, счетчики и прочие скрипты, хранятся в едином месте.
  • Возможность распределения прав доступа к содержимому диспетчера.

Нет времени разбираться?
SEO-продвижение под ключ
Проанализируем конкурентов, подберем запросы с низкой конкуренцией, проведем поисковую оптимизацию сайта, организуем внешнюю ссылочную массу, проработаем карточки компании на онлайн картах, проведем базовую UX-аналитику сайта. Над каждым проектом работает от 6 до 10 специалистов. Собственные разработчики для доработки сайта при необходимости. От вас - сайт, от нас - позиции в Яндекс/Google и трафик.
Ваш сайт:

Недостатки GTM:

  • Для настройки сложных тегов, скорее всего, понадобятся базовые знания HTML и JavaScript.
  • Скрипты, установленные через GTM, хранятся в едином контейнере, повреждение которого приведет к сбою в работе всех служб.
  • GTM позволяет устанавливать скрипты напрямую на сайте (т.е. необязательно делать это через интерфейс диспетчера), поэтому перед установкой новых служб, следует проверять их наличие в диспетчере, чтобы не возникли дубли.

Как установить Google Tag manager?

Для установки GTM на сайте следует разместить специальный код инструмента. Чтобы его получить необходимо зарегистрироваться и авторизоваться в системе диспетчера, после чего создать аккаунт.

Создание аккаунта
Создание аккаунта

Выбираем целевую платформу
Выбираем целевую платформу

Далее система выдаст два фрагмента кода, которые устанавливаются на сайт в соответствии с указанной инструкцией. Для сайтов на Wordpress существуют специальные плагины, которые позволяют устанавливать GTM без вмешательства в код со стороны пользователя. В качестве рекомендации выделим плагин Google Tag Manager for WordPress.

Копируем код и вставляем на сайт
Копируем код и вставляем на сайт

Если по какой-то причине первоначальное окно с кодом было закрыто, то эти фрагменты можно получить в другом месте: «Администрирование» – «Установить Google Менеджер тегов».

Код всегда можно найти здесь
Код всегда можно найти здесь

Код для вставки на сайт
Код для вставки на сайт

Привлекли 35.000.000 людей на 185 сайтов
Мы точно знаем, как увеличить онлайн–продажи
Применяем лучшие практики digital–продвижения как из вашей тематики, так и из смежных областей бизнеса. Именно это сделает вас на голову выше конкурентов и принесёт лиды и продажи.
Ваш сайт:

Что такое теги?

Теги представляют собой непосредственно тот сторонний код, который планируется установить на сайт с помощью GTM. У тега может быть множество функций, например, отслеживание переходов на сайт, ремаркетинг/ретаргетинг, аналитика рекламы и т.д.

Теги бывают:

  • Рекомендуемые. Для них подготовлены шаблоны настроек, достаточно указать идентификаторы.

Рекомендуемые теги
Рекомендуемые теги

  • Специальные. Позволяют встраивать пользовательский исполнительный код.

Специальные теги
Специальные теги

  • Дополнительные. В этом списке находятся теги сторонних сервисов.

Виды дополнительных тегов
Виды дополнительных тегов

Создание тега доступно на Рабочей области в соответствующем пункте меню.

Создаем теги
Создаем теги

Выбираем тип тега
Выбираем тип тега

Что такое триггеры?

В качестве триггеров указываются условия, по достижению которых будет срабатываться тег:

  • Просмотр страницы. В этом случае, тег срабатывает при загрузке указанной страницы в браузере.
  • Клик. Активация тега произойдет по клику на элементе. В роли элемента может выступать как любой кликабельный объект, так и конкретно взятая ссылка.
  • Взаимодействие с пользователем. Данный триггер позволяет, например, измерить глубину прокрутки страницы и прочие варианты поведения пользователя.
  • Пользовательское событие. Если стандартные варианты не подошли, можно реализовать пользовательский сценарий, например, отслеживание форм с предопределенными действиями по умолчанию.

Виды триггеров
Виды триггеров

Что такое переменные?

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

Переменные, как теги и триггеры, создаются и настраиваются на отдельной странице GTM.

Переменные
Переменные

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

  • Страницы. В этом случае доступен выбор вида URL-адреса: полный, относительный, имя хоста и источник запроса.
  • Клики. Указываются идентификаторы, классы и прочие атрибуты HTML-элементов страницы.
  • Формы. Категория похожа на клики, но в роли отслеживаемых объектов выступают формы.
  • Утилиты. Здесь можно использовать идентификатор пользовательского контейнера или прочей рабочей области.
  • Ошибки. Категория для разработчиков, предназначена для аналитики и выявления ошибок работы GTM.
  • История. Эта переменная собирает информацию о том, по каким URL-адресам переходил пользователь в открытой вкладке браузера. Это позволяет перемещаться по истории и добавлять или изменять содержимое элемента.

Примеры создания тегов в Google Tag Manager

В качестве примеров рассмотрим настройку популярных сценариев.

Подключение Google Analytics

  1. В Рабочей области Google Tag Manager открываем страницу создания тегов – создаем тег. Не забываем указывать соответствующее название, это позволит в будущем быстро ориентироваться по всему массиву тегов.
  2. В качестве Конфигурации тега выбираем готовый шаблон «GA: Universal Analytics».
  3. Убеждаемся, что в пункте «Типа отслеживания» выбран вариант «Просмотры страницы».
  4.  В пункте настройки GA Аналитики создаем новую переменную,

Создаем новую переменную
Создаем новую переменную

     5. В ней задаем идентификатор отслеживания, который относится к GA Analytics (взять его можно в настройках ресурса).

Задаем идентификатор отслеживания
Задаем идентификатор отслеживания

    6. Далее настраиваем поле Триггеры, здесь указываем All Pages.

    7. Сохраняем созданный тег.

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

Нажимаем «отправить»
Нажимаем «отправить»

Также созданный тег доступен для редактирования, для этого достаточно вернутся на страницу тегов.

Подключение Яндекс.Метрики

Подключение Яндекс.Метрики в Google Tag Manager происходит по аналогии, но с небольшими изменениями.

  1. Заходим на страницу Тегов и создаем новый.
  2. В настройке конфигурации тега выбираем «Пользовательский HTML» – этот режим позволит указать любой фрагмент кода.
  3. Теперь переходим в кабинет Яндекс.Метрики, открываем настройки и находим Код счетчика. Копируем его.
  4. После чего, скопированный код вставляем в поле HTML-тега.
  5. В роли триггера должно выступать значение All Pages.
  6. Сохраняем тег и публикуем изменения в GTM.

Настройка целей через Google Tag Manager

Перед настройкой выбираем событие, которое хотим отслеживать. Например, это будет клик по ссылке, ведущие на страницу test-page.html.

  1. Заходим «Переменные – Настроить».
  2. Выбираем следующие переменные, которые могут пригодиться для решения поставленной задачи:

         a. Click Classes – здесь можно указать class объекта.

         b. Click URL – отслеживание ссылки с определенным адресом.

         c. Click Text – клик по ссылке с указанным текстом.

Выбираем переменные
Выбираем переменные

Переменные
Переменные

    3. Далее создаем триггер.

    4. Т.к. у нас условие – срабатывание события только при переходе по ссылке на указанную страницу, то выбираем пункт «Только ссылки».

Выбираем тип триггера
Выбираем тип триггера

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

Выбираем «Некоторые клики по ссылкам»
Выбираем «Некоторые клики по ссылкам»

    6. Сохраняем переменную и публикуем.

Цели для Яндекс.Метрики

  1. Идем в теги и создаем новый, не забываем про корректные названия.
  2. Шаблонов настроек для этого случая нет, поэтому выбираем Пользовательский HTML.
  3. В качестве HTML указываем следующий код:

<script>
yaCounter12345678.reachGoal('ClickOnBestBanner');
</script>
*Цифры – идентификатор счетчика Яндекс.Метрики.

     4. В качестве триггера у тега указываем созданный для отслеживания переходов по указанной ссылке.

Цели для GA

  1. Создаем тег.
  2. В конфигурации указываем «Google Analytics – Universal Analytics».
  3. В качестве типа отслеживания: Событие.
  4. Здесь открывается 4 поля для заполнения:

         a. Категория (UserEvents) – действия пользователя.

         b. Действие (Click) – сам клик по ссылке.

         c. Ярлык (test-page) – информация для аналитика.

      5. В поле «Настройки Гугл Аналитики» выбираем переменную, связанную с счетчиком GA.

Выбираем нужную переменную
Выбираем нужную переменную

     6. В качестве триггера указываем ранее созданный для отслеживания переходов.

Публикуем изменения и проверяем.

Мы рассмотрели самые основные вопросы, которые часто возникают у тех, кто впервые настраивает GTM, надеемся эта статья будет полезной. Подробнее про Google Tag Manager можно почитать на официальной странице инструмента.

Комментарии
ДОБАВИТЬ КОММЕНТАРИЙ
Комплекс услуг для вашего бизнеса
Проанализируем ваши бизнес-цели, ваш бизнес, продукт и текущие продажи, и подберем варианты онлайн-продвижения, которые дадут лучший эффект. Опираемся на наш опыт в самых разных тематиках, т.к. наилучшее решение часто лежит в иной тематики, но которая решает схожую бизнес-задачу. Наша стратегия - готовый пошаговый план по внедрению, с деталями и референсами.
Сертифицированное агентство Яндекса

Обсудим задачи онлайн?
Telegram
WhatsApp
Добавили ваш email
в рассылку
Работающие инструменты SEO, интернет–рекламы, UX от
90 профессионалов
Директ Лайн — агентство интернет–маркетинга с 15-летним опытом, 1200+ клиентами и 50+ специалистами. Мы сами ведем этот блог. Раз в месяц пришлём самые интересные и полезные материалы.
  • #SEO
  • #интернет-реклама
  • #email-рассылки
  • #юзабилити сайта
  • #веб–разработка на bitrix
  • #кейсы
90 профессионалов
Раз в месяц
Без спама и СМС