В этой статье я рассказываю о том, как настроить цели в метрике через gtm – google tag manager.
Google tag manager (GTM) – мощный инструмент для работы с вашим сайтом. Всем интернет-маркетологам рекомендуется к изучению.
Зачем нужен GTM?
- GTM удобен для быстрого управления тегами на сайте или отдельной странице без необходимости копания в конструкторе или CMS. Это избавляет интернет-маркетолога от необходимости разбираться в разных конструкторах и CMSках. Соответственно, экономит время.
- Для установки кодов аналитики. Например, Google.Analytics или Yandex.Metrika
- Для внедрения пикселей ретаргетинга на сайт
- Для тестирования различных гипотез (A-B тестирование).
- Для быстрой установки любых скриптов и сторонних сервисов.
Преимущества использования google tag manager:
- Можно подключить нескольких человек для управления tag manager’ом
- Прост в применении. Один раз попробовав им пользоваться – понимаешь насколько он удобен и пользуешься им всегда.
- Можно устанавливать различные триггеры. Например, можно активировать скрипты на различных страницах сайта.
- Прост в настройке. Однако, новичкам придется немного разобраться в том, что такое html теги и немного узнать про то, как работает javascript.
Итак, как настроить цели в метрике через google tag manager:
Этап 1. Регистрация в GTM и настройка диспетчера.
Что нужно?
- Регистрируете или логинетесь в свой аккаунт google
- переходите по ссылке https://tagmanager.google.com
- Вводите название вашей компании, жмете “Создать аккаунт”
После нажатие на кнопку “Создать аккаунт”, вам будет предложено заполнить два поля: Создание аккаунта и Создание контейнера.
Аккаунт – ваш аккаунт, который будет управлять контейнерами tag manager’а.
Контейнер – код GTM, который вы устанавливаете на сайт (или сайт AMP) , в приложение iOS или Android. В “контейнер” вы можете в дальнейшем помещать любые коды для вашего сайта через интерфейс тэг менеджера.
После заполнения полей – и принятия пользовательского соглашения от Google – вы увидите коды для вставки на сайт:
- Если вы понимаете, о чем идет речь – установите эти коды в указанные места на вашем сайте.
- Если нет, скорее всего вы не знаете что такое html теги и базовый шаблон html страницы. Google вам в помощь =).
С настройкой GTM разобрались. Теперь разберемся с определениями в GTM:
- Тег – код на вашей странице, который выполняется при срабатывании триггера. Назначение тега – передача данных сторонним сервисам.
- Триггер – грубо говоря это условие активации какого-либо тега. Например: мы можем определить триггер, который активирует тег по нажатию на какую-либо кнопку, например, “положить в корзину” или “забронировать”.
- Переменная – параметр триггера. При загрузке страницы или выполнении пользователем определенного действия фактическое значение переменной сравнивается с заданным в триггере. В результате определяется, будет ли триггер истинным (true) или ложным (false).
Этап 2. Установка счетчика Метрики на сайт.
Для установки кода Метрики на все страницы сайта, на главной странице GTM:
- Нажмите на “Новый тег”
- “Конфигурация тега”
- Выберите тип тега – “Пользовательский HTML”

- Вставьте код метрики в поле HTML:
- После ввода кода метриики в поле HTML необходимо установить триггер, по которому будет “вставляться” код метрики на нашем сайте.
- Мы хотим, чтобы триггер метрики активировался всегда при посещении сайта. Для этого нажимаем внизу на поле “триггеры” и выбираем триггер “all pages” – все страницы:
- Нажимаем “добавить”, затем сверху – “сохранить” на синем фоне.
- Выбираем имя для нашего тега. В нашем случае можно выбрать имя – “код яндекс метрики”.
- Сохраняем.
- Для того, чтобы теперь нам отправить изменения на сайт – нам необходимо нажать на кнопку отправить в правом верхнем углу Google Tag Manager’a
- Нам предложат указать так называемую “конфигурацию отправки”. Не пугайтесь, это всего лишь контроль версий изменений в GTM – необходимо вам же, для того чтобы понимать какие изменения вы сами вносили на ваш сайт и с какой целью. Максимально подробно опишите действия (в пределах разумного, конечно же), которые вы вносили при установке какого-либо нового тега на ваш сайт.
- После того, как вы внесли описание ваших действий в новую версию вашего gtm, пора его заливать на сайт. Нажмите кнопку “опубликовать”:
Этап 3. Активация переменных в google tag manager
Пример. Мы хотим установить цель в Яндекс метрике – “нажатие на кнопку купить”.
Чтобы это сделать обычным способом, нам на сайт нужно установить скрипт и написать другой скрипт на javascript, который бы его активировал. Ща. Ага. =)
Используя google tag manager мы можем сделать это гораздо проще.
Для этого нам нужно:
- Создать аккаунт GTM – сделано в пред. пунктах
- Создать контейнер GTM для нашего сайта – сделано в пред. пунктах
- Вставить метрику в контейнер – сделано в пред. пунктах
- Зайти в раздел переменные в окне GTM слева:
- Активировать переменную “Click Classes”. Для этого, в окне переменных найдите раздел “Клики” и нажмите на кнопку “настроить”:
- Галочкой укажите Встроенные переменные Click Classes. Закройте окно Конфигурации встроенных переменных.
Этап 4. Настройка целей в Yandex.Metrika внутри GTM.
- Создайте цель в Метрике.
Подсказка: для этого перейдите в раздел “Настройка”, затем в “Цели” и нажмите на кнопку “Добавить цель”. В окне настройки цели выберите JavaScript-событие и введите название цели. В нашем случае можно ввести “нажатие на кнопку купить”.
- Придумайте уникальный идентификатор для вашей цели. Любой. Например, nazhatienaknopkukupit =)
- Нажмите на кнопку “Добавить цель”.
Мы создали цель в метрике.
Настроим активацию цели по событию:
- Для этого переходим в GTM. Создайте тег типа “пользовательский HTML”. В поле HTML вводите HTML – код:
<script>
yaCounterХХХХХХХХ.reachGoal('nazhatienaknopkukupit');
</script>
- Вместо
ХХХХХХХХ
– вводите номер вашего счетчика Yandex.Metrica. - Нажимаем на поле “триггеры”
- Появится окно “Выберите триггер”
- Нажимаем на плюсик вверху справа (нам нужен особый триггер, надо его добавить)
- Появится окно детальной настройки триггера
- Выбираем пункт Клик – Все элементы
- Выбираем в пункте “Триггер активируется на следующих страницах: “Некоторые клики”
- В условиях активации триггера выбираем переменную Click Classes
- Выбираем условие содержит
- Теперь нам осталось указать название класса кнопки, нажатие по которой нас интересует.
- Для этого (в Chrome) нажимаем правой кнопкой по интересующей кнопке.
- Выбираем пункт “посмотреть код”
- В консоли находим класс элемента. (Если вы снова не понимаете о чем идет речь – гуглите запрос “что такое html”, а затем “что такое class в html”.)
- Скопируйте класс элемента, в нашем случае – кноки “купить” ( ну или заказать как на картинке – значения не имеет).
- После поля содержит внесите название целевого класса.
- Цель настроена.
- Проверьте, чтобы все работало в режиме предпросмотра и нажмите “отправить”, если все хорошо.
Все. Цели в метрике настроены с помощью инструмента Google Tag Manager. И это малая часть того, что может GTM.
В заключение скажу, что этот метод менее трудоемок, чем установка скриптов на сам сайт через инструменты и методы CMS, под которой управляется ваш сайт.
Не поленитесь и изучите этот инструмент, он сэкономит вам кучу времени и нервов в будущем. А еще по нему есть бесплатный курс в Google Academy ;)