Что такое Google Tag Manager

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

Зачем нужен Google Tag Manager (GTM)

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

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

  • Нет необходимости вносить изменения в фактический исходный код сайта или в его шаблоны при обновлении или добавлении тегов.
  • Вы можете отслеживать и организовывать теги, чтобы избежать дублирования и ошибок.
  • Есть встроенные средства отладки, тестирования и предварительного просмотра.
  • Вы можете использовать контроль версий, чтобы отслеживать изменения.
  • Существует несколько уровней разрешений для просмотра, редактирования и публикации тегов.

Менеджер тегов Google состоит из трех основных частей:

  1. Теги: фрагменты Javascript или отслеживания пикселей
  2. Триггеры: сообщает GTM, когда или как запустить тег
  3. Переменные: может потребоваться дополнительная информация для работы тега и триггера.

Как создать Google Tag Manager и поставить его на сайт

1) Заходим в свой аккаунт Гугл, на котором нужно сделать Tag Manager

2) Переходим на сайт https://tagmanager.google.com/  (проверяем, чтобы были в нужном аккаунте Гугл)

3) Нажимаем на Создать аккаунт

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

5) Читаем и принимаем — Соглашение об Условиях использования Диспетчера тегов Google

6) Устанавливаем Google Tag Manager на сайт

Установить можно:

  • вручную в код
  • плагин (где в настройках поставить идентификатор вашего аккаунта Tag Manager, в нашем примере это будет GTM-WQTDZDP)

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

1) открыть вкладку Теги — нажать кнопку Создать

2) Называем тег, например Google Analytics

3) В окне Конфигурация тега — выбираем — Тип тега Universal Analytics

4) Тип отслеживания Просмотр страницы

5) Выбираем — Новая переменная

6) называем переменную, например – идентификатор Google Analytics

7) в поле — Идентификатор отслеживания – скопировать ваш идентификатор Google Analytics (должен быть создан аккаунт в Google Analytics, и там будет идентификатор), в нашем примере это UA-104795803-5

8) в — Дополнительные настройки – Реклама – выбираем: включить функции для контекстно-медийной сети и нажимаем сохранить

9) выбираем – Триггеры, кликаем на — Выберите триггер и выбираем — просмотр страниц – все страницы/All Pages

10) Нажимаем на сохранить

11) Нажимаем на кнопку — Отправить — это отправит данные на публикацию

12) Потом нажимаем на кнопку – Опубликовать, потом далее и готово.

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

В Google Analytics зайти на Отчет в реальном времени – Обзор – вы должны там отображаться (с какое гео, на какой странице сейчас находитесь и тд) – если отображаетесь – это значит, что счетчик установлен и работает.

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

Цель на клик (по кнопке, ссылки и другому кликабельному элементу на сайте)

1) создаем новый тег (у меня на сайте есть кнопка — Рассчитать стоимость (хочу поставить цель – клик по этой кнопки)) – называем тег – клик по кнопке Рассчитать стоимость

2) выбираем – Триггеры, кликаем на — Выберите триггер и выбираем новый тип триггера

3) выбираем — Клик — Все элементы

4) в Условие активации триггера – выбираем Некоторые клики. В первом поле в выпадающем меню нажимаем — Выбрать встроенную переменную

В открывшемся меню выбираем Click Element

Во втором поле выбираем условие — соответствует селектору CSS

Как найти этот селектор?

Заходим на наш сайт и находим нужную кнопку — элемент, при клике на которой GTM должен передавать событие.

Нажимаем на нее правой кнопкой мыши, в меню выбираем — Посмотреть код

Появится поле с кодом страницы сайта; код самой кнопки будет подсвечен. Нажимаем на это подсвеченное поле правой кнопкой мыши, выбираем Copy — Copy selector

Пишем этот селектор в поле – в нашем случае это #openstoimost > div > div > a > span > span

Вместо Click Element можно выбрать Click Classes или Click ID, в таком случае нужно указать class или id – нужного нам элемента на сайте. Кому как больше нравиться – выделять элемент на сайте можно как через селектор, класс или айди.

5) назовём триггер, например – клик по кнопке Рассчитать стоимость и Сохранить

6) переходим к блоку — Конфигурация тега, выбираем Google Analytics — Universal Analytics, тип отслеживания — Событие.

В открывшемся меню нужно обязательно заполнить два поля — Категория и Действие. Допустим, Категория будет button, а Действие — click-rasschitat-stoimost.

В Настройках Google Analytics выбираем идентификатор Google Analytics.

Нажимаем сохранить

7) создаём данную цель – клик по кнопке Рассчитать стоимость, в аккаунте Google Analytics.

Выбираем Администратор — Представление— Цели.

8) Нажимаем +ЦЕЛЬ, далее выбираем – Собственная, нажимаем кнопку – Далее.

Называем цель, в нашем случае — клик по кнопке Рассчитать стоимость, тип выбираем – Событие и нажимаем далее.

Заполняем — Категория — button и Действие — click-rasschitat-stoimost и сохраняем цель.

9) В GTM не забываем (после каждых действий) — нажать на кнопку отправить

и опубликовать

Через время проверьте цель через — Отчет в реальном времени, должно быть достижение данной цели.

Настраиваем цель на отправку формы

1) делается почти также — как и цель на клик, на примере у меня на странице контакты есть форма, я хочу отслеживать её отправку, назовём цель – Отправка формы с контактов

2) создаём новый тег и называем его — Отправка формы с контактов, выбираем Google Аналитика – Universal Analytics. Тип отслеживания – Событие, заполняем — Категория —form, Действие — otpravka-formy-kontakty и в Настройках Google Analytics выбираем идентификатор Google Analytics. (всё что делали – цель на клик)

Вот теперь различие

Выбираем новый триггер, выберете триггер, … потом + и выбираем Взаимодействия пользователей — Отправка формы

Ждать теги и Проверка ошибок – выбираете по желанию.

Выбираем некоторые формы, далее Выбор встроенной переменной — Form ID или Form Classes или Form Element, я решил выбрать Form Classes – у меня это elementor-form, называю триггер — Отправка формы с контактов и сохранить.

3) сохраняем тег, создаем цель в Google Analytics, все также, как и в цели на клик, заполняем Категория и Действие, в моём случае это Категория — form, Действие — otpravka-formy-kontakty и сохраняем цель.

Через время проверьте цель через — Отчет в реальном времени, должно быть достижение данной цели.

Как видите разница с целью на клик не большая – создаётся триггер не на клик, а на оправку форм и выбираются встроенные переменные, рассчитанные на формы, а не на клики.

Установка Яндекс Метрики через Google Tag Manager

1) создаём новые тег и называем его Яндекс Метрики

2) в Конфигурация тега – выбираем Специальные — Пользовательский HTML (должен быть создан и настроен счётчик Яндекс Метрики)

Код счетчика вставляем в поле HTML

Выбираем триггер – просмотр страниц – все страницы и сохраняем тег.

Готово! Через время проверьте работоспособность, начнётся ли сбор данных аналитики.

Настройка целей в Яндекс Метрике через Google Tag Manager

Настраиваем цель на клик

1) создаем цель в Яндекс Метрики, нам нужно в итоге создать — Идентификатор цели

В нашем случае это — klik-po-knopke-rasschitat-stoimost

2) Составляем пользовательский код цели

<script>

yaCounterXXXXXXX.reachGoal(‘Identifikator’)

</script>

  • XXXXXXX – номер счетчика
  • Identifikator — идентификатор цели

В моём случае

<script>

yaCounter45207897.reachGoal(‘klik-po-knopke-rasschitat-stoimost’)

</script>

3) создаём тег цели, называем его – клик по кнопке Рассчитать стоимость Яндекс

в Конфигурация тега – выбираем Специальные — Пользовательский HTML (должен быть код цели Яндекс Метрики)

А теперь внимание!! В процессе создания целей в Гугл – мы уже создали 2 триггера — клик по кнопке Рассчитать стоимость и Отправка формы с контактов.

И можем их выбрать, нам нужен элемент – кнопка на сайте — Рассчитать стоимость – через Click Element мы в триггер написали её селектор – также для метрика будет нужна и форма со страницы контакты – её тоже через Form Classes – написали класс формы.

Так как мы создаём цель в метрике — клик по кнопке Рассчитать стоимость Яндекс, то выбираем триггер — клик по кнопке Рассчитать стоимость и сохраняем

Настраиваем цель на отправку формы

1) создаём новую цель в Яндекс Метрике, чтобы получить новый — Идентификатор цели, для отправки формы со страницы контакты

2) создаём новый тег, называем его Отправка формы с контактов Яндекс, вставляем код цели, выбираем триггер Отправка формы с контактов и сохраняем.

Через время проверьте цель через режим браузера инкогнито – нажмите на кнопку или отправьте форму и т.д., и посмотрите Яндекс Метрика – зафиксировала ли достижение этих целей.

Установка Facebook Pixel через Google Tag Manager

1) в процессе создания в Ads Manager – есть возможность установить пиксель с использованием аккаунта Google Tag Manager – поэтому с нуля создать пиксель с использованием Google Tag Manager не составит труда

2) что делать если пиксель Фейсбука уже был создан или не хотите с нуля создавать через GTM и надо его код перенести в Google Tag Manager

Ищем код самого Facebook Pixel, далее аналогично так как — Установка Яндекс Метрики

  • создаем новый тег – называем, например Facebook Pixel
  • в Конфигурация тега – выбираем Специальные — Пользовательский HTML (пишем туда код пикселя)
  • Выбираем триггер – просмотр страниц – все страницы и сохраняем тег

Далее проверяем работоспособность Facebook Pixel.

Настройка целей для Фейсбука через Google Tag Manager, в общем аналогичен настройки целей в метрики и аналитикс

  • мы получаем код от Facebook Pixel (встроенные события или пользовательские события)
  • с помощью Form ID/Form Classes/Form Element или Click Element/Click Classes/Click ID определяем нужный элемент на сайте, чтобы к нему привязался код от пикселя Фейсбук – и началось отслеживание нужных нам действий

Установка пиксель ВКонтакте через Google Tag Manager

Аналогично тому как установить метрику и пиксель от фейсбука

  1. создаём пиксель ВКонтакте (процесс создания пикселя очень простой – в итоге получаем код пикселя)
  2. создаем новый тег – называем, например пиксель ВКонтакте
  3. в Конфигурация тега – выбираем Специальные — Пользовательский HTML (пишем туда код пикселя)
  4. Выбираем триггер – просмотр страниц – все страницы и сохраняем тег

Далее проверяем

Очень важно! После каждых действий — созданий тегов, триггеров, переменных и т.д.

нажать на кнопку отправить

и опубликовать

Надеюсь, данная статья была для вас полезной, и вы узнали что-то новое для себя. Спасибо за внимание! Если что-то непонятно или есть вопросы.

Если будут проблемы с созданием

  • аккаунта Яндекс Метрики и/или Google Analytics
  • целей
  • пикселей от Фейсбука и Вконтакте

Закажите бесплатный аудит и консультацию