Настраиваю Google Tag Manager для клиентского сайта

Дневник разработчика

Я давно хотел лучше разобраться с инструментами Google и внедрить их в работу — детальная аналитика сайтов клиентов. Но как обычно, руки не доходили до этого.

А в этот раз мне написал заказчик по проекту БИЗИБОРДЫ в Краснодаре и попросил настроить ему «события на гугле». Предложил мне за это 8 тыщ. Как я мог отказаться от такого )))

Итак. Начало было положено после того, как мне дали доступы к проекту созданному в Google Tag Manager.

Настраиваю Google Tag Manager для клиентского сайта
Интерфейс кабинета tagmanager.google.com

Тут все на английском, но это не страшно. Начинаю разбираться.

Важные моменты для правильного понимания работы тег-менеджера

Триггер — механизм оповещения о том что посетитель совершил целевое действие = взаимодействие с элементом на странице сайта. К типовым = наиболее популярным триггерам можно отнести:

  • Просмотр страницы (всех страниц или каких то определённых)
  • Клик по элементу на странице сайта
  • Доступность элемента (посетитель посмотрел блок с информацией на странице)
  • Отправка формы с сайта (обычной, не AJAX)
  • Таймер (время пребывания посетителя на странице сайта)
  • Скролл (просмотр длинны той части страницы, которую посетитель просмотрел перед выходом или переходом на другую страницу. Отображается в процентном эквиваленте, где 100% это просмотр всей страницы полностью)

Тег — или еще называется тегом конверсии — это набор программируемых действий. на один и тот же тригер можно добавить больше одного тега конверсии.

К самым распространённым тегам аналитики можно отнести следующие теги:

  • Аналитика (Google Analitics, Яндекс Метрика, пиксель Facebook, код ретаргетинга ВКонтакте и прочие)
  • События — на отдельные страницы при определённых действиях
  • Связывание конверсий — механизм связывания или объединения события связанных с активностями на сайте. Например переход на сайт с рекламы и регистрация на этом же сайте, которая была позже.
  • Всплывающие окна, опросы, квизы и прочее.

С чего начинается работа по настройке Google tag manager

Работа по настройке GTM начинается с его создания 🙂 для этого нам нужно зайти на сайт и создать новый аккаунт. Рекомендовано под каждый отдельный проект создавать отдельный аккаунт.

Настраиваю Google Tag Manager для клиентского сайта
Кабинет менеджера тегов GTM

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

Затем нужно создать контейнер для GTM. Просто задаём ему название = доменное имя и выбираем тип целевой платформы.

Настраиваю Google Tag Manager для клиентского сайта
Создание нового проекта в Google Tag Manager.

Всё готово. остаётся лишь нажать на кнопку СОЗДАТЬ. После нажатия вам предложат ознакомиться с политикой конфиденциальности.

Как добавить код Google tag manager на сайт

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

Вам нужно будет установить не один а два фрагмента кода. Один блок кода нужно добавить перед закрывающим тегом </head>, а второй — после открывающего тега <body>.

Настраиваю Google Tag Manager для клиентского сайта
Блоки кода, которые нужно добавить на ваш сайт.

Мой сайт работает под управлением CMS WordPress. Использую шаблон от WPSHOP под названием REBOOT. В шаблоне придусмотрена опция добавления счётчиков и прочего кода в шапку сайта. Мне достаточно просто зайти в настройки шаблона и добавить скопированный блок кода GTM в поле для шапки.

Настраиваю Google Tag Manager для клиентского сайта
Специальная опция в шаблоне Reboot, для добавления скриптов и счётчиков на сайт.

Второй блок кода, который нужно добавлять сразу ПОСЛЕ закрывающего тега <body> я добавляю ручками. Захожу в часть шаблона страницы под названием head.php и добавляю блок кода после соответствующего тега.

Настраиваю Google Tag Manager для клиентского сайта
Второй блок кода я добавляю инлайново — непосредственно в шаблон страницы.

Отлично. Мы добавили GTM на сайт. теперь приступим к его настройке. Дальнейшая работа будет сводиться к ковырянию личного кабинета на сайте Google и инспектированию вёрстки сайта — мы там будем смотреть идентификаторы для интерактивных элементов или добавлять новые.

Как настроить менеджер тегов ПОСЛЕ установки на сайт

Добавление счётчика google analitics

Лично у меня почти на всех сайтах добавление счётчика google analitics было аналогично установке счётчика метрики от Яндекса — я тупо вставлял блок кода в шапку сайта и все.

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

Для начала я удалю из шаблона своего сайта фрагмент кода от google analitics и вставлю его при помощи GTM.

Для этого перейдя в кабинет проекта. Сбоку вы увидите меню с такими пунктами как ТЕГИ и ТРИГГЕРЫ.

Перед тем как добавлять что то в GTM вам важно понять, что в любом проекте на GTM по умолчанию есть один единственный триггер — all pages.

Теперь давайте добавим тег. Для этого нажимаем на соответствующий пункт меню и там открывается два блока. выбираем нижний «Триггеры» и в открывшемся списке выбираете единственный имеющийся в наличии триггер — all Pages.

Настраиваю Google Tag Manager для клиентского сайта
Триггер All Pages — создаётся по умолчанию на любом проекте.

Затем в разделе «Конфигурация тега» выбираем соответствующий пункт — Google analytics. Затем идем на сайт Google Analitycs и копируем оттуда идентификатор проекта. Вот тут.

Настраиваю Google Tag Manager для клиентского сайта
С личного кабинета на сайте https://analytics.google.com/ заходим в раздел АДМИНИСТРАТОР, в настройки отслеживания и смотрим свой идентификатор отслеживания.

Скопировав идентификатор можно смело вставлять его в проекте на GTM. И в итоге у вас получится что вы создали новый тег, настройки которого выглядят примерно вот так:

Настраиваю Google Tag Manager для клиентского сайта
Настроенный тег в GTM.

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

Добавление счётчики метрики от Яндекса выполняется аналогично, за одним исключением — в настройках создаваемого тега вы выбираете пункт «Пользовательский HTML». Ну и внутри уже вставляете код Яндекс Метрики.

Настраиваю Google Tag Manager для клиентского сайта
Добавление Яндекс Метрики через Google Tag Manager.

ВАЖНО: после того как вы закончили создание тегов и триггеров ВСЕГДА отправляйте и публикуйте изменения — кнопка отправить в верхнем правом углу, а во всплывающем окне потом увидите кнопку опубликовать.

Настройка тега связывания конверсий на сайте

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

Благодаря этому тегу вы сможете объединять записи в cooke, которые имеют отношение к вашему сайту в одно целое. Например переходы на ваш сайт с рекламы можно будет объединить с переходами на сайт с поиска и соц сетей и отследить тех посетителей, которые были у вас не один раз, а несколько, при этом они могли прийти с разных каналов.

Создать и настроить тег связывания конверсий очень просто.

Выбираем создать тег, в списке типов тегов выбираем пункт «Связывание конверсий»

Настраиваю Google Tag Manager для клиентского сайта
Выбираем тип тега — Связывание конверсий.

Этот тег не требует никаких дополнительных настроек. Просто сохраните его и не забудьте опубликовать изменения в GTM.

Настраиваю Google Tag Manager для клиентского сайта
Завершённая настройка тега Связывание конверсий.

Юрий Ронин