В этой статье я рассказываю о том, как настроить цели в метрике через 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 ;)