Как интегрировать Google Tag Manager с Яндекс.Метрикой
Без системы веб-аналитики оценить эффективность сайта, продумать точки роста бизнеса в сети невозможно — вы не поймете, как посетители взаимодействуют с сайтом. Поэтому, в частности, необходимо подключить Яндекс.Метрику, которая собирает данные о посещениях вашего сайта. Сервис формирует отчеты для отслеживания эффективности ресурса.
Этот пост поможет настроить мониторинг взаимодействий пользователей с сайтом при помощи Яндекс.Метрики и Google Tag Manager (GTM) с минимальным вовлечением программиста.
Установка Google Tag Manager
Перед началом работы (если это не сделано ранее), необходимо создать рабочую область для публикации изменений на сайт через GTM (контейнер) и внедрить его код на сайт. С помощью GTM будем создавать теги и триггеры, предназначенные для отправки необходимых взаимодействий на сайте в Яндекс.Метрику.
Код для установки будет выглядеть так:
Детальнее о настройке и установке «Менеджера тегов» читайте в справке Google.
Интеграция счетчика Метрики на сайт
Перед началом настройки тегов необходимо получить код счетчика Метрики для сайта.
- Чтобы получить код, перейдите в раздел «Настройки» — «Счетчик».
Заполняем все необходимые данные:
- название счетчика;
- домен;
- часовой пояс;
- дополнительные опции кода счетчика;
Например, если на сайте установлен код «Электронной коммерции» через 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:
- Создаем новый тег типа «Custom HTML» («Пользовательский HTML»):
- Копируем счетчик Яндекс.Метрики и интегрируем его в созданный тег:
Для срабатывания созданного тега, на каждой странице сайта, необходимо подключить триггер «Просмотр» — «Все страницы».
Триггер в GTM — условие, при котором активируется или блокируется тег
- Проверяем срабатывание созданного тега через «Предварительный просмотр»:
Если тег сработал без ошибок, чтобы установить его необходимо опубликовать изменения:
После того, как счетчик Метрики установлен на сайт необходимо настроить цели в Яндекс.Метрике.
Отслеживаем выполнение целей в Метрике через GTM
В Яндекс.Метрике доступно два типа целей и четыре условия срабатывания этих целей. Цели:
- «Конверсионные» — пользователь совершил действие-конверсию;
- «Ретаргетинговые» — пользователь совершил действие для целевой конверсии, но не совершил саму конверсию (например, зашел на сайт, начал оформлять заказ, но «бросил корзину»).
Условия:
- «Количество просмотров» — глубина просмотров сайта;
- «Javascript — событие» — выполнение события на сайте;
- «Посещение страниц» — просмотр определенной страницы;
- «Составная цель» — выполнение последовательности действий, которые необходимы для достижения цели.
Рассмотрим самый распространенный пример выполнения цели на сайте «Добавление в корзину» или «Оставить заявку», то есть цель должна срабатывать по клику на соответствующую кнопку на сайте, либо после выполнения определенного события на сайте через DataLayer.
DataLayer — название переменной JavaScript. Она служит для передачи данных в GTM. Также используют термин «уровень данных».
- Чтобы посмотреть, какие события у нас срабатывают при клике на кнопку купить/оставить заявку необходимо включить «Предпросмотр в Google Tag Manager».
После включения предпросмотра необходимо очистить кэш и обновить страницу на которой установлен код GTM.
Кликаем на кнопку, по которой срабатывает определенное событие и будет регистрироваться цель. В данном случае срабатывает событие «addToCart»:
- Переходим к настройке цели «Добавление в корзину» в Яндекс.Метрике.
- заходим в настройки счетчика и переходим во вкладку «Цели»;
- создаем цель типа «JavaScript — событие» и указываем название события «addToCart» и тип цели — «Ретаргетинговая» (так как, выполнив данное событие пользователь еще не совершил конечное целевое действие — транзакцию);
- Далее настраиваем передачу выполнения цели при срабатывании события в Метрику через GTM:
- создаем триггер, по которому будет срабатывать наш будущий тег и передавать данные в Метрику;
- на вкладке «Workspace» — «Triggers» («Рабочая область» — «Триггеры») создаем новый тригер типа «Custom event» (Пользовательское событие);
- указываем имя события, которое срабатывает на сайте при клике на кнопку «Добавить в корзину». В нашем случае это «addToCart».
- Теперь создаем тег отслеживания события. Тег типа «Custom HTML» («Пользовательский HTML») для отправки выполнения цели в Метрику. Для этого:
- создаем тег типа «Custom HTML» («Пользовательский HTML»)
- копируем код цели в Метрике;
- интегрируем его в тег;
ХХХХХ — счетчик Метрики.
- указываем триггер для срабатывания цели;
- Перед публикацией необходимо проверить работу тега. Для этого запускаем «Предварительный просмотр» и проверяем, срабатывает ли тег по клику на кнопку «Купить»/«Добавить в корзину». Срабатывает — публикуем изменения.
О том, как проверить работу цели в режиме реального времени можно прочитать в официальной справке Яндекс.
Теперь выполнение необходимых целей будет отображаться на вкладке «Стандартные отчеты» в Яндекс.Метрике.
Выводы
- Без системы веб-аналитики оценить эффективность сайта является невозможным.
- Устанавливайте дополнительные опции и настройки, исходя из целей Вашего бизнеса.
- Необходимо проводить настройку целей и разделять их на «Конверсионные» и «Ретаргетинговые».
- Если сервисы Яндекса недоступны/заблокированы в вашей стране и счетчик тормозит загрузку сайта, поставьте галочку напротив опции «Альтернативный CDN».
- Перед публикацией изменений, внесенных через Google Tag Manager, проверяйте передачу данных в Метрику при помощи «Предпросмотра» в Google Tag Manager.
- Проверяйте выполнение цели через консоль разработчика.
Свежее
Девять онлайн-сервисов для App Store Optimization и локализации приложений в Азии
Обзор сервисов, которые помогут решить вопрос языкового барьера и эффективно продвигать приложения в Азии
Размеры картинок для социальных сетей: Facebook, Twitter, Instagram, YouTube, Pinterest, LinkedIn, Tumblr
Пост постоянно обновляется актуальными данными о размерах картинок
10 полезных советов по работе с Performance Max
Разбираемся в тонкостях и особенностях новейшего типа кампаний Google Ads