Как установить Яндекс Метрику и Google Analytics через GTM
Июл 02, 2020

Цель статьи: научиться устанавливать счетчик Яндекс Метрики и Google Analytics с помощью Google Tag Manager.

Время чтения: 15 минут

Практическое задание: установить счетчики веб-аналитики на свой проект

Для увеличения анимации: нажмите на изображение, чтобы открыть полноэкранный режим



Уже написано много статей на тему корректной настройки и установки счетчиков веб-аналитики. Присоединяемся ко всему сказанному. В статье сделаем упор на техническую часть работы в Google Tag Manager. Установить счетчики можно несколькими способами: через код сайта, плагины CMS и GTM. Сложностей установки через плагины нет. В панели администратора достаточно указать номер счетчика Яндекс Метрики и Google Analytics, подробные инструкции можете найти в документации к вашей CMS.

как установить яндекс метрику и google analytics через gtm


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

По своей сути GTM — коробка, то место, где можем создавать различные теги на сайте и мобильном приложении, проще использовать коды сторонних служб, самостоятельно управлять тегами и заниматься тестированием и отладкой.

Научившись использовать Google Tag Manager, можем снизить расходы на привлечение разработчиков, ведь большую часть задач сможем выполнять самостоятельно. Благодаря тому, что GTM — бесплатный инструмент, он очень быстро набрал популярность среди маркетологов и аналитиков. Обращаем внимание, что с помощью инструмента закрывается большая часть задач, однако работать с ним будет легче, есть будут минимальные знания HTML или JavaScript.

Последовательность действий:

  • Перейти на сайт — https://tagmanager.google.com и нажать «Создать аккаунт»
  • Назвать аккаунт, выбрать страну
  • В названии контейнера указать URL сайта
  • Выбрать целевую платформу
  • Сохранить фрагменты кода
создать аккаунт gtm

После создания аккаунта появится всплывающее окно, в котором появится два фрагмента кода, первый из которых нужно поместить как можно ближе к началу тега <head>, второй — сразу после открывающего тега <body>. Установка фрагмента кода GTM — единственный случай, когда придется использовать код сайта, вся дальнейшая работа с Google Tag Manger происходит в интерфейсе.

Пример установленного кода GTM на сайте:

установка кода gtm


Создание счетчика Яндекс Метрики

После установки GTM на сайт, перейдем к созданию и установке счетчика Яндекс Метрики. Последовательность действий:

  • Перейти на сайт https://metrika.yandex.ru/ под почтой в Яндексе
  • Перейти на вкладку «Добавить счетчик»
  • В «Имя счетчика» вводим название проекта, адрес сайта копируем полностью из строки браузера
  • Поставить галочку напротив чекбокса «Принимать данные только с указанных адресов»
  • Если на сайте нет поддоменов, чекбокс не ставим
  • Выбрать корректный часовой пояс, в котором работает сайт
  • Включить Вебвизор, карту скроллинга, аналитику форм, принять пользовательское соглашение.
  • Создать счетчик
создать аккаунт яндекс метрики


После создания аккаунта произведем дополнительные настройки счетчика:

  • После перехода на страницу онбординга выбрать любой способ установки кода счетчика Метрики. Отличие только в инструкции, которая указана ниже. Для установки счетчика мы используем GTM, поэтому можно выбрать этот вариант.
  • Если у вас интернет-магазин, то включите чекбокс «Электронная коммерция».
    Важно: не изменяйте название контейнера данных, оно пригодится в будущем для настройки электронной коммерции.
  • Контентная аналитика — отчеты, которые подходят для онлайн-изданий. Для работы отчётов понадобится разметка Schema.org — она же нужна для улучшенного представления сайта в поисковых снипеттах. Добавить её на сайт поможет разработчик. Подробная инструкция есть в помощи Метрики.
  • Оставьте без изменений валюту и тайм-аут визита в минутах. Использовать старый код счетчика не нужно, а настройка использования в одну строку не имеет практического значения.
  • В дополнительных настройках можете выбрать «Отслеживание хеша в адресной строке браузера». Применяется для AJAX-сайтов, на которых загрузка динамического контента происходит без перезагрузки страницы, а также если в адресной строке присутствует # и есть ссылки вида site.ru/#example.
  • Настройка «Альтернативный CDN» позволяет корректно учитывать посещения из регионов, в которых ограничен доступ к Яндекс.Метрике. Включив эту функцию, скорость загрузки кода счетчика может значительно снизится.
  • Настройка «Для XML сайтов» позволяет скрыть элемент noscript, который не должен находиться на таких сайтах. После включения настройки часть кода Метрики (между <noscript> </noscript>) скроется из конечного кода.
создать аккаунт яндекс метрики


Установка счетчика Яндекс Метрики

После создания аккаунта Яндекс Метрики и установки GTM на сайт, приступим к установке счетчика. Как сказали, акцентируем внимание на технической части, лишь немного затрагивая теорию. Последовательность действий:

  • Перейдите на сайт Яндекс Метрики, скопируйте код счетчика
  • Создайте новый тег в GTM, назовите его YM-pageview (хотя название может быть любым, позже объясним логику названия тегов)
  • Выберите в типах тега «Пользовательский HTML» и вставьте код Метрики, в триггерах выберите All page
  • Сохраните изменения

яндекс метрика gtm


Немного теории

Тег в Google Tag Manager — размещенный на страницах сайта JavaScript- или HTML-код, обеспечивающий выполнение необходимых функции: отслеживание трафика, поведения посетителей, анализ эффективности рекламы на сайте, которые затем передаются в сторонние системы: Google Ads, Яндекс Метрика, Google Analytics. Тип тега «Произвольный HTML» позволяет вставлять в него различные фрагменты кода, что мы и сделали в случае с кодом счетчика Яндекс Метрики

Триггер в Google Tag Manager — условие, при котором срабатывают теги. Триггер «All pages» означает, что при каждом событии «Просмотр страницы» будет срабатывать тег. Счетчик Яндекс Метрики должен быть установлен на каждой странице сайта. При просмотре каждой страницы сайта отправляется событие «All pages», поэтому наш счетчик будет срабатывать при каждом просмотре страниц сайта.

Как написали, название тега может быть произвольным. Рекомендуем придерживаться единого наименования тегов, чтобы управление внутри GTM было удобным для вас и другим специалистом. В названии «YM-pageview» заложено название счетчика Яндекс Метрики и событие, при котором будет отправляться тег.


Создание счетчика Google Analytics

Теперь создадим аккаунт в GA и произведем простые настройки счетчика. Последовательность действий:

  • Перейти на сайт https://analytics.google.com/ нажать на кнопку «Создать аккаунт»
  • Ввести название аккаунта, все галочки с чекбоксов можно снять
  • Выбрать, что анализируем «веб-сайт»
  • Название ресурса — URL сайта, адрес сайта — тот же URL через защищенный протокол https
  • Выбрать отрасль, регион и часовой пояс, принять пользовательское соглашение, сохранить.

создание google analytics

создание google analytics

Счетчик GA состоит из трех сущностней: аккаунт, ресурс и представление. При переходе в настройки увидите каждую из них. Последовательность действий:

  • Перейти в аккаунт GA и проваливаться во вкладу «Администратор»
  • Перейти в «Настройки ресурса»
  • Поставить галочки напротив «Разрешить пометку вручную», «Включить демографические отчеты» и «Использовать улучшенную атрибуцию ссылок»

создать google analytics


Немного теории:

Разрешить пометку вручную (значения UTM)

В Яндекс Метрике и Google Analytics есть автопрометка объявлений: yclid и gclid соответственно.
Автопрометка передает данные о переходе по объявлениям в соответствующие системы аналитики. При этом каждое объявление в Директе и Ads мы дополнительно размечаем UTM-метками. Если объявления в Google Ads не разметить, то данные по переходам не будут попадать в Яндекс Метрику. В случае, если объявления Яндекса не разметить, но данные по переходам не будут отображаться в GA. Включая данную настройку, мы отдаем UTM-меткам приоритет в кампаниях Google Ads относительно gclid.

Включить демографические отчеты

Включенная настройка позволит в отчетах GA анализировать демографическую информацию (возраст, пол) и данные об интересах пользователей (сайты какой тематики они посещают и какие покупки делают в Интернете). Информация об интересах пользователей также пригодятся при настройка динамического ремаркетинга в Google.

Улучшенная атрибуция ссылок

Позволяет получать более подробную статистику по ссылкам на сайте с помощью специального расширения для Google Chrome — Page Analytics. Этот вид анализа помогает производить постраничную оценку сайта, руководствуясь кликами пользователей по различным ссылкам, расположенным на странице.

Сбор и хранение данных

Включенная функция ремаркетинга позволяет собирать данные пользователей для ремаркетинговых кампаний на поиске и КМС, функция отчетов по рекламе позволяет использовать файлы coockie и позволяют создавать аудитории ремаркетинга на основе данных о поведении, демографии и интересах, а также передавать эти аудитории в Google Рекламу, использовать данные о демографии и интересах в отчетах Google Аналитики, создавать сегменты на основе этих данных.

Последовательность действий:

  • Нажмите на вкладку «Администратор»
  • Перейти на вкладку «Отслеживание» — «Сбор данных», включить ремаркетинг и функцию отчетов по рекламе
  • Перейти на вкладку «Хранение данных», поставить интересующий интервал времени

Включенная функция ремаркетинга позволяет собирать данные пользователей для ремаркетинговых кампаний на поиске и КМС, функция отчетов по рекламе позволяет использовать файлы coockie и позволяют создавать аудитории ремаркетинга на основе данных о поведении, демографии и интересах, а также передавать эти аудитории в Google Рекламу, использовать данные о демографии и интересах в отчетах Google Аналитики, создавать сегменты на основе этих данных.

создать google analytics


Настройка представления

Если в дальнейшем планируете использовать электронную торговлю на сайте, нужно включить эту функцию на уровне представления. Последовательность действий:

  • Перейти в панель «Администратор», нажать на вкладку «Настройки электронной торговли»
  • Включить отчеты для электронной торговли
создать google analytics



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

  • Перейти на вкладку «Администратор», далее в «Настройки представления»
  • Проверить часовой пояс, поменять валюту на рубли, исключить обращения роботов
  • Остальные настройки пока оставить без изменений
создание google analytics


Как установить Google Analytics через GTM

После первичной подготовки счетчика можем приступить к установке. Принцип установки тот же, что у Яндекс Метрики: создается отдельный тег, который срабатывает при активации триггера «All pages», но добавляется одна переменная. Последовательность действий:

  • Скопировать идентификатор отслеживания Google Analytics, который находится в настройках «Кода отслеживания»

создать google analytics



Этот идентификатор отслеживания будет указан в пользовательской переменной, которую будем использовать при настройка тега, то есть нашего счетчика. Переменная — это пара вида «ключ-значение». В данной ситуации ключом будет переменная Google Analytics, значением — идентификатор отслеживания. Далее в GTM нужно:

  • Перейти в блок «Переменные», создать новую пользовательскую переменную
  • Назвать ее по полному номеру идентификатора GA
  • В конфигурации переменной в разделе «Утилиты» выбрать «Настройки Google Analytics»
  • В идентификатор отслеживания поместить идентификатор GA
  • Сохранить переменную

переменная google analytics


После создания переменной нужно создать новый тег с триггером «All pages». Последовательность действий:

  • Перейдите в раздел «Теги», создайте новый тег
  • Назовите тег «GA-pageview»
  • В конфигурации тега выберите Google Аналитика — Universal Analytics, тип отслеживания — «Просмотр страницы»
  • Выберите переменную, которую создали ранее и соответствует номеру идентификатора отслеживания
  • В триггерах выберите «All Pages» и нажмите «Сохранить»

тег gtm



Проверка установки Яндекс Метрики и Google Analytics

Поздравляем, вы только что настроили теги с счетчиками Яндекс Метрики и Google Analytics с помощью GTM. Теперь проверим корректность установки с помощью «Предварительного просмотра».

Способ №1

Предварительный просмотр (режим отладки) — функция в GTM, с помощью которой можно проверить корректность работы тегов перед публикацией. Для того, чтобы перейти в режим отладки, в правом верхнем углу в интерфейсе GTM нажмите «Предварительный просмотр» и после включения режима перейдите на сайт, где установлен контейнер. Снизу появится окно просмотра, при первой загрузке экрана увидите два тега: YM-pageview и GA-pageview. Это значит, что счетчики сработали при просмотре страницы. Подобную проверку можете выполнить на любой странице сайта.

предварительный просмотр

предварительный просмотр gtm


После того, как убедитесь, что теги срабатывают при посещении страницы, вернитесь в Google Tag Manager, выйдите из режима отладки и опубликуйте изменения с помощью кнопки «Отправить»

как установить яндекс метрику и google analytics


Способ №2

Чтобы проверить корректность установки Яндекс Метрики на сайте, в URL сайта добавьте конструкцию ?_ym_debug=1. Например, для нашего интернет-магазина, на котором проводится обучение, ссылка будет выглядеть так: https://ownphone.ru/?_ym_debug=1.

После перехода на сайт зайдите в консоль разработчика (F12 для Google Chorme) на вкладку «Console». В ней увидите событие PageView и номер счетчика Яндекс Метрики:

установка яндекс метрики


При этом на стартовой странице Яндекс Метрике увидите зеленый значок напротив счетчика. Это значит, что Яндекс Метрика корректно установлена на сайте:


Чтобы проверить корректность установки Google Analytics, скачайте Google Tag Assistant — расширение для Google Chrome. Перейдите на сайт, включите режим «Enable», обновите страницу. После обновления кликните на расширении и увидите, что установлен и счетчик Google Analytics, и контейнер Google Tag Manager:

google tag assisstant


От авторов

Надеемся, статья была интересной, а полученные знания сразу сможете применить на практике. Если статья понравилась, сохраняйте в закладки, делайте репосты в социальных сетях, знания должны свободно распространяться.

Чтобы получить практические навыки работы с Яндекс Директ, Google Ads, Яндекс Метрикой и Google Analytics, Google Tag Manager и Google Merchant Center — регистрируйтесь на курс по контекстной рекламе. На обучении будете работать с настоящим интернет-магазином https://ownphone.ru и научитесь запускать самые эффективные кампании для интернет-магазинов.