Обсудим ваш проект?
Интернет-маркетинг,
который даёт результат
Россия: 8 (800) 775-63-20
Отправить заявку

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

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

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

Директ Лайн
Кто мы
Крупнейшее агентство
интернет-маркетинга за МКАДом:
1200+ проектов
70 специалистов
15 лет на рынке
ТОП-10
лучших компаний интернет-продвижения России 2020
Коммерческое предложение

Что такое 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 Tag Manager for WordPress.

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

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

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

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

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

Теги представляют собой непосредственно тот сторонний код, который планируется установить на сайт с помощью 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 можно почитать на официальной странице инструмента.

Комментарии
ДОБАВИТЬ КОММЕНТАРИЙ
Продвинем ваш сайт!
Помогли более 1000 сайтам получить высокие позиции и качественный трафик из Яндекс и Google. Подходим комплексно: аналитика, SEO-оптимизация, контент, ссылки, юзабилити. Над каждым проектом работает от 6 до 10 специалистов. Работаем по любой схеме — абонентская плата / оплата за позиции / оплата за трафик / оплата за лиды.

1 место SEO для e-commerce RatingRuneta.ru

1 место
SEO для e-commerce
RatingRuneta.ru

9 место в Топ-100 SEO-компаний России

9 место
В топ-100 SEO-
компаний России

11 место в топ-100 SEO-агентств Рунета

11 место
В топ-100 SEO-
агентств Рунета

Золотая сотня
Российского Digital

в топ-10 в SEO глазами клиентов 2014, 2016, 2017

В ТОП-10
«SEO глазами клиентов»


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