8 (495) 215-53-73

В Москве

(048) 737-5-736

В Одессе


Блог SiteClinic

Руководство по установке и настройке Google Tag Manager для новичков

Для кого: SEO-специалистам

Уровень подготовки: начальный

Предлагаем вашему вниманию пошаговую инструкцию по установке и настройке Google Tag Manager (GTM). Здесь же мы расскажем, как с помощью GTM подключить Google Analytics и Яндекс Метрику.

Google Tag Manager (GTM) – многофункциональный инструмент, который позволяет добавлять на сайт или в мобильное приложение теги для анализа трафика, конверсии и поведения пользователей без вмешательства в исходный код сайта.

В статье мы подробно опишем, как создать и настроить GTM на сайте и как без вмешательства в исходный код сайта подключить Google Analytics и Яндекс Метрику.

Преимущества GTM

  • Можно добавлять и обновлять теги без вмешательства в исходный код сайта. Нужно всего один раз добавить на сайт код Диспетчера тегов, а всё остальное уже можно внедрять в личном кабинете GTM;
  • Уменьшение кода на страницах веб-сайта;
  • Удобный и простой в использовании интерфейс;
  • Простота тестирования. Режим предварительного просмотра позволяет маркетологам легко проверять корректность работы тегов;
  • Сервис бесплатный.

Прежде чем перейти к установке, разберёмся в определениях:

  • Контейнер – это фрагмент JS-кода, который размещается на всех страницах сайта. Внутри контейнера содержится информация о тегах, которые запускаются вследствие выполнения определённых правил, заданных в триггерах и переменных;
  • Тег – фрагмент кода сайта, который позволяет отслеживать трафик и анализировать поведение пользователей, конверсию и т. д. (например, код Яндекс Метрики);
  • Триггеры определяют, когда нужно активировать тег в веб-контейнере;
  • Переменные – это пара «имя-значение», которая используется в триггере как условие, при котором будет срабатывать тег.

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

1. Зарегистрируйте аккаунт в Google

Если ваш аккаунт в Google уже зарегистрирован и вы авторизированы, пропустите этот шаг. Если нет – авторизуйтесь или создайте аккаунт.

2. Создайте аккаунт в GTM

После авторизации в Google можно переходить к созданию аккаунта в GTM. Перейдите на страницу Google Tag Manager и нажмите на кнопку «Создать аккаунт», затем укажите придуманное название аккаунта и нажмите на кнопку «Далее».

Рисунок 1
gt1

В появившемся окне укажите придуманное название контейнера и выберите, где он будет использоваться. В нашем случае это кнопка «Веб-сайт». После этого нажмите на кнопку «Создать».

Рисунок 2
gt2

Далее система предложит ознакомиться с соглашением об условиях использования GTM. Ознакомьтесь с ними и примите их, нажав на кнопку «Да».

Рисунок 3
gt3


3. Добавьте на сайт полученный код Диспетчера тегов

После того как вы примете соглашение об использовании, появится окно с кодом.

Рисунок 4
gt4

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

Рисунок 5
gt5

Код из нижнего блока вставьте непосредственно после открывающего тега.

Рисунок 6
gt6

После того как вы выполните эти действия, нажмите в панели GTM на кнопку «Опубликовать».

Рисунок 7
gt7


4. Протестируйте корректность работы GTM

Далее важно проверить, всё ли вы сделали верно. Для этого можно воспользоваться плагином Google Tag Assistant Recordings для браузера Chrome. Установите это расширение, перейдя по ссылке.

После установки на панели расширений браузера Chrome появится значок Google Tag Assistant — . Для проверки корректности работы установленного на сайт GTM нужно перейти на свой сайт и нажать на этот значок.

Рисунок 8
gt8

Из скриншота видим, что значок зелёного цвета, это значит, что установка Диспетчера тегов прошла успешно. Если значок жёлтого или красного цвета – тег размещён с ошибками.
Рекомендации Google

Рисунок 9
gt9

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

Теперь приступим непосредственно к подключению Google Analytics через GTM.


1. Зарегистрируйте Google Analytics

Если на сайте уже установлена аналитика, этот пункт можно пропустить. Если нет, ознакомьтесь с тем, как зарегистрировать Google.Analytics, и пройдите регистрацию.

Обратите внимание! После регистрации Google.Analytics код на сайте размещать не нужно. Нам чуть позже понадобится только идентификатор отслеживания Google.Analytics. Если Google.Analytics зарегистрирован ранее и на сайте уже размещён код, после подключения Google.Analytics через GTM ранее размещённый код аналитики можно убирать.


2. Войдите в зарегистрированный ранее аккаунт в GTM и кликните по ссылке «Добавить новый тег»

Рисунок 10
gt10


3. Выберите тип тега

В данном случае нам нужен Universal Analytics.

Рисунок 11
gt11


4. Укажите идентификатор отслеживания сайта в Google Analytics и тип отслеживания – «Просмотр страницы»

Рисунок 12
gt12

 

Идентификатор отслеживания ресурса можно посмотреть в настройках Google Analytics.

Рисунок 13
gt13

 

5. Укажите триггер «All Pages»

Чтобы тег срабатывал на всех страницах, укажите триггер «All Pages».

Рисунок 14
gt14


6. Сохраните внесённые данные

Рисунок 15
gt16


7. Укажите имя тега и нажмите на кнопку «Сохранить»

Рисунок 16
gt16


8. Проверьте корректность работы тега

Для этого нажмите на стрелочку рядом с кнопкой «Опубликовать» и выберите «Предварительный просмотр».

Рисунок 17
gt17

В «Предварительном просмотре» контейнер с изменениями будет доступен только в вашем браузере.

Далее перейдите на свой сайт и прокрутите страницу вниз. Внизу должен отобразиться контейнер.

Если контейнер отобразился под строкой «Tags Not Fired On This Page», тег на странице не сработал. Необходимо проверить все настройки и при необходимости исправить допущенные ошибки.

Если контейнер появился под строкой «Tags Fired On This Page», значит, Universal Analytics установлен без ошибок.

Рисунок 18
gt18


9. Опубликуйте Universal Analytics

После проверки нажмите на кнопку «Опубликовать».

Рисунок 19
gt19

Таким образом, мы подключили на сайт Google Analytics через GTM без вмешательства в исходный код страниц.

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

Для подключения Яндекс Метрики выполните те же действия, что и для Google Analytics, но так как по умолчанию Яндекс Метрики в GTM нет, при выборе продукта укажите «пользовательский HTML».

Рисунок 20
gt20

 

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

Рисунок 21
gt21

В эту HTML-форму необходимо вставить код счётчика вашей Метрики.

Если на сайте уже установлена Яндекс Метрика, скопируйте код счётчика с исходного кода страницы. Если нет, ознакомьтесь с тем, как создать и настроить счётчик Яндекс Метрики.

Обратите внимание! Как и в случае с Google.Analytics, код на сайте размещать не нужно. Полученный код при настройке Яндекс Метрики нужно скопировать и добавить в появившееся на предыдущем этапе окно «Пользовательский HTML».

Далее нужно выбрать триггер «Все страницы» и нажать на кнопку «Сохранить».

Рисунок 22
gt22

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

Рисунок 23
gt23

Если в режиме предварительного просмотра контейнер размещён под строкой «Tags Fired On This Page», значит, всё настроено верно. Если же контейнер показывается под строкой «Tags Not Fired On This Page», тег не сработал, скорее всего, при подключении была допущена ошибка.

Рисунок 24
gt24

После того как мы убедились в том, что тег в предварительном режиме сработал, нажимаем «Опубликовать».

Таким образом, мы подключили на сайте Яндекс Метрику без вмешательства в исходный код страниц.

Если на вашем сайте ещё не установлен GTM, вы сможете установить и настроить его, следуя нашим инструкциям. А мы, в свою очередь, продолжим писать о том, как с помощью GTM анализировать трафик, конверсии и поведение пользователей.

Оцените статью: 
1 Star2 Stars3 Stars4 Stars5 Stars (15 оценок, среднее: 4,53 из 5)

Автор: Наталия Бондаренко, SEO-оптимизатор

n.bondarenko@siteclinic.ru

Подписаться
Наверх