Блог о SEO и WEB-аналитике
Арториус Инфо

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

Как установить Google Tag Manager
Автор:Artorius

Сегодня уже многие специалисты в области интернет-маркетинга предпочитают использовать Google Tag Manager (GTM) для решения аналитических задач. Этот инструмент от разработчиков Гугл значительно развязывает нам “не программистам” руки при установке на сайт систем аналитики, настройке целей и событий, добавлении сайта в Search Console и т.д. Давайте для начала рассмотрим что же из себя представляет этот сервис.

Google Tag Manager что это?

 

Начнем с того, что Google Tag Manager — это скрипт, который позволяет устанавливать на сайт различные фрагменты кода (теги) и легко управлять ими.

Google Tag Manager

При этом во многих случаях нам не потребуется обращаться за помощью к программисту, т.к. Google Диспетчер Тегов — это контейнер, который единоразово размещается на сайте, а уже в него мы помещаем другие скрипты (Google Analytics, Яндекс Метрика и т.п.). Но всё же, если мы хотим глубоко анализировать поведение посетителей сайта, например, внедрить расширенный модуль электронной торговли, то конечно придётся писать ТЗ разработчикам на внедрение dataLayer. В этой же статье мы рассматриваем только внедрение диспетчера тегов, и поэтому оставим продвинутые настройки для последующих публикаций (как говориться, подписывайтесь на рассылку).

 

Установка Google Tag Manager

 

Итак, с чего начать? Переходим по ссылке https://tagmanager.google.com/ . Скорее всего у вас уже есть аккаунт в Google, и в этом случае вам необходимо авторизоваться. Если же Google-аккаунта у вас нет — создайте и войдите в него под созданной учётной записью.

 

Аккаунт и контейнер Диспетчера Тегов

 

Теперь мы попадаем в панель создания аккаунта.

Аккаунт Диспетчера Тегов

Здесь необходимо указать его название. Сразу заметим, что вы можете создать несколько аккаунтов, в каждом из которых можно создавать отдельные контейнеры.

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

Также укажите свою страну.

После того, как имя аккаунта указано, следующим шагом нужно указать имя контейнера и выбрать тип ресурса, который вы отслеживаете

Контейнер Google Tag Manager

На примере моего блога:

  • название аккаунта — Арториус Инфо
  • название контейнера — www.artorius.info
  • тип ресурса — Веб-сайт

После этого, нажимаем кнопку “Создать”, читаем условия соглашения использования GTM и принимаем его (или не принимаем и забываем об идее использования этого инструмента).

После принятия условий соглашения по использованию Tag Manager будет сгенерирован код, который нужно будет установить согласно там же приведённой несложной инструкции. Для установки достаточно минимальных навыков в разработке сайтов и начальных знаний HTML. Если же для вас это всё — “второй космос”, не отчаивайтесь, а попросите разработчика вашего сайта и он быстро
разместит скрипт контейнера в HTML-коде сайта.

Установка Google Tag Manager

Установка Диспетчера Тегов

На этом первый этап закончен. Мы разместили код Google Tag Manager на свой сайт. Теперь переходим ко второму необходимому шагу.

 

Установка Google Analytics через GTM

 

Менеджер тегов Google — это своего рода посредник между сайтом и Гугл Аналитикой. Т.е. данные с сайта поступают в GTM, а уже из него в Analytics. Поэтому на втором этапе нам нужно установить связь между этими двумя сервисами.

Для этого создадим наш первый тег. Но для начала немного теории во избежание дальнейшей путаницы. В работе с Диспетчером Тегов мы будем оперировать следующими терминами:

Тег — это скрипт (или кусок кода), отправляющий информацию в подключенную систему сбора данных (например, в Google Analytics или Яндекс Метрику).

Триггер — это условие, при котором тег срабатывает или не срабатывает. Соответственно бывают триггеры активирующие и блокирующие.

Переменная — это объект, который вызывается внутри тега и триггера. Этот объект имеет меняющееся значение (исключение — переменая типа “константа”). Коротко, переменная — это пара типа “ключ-значение”, которая используется для хранения данных и передачи их в тег. В Google Tag Manager есть два типа переменных:

  • встроенные переменные

Настройка переменных GTM

  • пользовательские, которые можно создавать для решения конкретных кастомных задач

Переменные Google Tag Manager

Итак, для связи с Google Analytics создадим тег. Для работы тега нам нужно создать триггер, а триггеру понадобится переменная.

Поэтому первым делом создадим переменную типа “константа” в которой будет передаваться идентификатор ресурса Google Analytics, куда мы хотим отсылать данные из Диспетчера. Не будем здесь рассматривать создание аккаунта и ресурса в G.Analytics, т.к. данная статья рассчитана на тех, кто уже работает с аналитикой Гугл и желает освоить Tag Manager.

Вообще, перед началом работы рекомендую активировать все встроенные переменные. Даже если вы их все не будете использовать в начале, то это всё равно не помешает.

Заходим в меню “Переменные”.

Tag Manager переменные

Жмём кнопку “Настроить”.

Переменные Менеджер Тегов Google

И далее проставляем галочки напротив каждой предлагаемой к активации переменной.

Подключение переменных GTM

Вернёмся к созданию пользовательской константной переменной. Сейчас вы поймёте зачем она нужна.

В том же окне “Перемнные” опускаемся в самый низ и жмём кнопку “Создать”.

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

В открывшемся окне жмём значок конструктора.

Переменная Константа Google Tag Manager

И выбираем тип переменной “Константа”.

Переменная Константа GTM

Далее подставляем идентификатор ресурса Google Analytics.

Идентификатор Google Analytics

Опять таки, не останавливаюсь на том, где взять этот идентификатор. Мы изучаем Google Tag Manager исходя их того, что читатель уже знаком с азами Google Analytics.

Переменная Google Analytics

Даём название переменной. Я обычно называю её GA_ID (вы называйте как вам удобно), и сохраняем.

Переменная Гугл Аналитика

Теперь нам нужно создать ещё одну переменную типа “Настройки Google Analytics”. Дадим ей имя GA (вы опять таки называйте, как вам удобно).

Переменная Настройки Google Analytics

Теперь нам нужно выбрать в настройках переменной GA, созданную ранее переменную GA_ID. Для этого кликаем значок конструктора.

Переменная GTM

Выбираем GA_ID. Остальные настройки пока не трогаем — на первом этапе этого пока будет достаточно.

Выбор переменной при создании тега Analytics

Нажимаем “Сохранить”.

Пользовательская переменная GTM

Можно было пойти немного иным путём — пропустить создание константы, а сразу подставить идентификатор Google Analytics в создаваемый тег. Но этот способ не удобен тем, что в дальнейшей работе, при создании других тегов нам нужно будет каждый раз копировать идентификатор ресурса Аналитики и вставлять его в создаваемый новый тег. Это отнимает дополнительное время, отвлекает и т.д. А так, мы просто выбираем созданную переменную GA_ID и всё.

Пошли дальше! Теперь создадим наконец тег Analytics. В боковом меню кликаем Теги >>> Создать.

Создание тега Google Analytics

Не обращайте внимание, что на моих скринах уже есть теги, у меня ведь уже рабочий контейнер. У вас в начале конечно никаких тегов не будет.

Теперь даём тегу имя (мне удобно Universal Google Analytics) и выбираем конфигурацию, как на изображении ниже.

Тег Universal Google Analytics

Дальше:

  • Тип отслеживания — Просмотр страницы
  • Настройки Google Analytics — выбираем созданную переменную GA

Настройка тега Universal Google Analytics

И в качестве триггера выбираем All pages.

Триггер для тега Universal Google Analytics

Т.е. тег будет срабатывать на всех страницах.

Триггер All Pages

Не забываем сохраниться.

Сохранение тега Google Tag Manager

И теперь внимание! После всех настроек нам нужно опубликовать версию контейнера, иначе ничего работать не будет.

Нажимаем “Отправить”.

Контейнер Google Tag Manager

Даём имя версии (я обычно называю её по дате изменения) и публикуем.

Версия контейнера Google Tag Manager

Запомните правило: после внесения изменений (создание новых тегов, редактирования существующих и т.д.) обязательно нужно публиковать созданную версию. В противном случае работать будут предыдущие настройки.

Всё! Тег для связи контейнера Google Tag Manager и Google Analytics создан. Проверить работу тега можно зайдя в аккаунт Гугл Аналитики >> пункт меню “В режиме реального” >> “Обзор”.

Google Analytics

Если информация в Analytics поступает, значит тег работает.

Но я вам рекомендую пользоваться панелью отладки (дебагером) Диспетчера Тегов для проверки. Этот инструмент позволяет не только проверить работает тег или нет, но и получить много дополнительной информации, в том числе и причину несрабатывания тега.

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

Дебагер Google Tag Manager

Затем открываем в браузере наш сайт (или перезагружаем страницу, если он уже открыт). В результате внизу экрана появится панель отладки видимая только вам.

Дебагер Google Tag Manager

В ней во вкладке Tags мы увидим все сработавшие теги (Tags Fired On This Page). В нашем случае сработал интересующий нас тег Universal Google Analytics.

Чтобы выйти из режима отладки, необходимо нажать кнопку “Выйти из режима предварительного просмотра” в рабочей области контейнера.

Отключение режима предварительного просмотра GTM

 

Яндекс Метрика через GTM

 

Оптимизаторы работающие на аудиторию Рунета часто предпочитают отслеживать трафик и поведение посетителей сайта через Яндекс Метрику, ну или используют её параллельно с Гугл Аналитикой. Tag Manager позволяет настроить отправку данных в эту и другие не гугловские аналитические системы.

Рассмотрим, как настроить Диспетчер Тегов, что бы передавать данные в Яндекс Метрику. Опять таки, я предполагаю, что вы знакомы с ней хотя бы поверхностно и вам не нужно рассказывать, как создать аккаунт в Яндексе и получить код счётчика Метрики.

Перейдём к созданию второго нашего тега — тега Я.Метрики. Поскольку она не является продуктом Google, то для неё не предусмотрен стандартный тип. Поэтому создаём тег типа “Пользовательский HTML” и назовём его Yandex Metrika.

Тег Пользовательский HTML

После выбора типа тега мы попадаем в следующее окно.

Создание тега Yandex Metrika

Копируем код счётчика в аккаунте Яндекс Метрики.

Код Yandex Metrika

И вставляем его в это окно.

Тег Yandex Metrika

Триггер, как и в случае с Google Analytics выбираем All Pages и нажимаем кнопку “Сохранить”.

Проверим работу тега через дебагер — всё работает!

Дебагер Tag Manager

Тег Яндекс.Метрики настроен, счётчик готов к работе. Некоторое время займёт проверка и значёк сменится на зелёный.

Счетчик Yandex Metrika

Можно пользоваться Яндекс.Метрикой!

Итак, мы рассмотрели установку и предварительную настройку Google Tag Manager. В следующих материалах рассмотрим различные возможности Менеджера Тегов и их практическое применение.

3 комментария

Просто о сложном, отличная инструкция, спасибо!

Оставить ответ

Поиск
Подписка на рассылку