Как интегрировать Google Tag Manager с Яндекс.Метрикой

Без системы веб-аналитики оценить эффективность сайта, продумать точки роста бизнеса в сети невозможно — вы не поймете, как посетители взаимодействуют с сайтом. Поэтому, в частности, необходимо подключить Яндекс.Метрику, которая собирает данные о посещениях вашего сайта. Сервис формирует отчеты для отслеживания эффективности ресурса.

Этот пост поможет настроить мониторинг взаимодействий пользователей с сайтом при помощи Яндекс.Метрики и Google Tag Manager (GTM) с минимальным вовлечением программиста.

Установка Google Tag Manager

Перед началом работы (если это не сделано ранее), необходимо создать рабочую область для публикации изменений на сайт через GTM (контейнер) и внедрить его код на сайт. С помощью GTM будем создавать теги и триггеры, предназначенные для отправки необходимых взаимодействий на сайте в Яндекс.Метрику.

Код для установки будет выглядеть так:

Детальнее о настройке и установке «Менеджера тегов» читайте в справке Google.

Интеграция счетчика Метрики на сайт

Перед началом настройки тегов необходимо получить код счетчика Метрики для сайта.

1. Чтобы получить код, перейдите в раздел «Настройки» — «Счетчик».

Заполняем все необходимые данные:

• название счетчика;
• домен;
• часовой пояс;
• дополнительные опции кода счетчика;

Например, если на сайте установлен код «Электронной коммерции» через dataLayer, необходимо включить опцию «Отслеживание электронной коммерции».

О том, как внедрить электронную торговлю, читайте в справке Google Developer. А про настройку отслеживания электронной коммерции на сайте читайте в нашем блоге.

• дополнительные настройки. Важно: в зависимости от того, где вы поставите «галочку», изменится необходимый для установки код счетчика;

Подробно:

• отслеживание хеша в адресной строке браузера рекомендуется устанавливать только для AJAX-сайта;
• установка галочки «Для XML» сайтов отключает тег Noscript. Тег определяет раздел HTML для вставки, если тип сценария на странице не поддерживается или сценарии в настоящее время отключены в браузере. Детальнее здесь;
• «В одну строку» — если ваша CMS позволяет внедрить код одной строкой;
• «Информер» — утилита, на которой отражается статистика посещаемости вашего сайта;
• «Альтернативный CDN» — опция предназначена для регионов, в которых заблокирован доступ к сервисам Яндекс.

При включении опции код в счетчике https://mc.yandex.ru/metrika/tag.js  изменяется на: https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js

Например, если трафик поступает в Метрику из Украины, альтернативный CDN обязательно должен быть в коде счетчика, так как на территории Украины провайдеры полностью заблокировали доступ ко всем сервисам Яндекса, Mail.ru, Одноклассники и Вконтакте.

• «Устаревший код счетчика» стоит устанавливать на сайт только при условии, что вы хотите использовать предыдущую версию Вебвизора.

В итоге готовый код счетчика выглядит так:

Переходим к настройке Google Tag Manager:

1. Создаем новый тег типа «Custom HTML» («Пользовательский HTML»): 

2. Копируем счетчик Яндекс.Метрики и интегрируем его в созданный тег:

Для срабатывания созданного тега, на каждой странице сайта, необходимо подключить триггер «Просмотр» — «Все страницы».

Триггер в GTM — условие, при котором активируется или блокируется тег

3. Проверяем срабатывание созданного тега через «Предварительный просмотр»:

Если тег сработал без ошибок, чтобы установить его необходимо опубликовать изменения:

После того, как счетчик Метрики установлен на сайт необходимо настроить цели в Яндекс.Метрике.

Отслеживаем выполнение целей в Метрике через GTM

В Яндекс.Метрике доступно два типа целей и четыре условия срабатывания этих целей. Цели:

• «Конверсионные» — пользователь совершил действие-конверсию;
• «Ретаргетинговые» — пользователь совершил действие для целевой конверсии, но не совершил саму конверсию (например, зашел на сайт, начал оформлять заказ, но «бросил корзину»).

Условия:

• «Количество просмотров» — глубина просмотров сайта;
• «Javascript — событие» — выполнение события на сайте;
• «Посещение страниц» — просмотр определенной страницы;
• «Составная цель» — выполнение последовательности действий, которые необходимы для достижения цели.

Рассмотрим самый распространенный пример выполнения цели на сайте «Добавление в корзину» или «Оставить заявку», то есть цель должна срабатывать по клику на соответствующую кнопку на сайте, либо после выполнения определенного события на сайте через DataLayer.

DataLayer — название переменной JavaScript. Она служит для передачи данных в GTM. Также используют термин «уровень данных».

1. Чтобы посмотреть, какие события у нас срабатывают при клике на кнопку купить/оставить заявку необходимо включить «Предпросмотр в Google Tag Manager».

После включения предпросмотра необходимо очистить кэш и обновить страницу на которой установлен код GTM.

Кликаем на кнопку, по которой срабатывает определенное событие и будет регистрироваться цель. В данном случае срабатывает событие «addToCart»:

2. Переходим к настройке цели «Добавление в корзину» в Яндекс.Метрике.

• заходим в настройки счетчика и переходим во вкладку «Цели»;

• создаем цель типа «JavaScript — событие» и указываем название события «addToCart» и тип цели — «Ретаргетинговая» (так как, выполнив данное событие пользователь еще не совершил конечное целевое действие — транзакцию);

3. Далее настраиваем передачу выполнения цели при срабатывании события в Метрику через GTM:

• создаем триггер, по которому будет срабатывать наш будущий тег и передавать данные в Метрику;
• на вкладке «Workspace» — «Triggers» («Рабочая область» — «Триггеры») создаем новый тригер типа «Custom event» (Пользовательское событие);

• указываем имя события, которое срабатывает на сайте при клике на кнопку «Добавить в корзину». В нашем случае это «addToCart».

4. Теперь создаем тег отслеживания события. Тег типа «Custom HTML» («Пользовательский HTML») для отправки выполнения цели в Метрику. Для этого:

• создаем тег типа «Custom HTML» («Пользовательский HTML»)
• копируем код цели в Метрике;

• интегрируем его в тег;

ХХХХХ — счетчик Метрики.

• указываем триггер для срабатывания цели;

5. Перед публикацией необходимо проверить работу тега. Для этого запускаем «Предварительный просмотр» и проверяем, срабатывает ли тег по клику на кнопку «Купить»/«Добавить в корзину». Срабатывает — публикуем изменения.

О том, как проверить работу цели в режиме реального времени можно прочитать в официальной справке Яндекс.

Теперь выполнение необходимых целей будет отображаться на вкладке «Стандартные отчеты» в Яндекс.Метрике.

Выводы

1. Без системы веб-аналитики оценить эффективность сайта является невозможным.
2. Устанавливайте дополнительные опции и настройки, исходя из целей Вашего бизнеса.
3. Необходимо проводить настройку целей и разделять их на «Конверсионные» и «Ретаргетинговые».
4. Если сервисы Яндекса недоступны/заблокированы в вашей стране и счетчик тормозит загрузку сайта, поставьте галочку напротив опции «Альтернативный CDN».
5. Перед публикацией изменений, внесенных через Google Tag Manager, проверяйте передачу данных в Метрику при помощи «Предпросмотра» в Google Tag Manager.
6. Проверяйте выполнение цели через консоль разработчика.