November 29, 2020

Google Tag Manager

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

С помощью Tag Manager можно установить Яндекс.Метрику, Google Analytics, пиксель Facebook, пиксель ВК, цели на клики по кнопкам и отправку форм и кучу всего остального.

Зачем он вообще нужен? Представьте, вы (или вам) создали сайт и теперь хотите добавить в него коды Метрики, Аналитикса, пиксель фб, вк, майтаргет и так далее. Вы пишете разработчику ТЗ на установку всех этих кодов. Если что-то пошло не так и разраб поставил коды некорректно, то вы снова с ним связываетесь, выясняете почему ничего не работает, снова пишете ТЗ, а время идет. GTM решает этот вопрос. Плюс ко всему установка большого количества кодов на сайт негативно влияет на время его загрузки.

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

Регистрация в сервисе

Переходим в tagmanager.google.com и нажимаем "Создать аккаунт". Аккаунт это папка, куда вы складываете все свои проекты/сайты. В поле "Название аккаунта" можно вписать название вашего проекта, если подразумевается, что в одном аккаунте будет несколько сайтов одного большого проекта или компании. Если сайт всего один, то можно вписать просто домен. Выбираем страну, затем переходим к Созданию контейнера. Контейнер - это уже отдельный сайт. Даем ему название. Здесь, опять же, можно просто вписать домен. Целевую платформу выбираем "Веб-сайт" и нажимаем "Создать"

В открывшемся окне о соглашении нажимаем "Да"

Первым делом выходит окно какие коды куда нужно поставить. Можно скопировать весь текст и отправить разработчику, только скриншот не делайте ;-)

Во многих конструкторах сайтов достаточно добавить идентификатор GTM в настройки сайта.

Например в конструкторе tilda.cc нужно добавить этот код в настройки аналитики:

После того, как код GTM добавили на сайт необходимо опубликовать контейнер. Нажимаем справа сверху "Отправить" - "Опубликовать" - "Далее"

Установка тега Google Analytics

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

Открываем Analytics, снизу слева нажимаем "Администратор", в столбце "Ресурс" нам нужна кнопка "Отслеживание", чуть ниже нажимаем "Код отслеживания"

Копируем идентификатор отслеживания и возвращемся в GTM

В GTM нажимаем "Переменные" - "Создать"

Далее нажимаем на поле "Конфигурация переменной", а тип выбираем "Настройки Google Analytics"

Вводим название переменной, например сам идентификатор, а в поле "Идентификатор отслеживания" вставляем его и нажимаем "Сохранить"

Теперь отрываем "Теги" и нажимаем "Создать"

Нажимаем на поле "Конфигурация тега", выбираем "Google Аналитика: Universal Analytics"

Далее в пункте "Настройки Google Analytics" выбираем только что созданную переменную.

Затем нажимаем "Триггеры" и выбираем "All Pages"

Затем даем название теги, например "Google Analytics" и сохраняем. Затем в правом верхнем углу нажимаем "Отправить" - "Опубликовать" - "Далее"

Настройка Google Analytics завершена!

Установка Яндекс.Метрики

Перед тем как устанавливать код Метрики, сначала необходимо создать счетчик. Подробнее об этом в уроке: Яндекс.Метрика

Открываем метрику и счетчик сайта, который мы хотим добавить в GTM. Идем в "Настройки" спускаемся вниз и копируем код счетчика.

Открываем GTM, нажимаем "Теги" - "Создать"

Нажимаем по полю "Конфигурация тега" и выбираем "Пользовательский HTML"

В поле "HTML" вставляем скопированный ранее код счетчика

Затем нажимаем на поле "Триггеры" и выбираем All Pages

Сверху даем название тегу, например "Яндекс.Метрика" и нажимаем "Сохранить". Затем сверху справа нажимаем "Отправить" - "Опубликовать" - "Далее"

Счетчик Яндекс.Метрики установлен на сайт!

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

Установка Google Analytics 4

Здесь вообще все просто. На вкладке "Теги" сверху справа нажимаем "Создать", даем тегу название, например так и напишем "Google Analytics 4". Жмем "Конфигурация тега" и выбираем "Google Аналитика: конфигурация GA 4"

В поле "Идентификатор потока данных" вставляем номер счетчика из аналитикса, который можно найти в сведених о потоке.

Скопировали идентификатор, вставили в соответствующее поле в GTM. Ниже выбираем тригер - "All Pages"

Нажимаем сохранить и не забываем опубликовать контейнер.

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

В этом разделе урока я расскажу как установить цель для Яндекс.Метрики и Google Analytics на нажатие кнопки или отправки формы.

В GTM есть две основные сущности - теги и триггеры. Чтобы понимать разницу между ними, приведу пример из жизни. Тег - это граната, а триггер - это чека от гранаты. Граната срабатывает тогда, когда выдергивается чека. Также и тег срабатывает тогда, когда срабатывает триггер.

В триггерах мы настраиваем срабатывание конкретной кнопки или формы, в тегах указываем куда этот самый тег направить - в метрику или аналитикс.

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

Настройка триггеров

Итак, начнем мы цели - нажатие на кнопку. Разберем напримере сайта sybarite.rest

Идем в "Триггеры", нажимаем "Создать"

Даем триггеру название, например "Нажатие на кнопку instagram". Нажимаем на окно "Настройка триггера", в выпадающем окне в разделе "Клик" выбираем "Все элементы"

Затем выбираем "Некоторые клики". Теперь нам нужно правильно выбрать сам триггер и его значение.

Открываем дополнительную вкладку в браузере. В рабочей области в GTM сверху нажимаем кнопку "Предварительный просмотр"

В открывшемся окне вводим домен сайта и нажимаем Start

У нас в браузере есть 2 вкладки - "Tag Assistent" и наш сайт. Идем сначала на сайт и нажимаем на кнопку, для которой хотим настроить триггер. Затем открываем вкладку "Tag Assistent", нажимаем самую верхнюю кнопку "Link Click", затем "Variables"

Теперь нам нужно из переменных "Click Classes", "Click Element", "Click ID", "Click Target", "Click Text", "Click URL" выбрать ту, которая будет отличаться от всех кнопок на сайте. Например, переменная "Click Classes" или "Click ID" скорее всего встречаются где-то еще на сайте. А вот "Click Element" и "Click URL" содержат слово Instagram. А нам кнопка instagram и нужна.

Поэтому копируем значение без кавычек, например из "Click URL", возвращаемся в Tag Manager, выбираем Click URL - содержит - https://www.instagram.com/sybarite.rest/

Нам остается сохранить триггер и настроить тег, отправив его в Яндекс.Метрику и/или Google.Analytics

Как настроить теги листайте ниже.


Теперь рассмотрим как настроить триггер на отправку формы.

При отправке формы сайт должен либо перенаправлять на так называемую "страницу спасибо". Здесь настройка цели простая, никаких дополнительных кодов на сайт устанавливать не нужно. А есть формы, у которых после их успешной отправки всплывает окно, а сайт на другие страницы не перенаправляет. Тогда нам понадобится тип триггера "Видимость эелемента".

Итак, создаем триггер также нажав на кнопку "Создать". Даем ему название, например "Отправка формы". Затем нажимаем на окно "Настройка триггера" и выбираем "Видимость элемента"

Метод выбора переключаем на "Селектор CSS". Где этот самый селектор взять?

Рассмотрим на примере сайта geo-sin.ru отправку формы на главной странице.

Заполняем форму, отправляем. У нас появилось вот такое окно:

Нажимаем по нему правой кнопкой мыши - "Просмотреть код" (в браузере Opera это называется "Просмотреть код элемента", в Mozilla - "Исследовать элемент").

Код всплывающего окна будет подсвечен.

По коду нажимаем правой кнопкой мыши - Copy - Copy selector. Скопированное значение вставляем в GTM в поле "Селектор элементов"

Всё остальное оставляем как есть. Нажимаем "Сохранить"

Настройка тегов

Для начала разберем как настраивается тег для Google Analytics.

Идем в "Теги", нажимаем "Создать". Даем тегу название, например "Тег нажатие на кнопку Instagram (UA)". Так как у нас будет такой же тег для метрики, то в данном теге в скобочках я указал аббревиатуру, что означает Universal Analytics.

Конфигурацию тега выбираем "Google Аналитика: Universal Analytics"

Тип отслеживания выбираем "Событие". В "Категории" пишем "instagram", а в "Действии" пишем "click".

Значение "instagram" и "click" мы задаем сами, пока что они ни на что не влияют. Если бы мы настраивали тег на отправку формы, то можно было написать например так:

"Категория" - form

"Действие" - submit

В триггерах выбираем триггер, который мы только что создавали - "Нажатие на кнопку instagram" или "Отправку формы", смотря что мы настраиваем.

На этом настройка тега в GTM завершена, нажимаем "Сохранить" и не забываем опубликовать контейнер.

Настройка цели в Google Analytics

Теперь нам нужно настроить цель в самом Google Analytics. Нажимаем на пункт "Цели"

Нажимаем красную кнопку "+Цель". Даем цели название, например "Нажатие на кнопку Instagram". Тип выбираем "Событие", нажимаем "Далее".

Теперь в "Категории" мы пишем ту категорию, что мы задали для цели, а именно "instagram", в "Действии" пишем "click"

То есть как мы задали в GTM категорию и действие, так мы и пишем из сюда.

Не забываем нажать "Сохранить".

Настройка цели в Яндекс.Метрике

Настройка цели метрике выглядит следующим образом. Во-первых саму цель для начала нужно создать в самой метрике. Там мы в "Типе условия" выбираем "Java-script-событие". А идентификатор зададим к примеру "instagram"

Получившийся код цели нужно скопировать.

Возвращаемся в GTM. Также создаем тег, а в конфигурации тега выбираем "Пользовательский HTML"

В окно HTML вставляем следующую конструкцию:

<script> ym(72027076,'reachGoal','instagram'); </script>

В окне тега она выглядит так:

Цифры это код счетчика метрики. instagram - то, что мы писали в идентификаторе цели в самой Яндекс.Метрике

Затем триггер выбираем тот триггер, что мы настраивали для кнопки instagram

Настройка для цели в метрике завершена. Нажимаем "Сохранить" и публикуем контейнер.