Расскажите о вашей задаче
Аналитика

Как интегрировать 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»): 

Создаем новый тег типа Custom HTML

Пользовательский HTML

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

Копируем счетчик Яндекс Метрики

интегрируем в созданный тег

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


Просмотр и Все страницы

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

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

Тег метрики

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

Необходимо опубликовать изменения

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

Цели позволяют отслеживать поведение пользователей на сайте и их взаимодействие с сайтом. Настройку целей необходимо проводить исходя из конкретных задач, которые необходимы для определения эффективности вашего сайта/рекламы.

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

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

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

Ретаргетинговые и конверсионные цели

Условия:

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

Как добавить цели

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

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

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

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

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

addToCart

  1. Переходим к настройке цели «Добавление в корзину» в Яндекс.Метрике.
  • заходим в настройки счетчика и переходим во вкладку «Цели»;

переходим во вкладку Цели

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

создаем цель типа JavaScript событие

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

Пользовательское событие

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

указываем имя события

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

теперь можно скопировать код

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

интегрируем код в тег

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

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

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

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

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

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

Выводы

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

Комментарии (0)

Последние комментарии

    Чтобы оставить комментарий, нужно войти

    Чтобы оставлять комментарии, переключитесь на профиль читателя

    Подписаться

    на самую полезную рассылку по интернет-маркетингу

    Самое

    обсуждаемое популярное читаемое
    Просматривая этот сайт, вы соглашаетесь с нашей политикой конфиденциальности — Принять