Настройка Яндекс Метрики через Google Tag Manager : настройка целей, фиксация отправки форм

25.09.2017
7 важных отчетов Google Analytics для digital-аналитика
7 важных отчетов Google Analytics для digital-аналитика: электронная коммерция, User Id, SEO, PPC и другие
17.08.2017
Чек-лист из 121 пункта для запуска, настройки и ведения контекстной рекламы
09.10.2017
У многих владельцев сайтов и маркетологов возникает проблема настройки Яндекс.Метрики с помощью Google Tag Manager. Мы решили создать гайд, с помощью которого можно легко настроить Метрику через Tag Manager, но перед этим самый популярный вопрос: зачем настраивать метрику через Tag Manager, когда можно установить ее напрямую в код сайта?

  • С помощью Google Tag Manager можно выдать гостевой доступ специалисту или агентству для просмотра настроек, без возможности редактирования. Собирает данные не только с сайтов, но и из мобильных приложений.
  • Можно настроить не только Google Analytics, но и Яндекс.Метрику, DoubleClick, AB TASTY, Adometry, Awin, Crazy Egg, Hotjar, K 50, Marin, AdAdvisor, сервисы опросов и другие сервисы.
  • Tag Manager запрашивает минимум информации от пользователя — основная часть функционала автоматизирована, что упрощает работу. Настройка базовых скриптов состоит из 2-4 шагов.
  • Обычно, для настройки счетчика, надо внести изменения в код сайта. Для этого составляется ТЗ и ищется специалист. После, выясняется, что все скрипты настроены непонятно, располагаются в разных местах — еще одна задержка и так далее. В Google Tag Manager можно объединить все системы аналитики и нужные скрипты.


А теперь, поехали!

Настройка Метрики через Tag Manager похожа на настройку Google Analytics, с одним но – для Analytics предусмотрен встроенный интерфейс настройки событий, целей и т.п. Все происходит во внутреннем интерфейсе, через выбор нужных параметров щелчком мыши.

Для настройки Яндекс.Метрики нужно самостоятельно написать несколько строчек кода.
Начнем с установки кода отслеживания Метрики на все страницы сайта. Для этого переходим в “Теги” и нажимаем “Создать”:



Прописываем имя тега и выбираем тип тега “Пользовательский HTML”:



Теперь нужно скопировать код счетчика Яндекс.Метрики и вставить в поле “HTML”:



Для получения кода счетчика переходим в Метрику, заходим в “Настройки” и выбираем “Код счетчика”:



После того, как вы скопируете код счетчика в Tag Manager должно получиться примерно так:



Следующий шаг — добавить триггер активации для тега. Для этого, нажимаем на “Триггеры” и выбираем “All Pages”:



Затем нажимаем на кнопку “Сохранить”, выбираем “Предварительный просмотр” в верхней правой части окна. Переходим на сайт и смотрим, работает ли тег Яндекс.Метрики. Если все работает – переходим назад в Tag Manager и нажимаем на “Выйти из режима предварительного просмотра”, после чего нажимаем кнопку “Отправить”, которая находится рядом с кнопкой предварительного просмотра:



Таким образом, мы установили на сайт Яндекс.Метрику через Google Tag Manager.

Следующий этап — фиксация событий на сайте и передача полученных данных в Метрику.


№1: установка целей Яндекс.Метрики через Tag Manager

Счетчик Метрики уже установлен на сайте. Теперь самое время настроить фиксацию целей. Для примера возьмем кнопку, клик по которой должен фиксироваться Метрикой.

Для этого переходим в Метрику, выбираем сайт, нажимаем на название, после чего в левой колонке кликаем на “Настройка”, в панели вкладок выбираем “Цели” и жмем “Добавить цель”:



Далее выбираем тип “JavaScript-событие”, прописываем название цели и уникальный идентификатор:



Затем переходим в Google Tag Manager, переходим в “Теги”, нажимаем кнопку “Создать”, кликаем на поле “Конфигурация тега” и выбираем “Пользовательский HTML”:



Затем в поле пользовательский HTML вставляем:
<script>
  yaCounterХХХХХХХХ.reachGoal('идентификатор цели')
</script>
ХХХХХХХХ заменяем на номер счетчика Яндекс.Метрики, а “идентификатор цели” на выбранный идентификатор цели в Метрике.

Далее жмем “Триггеры”, в правом верхнем углу кликаем на иконку +, вводим имя триггера, кликаем на “Настройки триггера” и выбираем “Все элементы”:



Теперь нужно настроить триггер. В условиях активации выбираем “Некоторые клики”, в появившихся полях находим “Click Classes” и следующем поле “равно”:



Затем идем на сайт и находим нужный класс элемента. Для примера зайдем на сайт М.Видео и узнаем класс кнопки добавления в корзину.

Заходим на сайт, нажимаем правой кнопкой мыши на нужном элементе и выбираем “Просмотреть код”. Находим строчку class=”...” для нужного элемента:



Копируем все содержимое class=”...” и возвращаемся в Tag Manager. Вставляем скопированный класс в правое поле:



Нажимаем “Сохранить” в правом верхнем углу. Затем сохраняем тег и переходим в режим предпросмотра. Если все работает как надо, то выключаем предпросмотр и в правом верхнем углу нажимаем кнопку “Отправить”.

Таким образом настраиваются цели Яндекс.Метрики через Google Tag Manager. После того, как освоитесь с классами, можете поэкспериментировать с другими триггерами.

№2: фиксация отправки форм

Не всегда получается установить в качестве цели кнопку отправки формы или нужно фиксировать именно отправку формы.

Для этого заходим в Яндекс.Метрику, переходим в настройки и создаем цель с условием активации “JavaScript-событие”, вводим название и идентификатор цели.

Затем открываем Tag Manager и создаем новый тег для передачи данных в Метрику. Выбираем тип “Пользовательский HTML”, в поле “HTML” вставляем:
<script>
  yaCounterХХХХХХХХ.reachGoal('идентификатор цели')
</script>
ХХХХХХХХ заменяем на номер счетчика Яндекс.Метрики, а “идентификатор цели” на выбранный идентификатор цели в Метрике.

Теперь кликаем на “Триггеры”, в правом верхнем углу жмем на иконку +, вводим имя триггера, кликаем на “Настройки триггера” и выбираем “Отправка формы”:



Если на сайте только одна форма, то ничего не меняем. Если форм несколько, то в условиях активации выбираем “Некоторые формы”.

Дальше выбираем активацию триггера по переменной “Form Classes”, затем “равно”. Переходим на сайт, повторяем действия с просмотром кода. Находим элемент
и в нем class=”...”:



Копируем содержимое class=”...” формы и возвращаемся в Google Tag Manager. Вставляем скопированный класс в правое поле:



Жмем “Сохранить”, потом сохраняем тег, переходим в режим предварительного просмотра и тестируем отправку формы. Если все работает правильно, то выходим из режима предварительного просмотра и в правом верхнем углу нажимаем кнопку “Отправить”.


№3: подключение дополнительных переменных

Иногда не хватает переменных, которые дает Tag Manager в начале. Чтобы подключить дополнительные переменные переходим в “Переменные”, которые находятся в левой колонке, затем нажать кнопку “Настроить” и в появившемся меню выбрать нужные переменные:

Пошаговое руководство по установке Яндекс.Метрики на сайт с помощью Google Tag Manager. Разбираем добавление счетчика на сайт, настройку целей, фиксацию отправки форм и добавление новых переменных.