Как создать цели в метрике через Google Tag Manager (GTM)

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