Как установить счетчик Яндекс.Метрики через Google Tag Manager
Желаете оптимизировать работу с сайтом? Хотите упростить процесс вставки инструментов? Тогда представляем Вашему вниманию Google Tag Manager (GTM). С ним вы сможете забыть о многочисленных кодах.
- GTM: что это
- Яндекс метрика через Google Tag Manager
- Установка метрики через Google Tag Manager
GTM: что это
GTM представляет собой виртуальный контейнер, где вы размещаете все клочки java-кода, используемые для расширения функциональных возможностей сайта.
Например, ранее, чтобы вставить Яндекс.Метрику на сайт, в шаблоне сайта прописывался весь код для отслеживания. Также для вставки и работы форм для звонка, онлайн-консультантов, пикселей, счетчиков и так далее ранее необходимо было вставить в исходный шаблон их технический текст. Все перечисленные инструменты, а главное, метрика через Google Tag Manager устанавливается через одно место, один код! Таким образом с GTM на сайт нужно вставить всего 1 код!
Яндекс метрика через Google Tag Manager
Прежде чем настраивать Яндекс метрику через Google Tag Manager проверьте, что у вас есть работающий аккаунт в системе Google. Теперь необходимо создать аккаунт в GTM. Для этого жмем на эмблему своего существующего аккаунта и выбираем раздел «Создать аккаунт».
Теперь необходимо заполнить поля, вписав в них необходимые данные, как это показано на картинке ниже.
После этого принимаем условия использования диспетчера, нажав «Да».
После этого GTM составит специальный код. Это и есть тот код, который заменит собой коды всех остальных инструментов. После этого все остальные кнопки мы будем вставлять руками GTM.
Важно! Первую часть кода вставляем максимально высоко в секции, вторую часть – так, как продемонстрировано на скрине. Если вы настраиваете Яндекс Метрику через Google Tag Manager по данной инструкции, соблюдайте это правило.
На этом минимум для настройки Метрики выполнен. Перед вами откроется рабочая панель. Здесь наше внимание приковано к 3 пунктам:
- Теги.
- Триггеры.
- Переменные.
Чтобы максимально разобраться в теме и отныне не путаться в непонятных терминах, остановимся на том, что же это такое.
Сначала познакомимся с тегами. Под ними понимаются и действия, и единицы GTM. «Теги» (используется только во множественном числе ) – это глагол, отвечающий на вопрос «что делать» и обозначающий действия пользователей.
«Тег» (в единственном числе) – это код, который мы вставляем в шаблон сайта, это главная единица GTM. Всевозможные боты и браузеры видят тег, а вот пользователи – нет. То есть, просматривая исходный код, вы не увидите тег, а увидите только код GTM. Из этого вытекает одно из преимуществ GTM – пользователи не могут просмотреть, что отслеживается и что находится в исходном коде.
Для триггеров мы задаем вопрос «когда?». То есть когда должен начать работать добавленный к ресурсу тег. Здесь есть множество вариантов: на некоторых страницах, на всех страницах, после конкретного действия и так далее. Выбирайте нужный для вас вариант, исходя из ваших задач и потребностей.
Переменные являются связующим звеном между временем и действиями. Они отвечают сразу на 3 вопроса: «что?», «с чем?», «какая?». Это своего рода имена, которые присваиваются различным действиям и объектам. GTM предлагает пользователям множество переменных. Сейчас же мы будем использовать пользовательскую переменную, которая позволяет максимально широко увеличить ресурс и зафиксировать различные события.
Итак, теперь переходим к добавлению Яндекс.Метрики через GTM. Прежде всего обозначим, что GTM не знает о работе счетчика системы Яндекс и нам нужно добавить его вручную без преустановок. Первым делом открываем раздел «Теги», в нем выбираем «Создать».
Чтобы избежать путаницы, дадим имя создаваемому тегу. Открываем поле «триггеры» и выбираем, когда наш тег будет работать. Отмечаем галочкой пункт «Все страницы». Сохраняем внесенные изменения.
Теперь вставляем в GTM код Яндекс.Метрики. Для этого открываем поле «Конфигурация». В открывшемся окне представлены встроенные теги. В большинстве своем это продукты системы Гугл. Мотаем вниз и видим небольшой перечень зарубежных сервисов, которые в России не востребованы. Нас интересует отечественный Яндекс, для этого мы используем ручной режим, он же «пользовательский HTML».
Вписываем код счетчика, не трогая при этом другие настройки, и сохраняем внесенные изменения.
Теперь тег создан и настроен. Чтобы он начал функционировать, публикуем его и нажимаем кнопку «Отправить».
После этого откроется окно, где нужно вставить краткое описание внесенных изменений и опубликовать их, нажав кнопку, как показано на рисунке.
При условии, что все выполнено правильно, через 2-3 часа в статистике Яндекс.Метрике уже будут отображаться первые собранные данные.
Чтобы не ждать несколько часов, воспользуемся опцией предварительного просмотра. Для того заходим в рабочую панель и открываем «Предварительный просмотр». Вы поймете, что режим запущен по открывшемуся окну яркого цвета.
Теперь открываем сайт, для которого мы настраивали Яндекс. Метрику и просматриваем его. В случае корректной работы в открывшейся панели GTM в списке тегов для данной страницы вы увидите новый тег.
После проверки обязательно отключите режим предварительного просмотра. Иначе панель GTM будет постоянно присутствовать на вашем ресурсе.
Установка метрики через Google Tag Manager
Мы зарегистрировались в GTM и установили контейнер. В Google Analytics (GA) мы получаем специальный идентификатор для отслеживания. Чтобы в будущем экономить время и минимизировать ошибки, создадим переменную. Под ней подразумевается объект с именем, принимающим различные значения. Переменная позволяет оптимизировать хранение данных и упростить ряд процессов, в которых одно значение используется многократно.
GTM использует 2 вида переменных: пользовательские и встроенные. Чтобы сделать свою переменную первого типа, необходимо открыть раздел «Переменные», а затем нажать красную кнопку «Создать», как это показано на рисунке.
Затем устанавливаем тип переменной, открыв «Настройки». Переменная открывает возможность по-разному настраивать GA для работы с различными тегами.
Теперь вводим имя нашей переменной и код GA в качестве идентификатора для отслеживания. В конце сохраняем внесенные изменения.
Таким образом, нам больше не нужно каждый раз копировать целый код GA. При вставке тега GA вполне можно обойтись созданной переменной. Выглядит она следующим образом:
Альтернативный вариант создания переменной – использовать тип «Константа», а не «Настройка GA» и уже там прописать код GA, как это показано на рисунке ниже.
Далее открываем «Теги» и создаем новый тег GA.
В типе тега выбираем его конфигурацию «Universal Analytics», так как библиотека стандартного GA сегодня не развивается и является устаревшей. Но сегодня на просторах интернета еще можно встретить немало сайтов, которые остаются верны своим традициям и устанавливают старый код. Однако более продвинутые разработчики сайтов знают, что ga.js сегодня необходимо заменять на gtag.js или analytics.js.
Теперь переходим к настройкам. Устанавливаем их следующим образом:
- В типе отслеживания выбираем просмотр страниц.
- В настройках GA выбираем созданную переменную GA ID.
В случае, если вы применяете «Константу», отметьте галочкой строку «Включить переопределение настроек в теге». Затем в идентификаторе отслеживания выделите созданную переменную.
- Триггер – Для всех страниц (All Pages).
Теперь вписываем имя тега и нажимаем «Сохранить». Поздравляем, установка метрики через Google Tag Manager для отслеживания GA завершена! Давайте проверим, правильно ли мы настроили метрику через GA, не прибегая к отладчику. С этой целью нажимаем «Отправить», затем «Опубликовать» и в конце жмем «Далее». Найти данные опции можно в верхнем правом углу.
Открываем интерфейс GA и смотрим заход в разделе отчетов «В режиме реального времени». Чтобы проиллюстрировать пример, отметим переход utm- метками. Теперь переходим по разделам и проверяем, зафиксируются ли переходы по страницам сайта или нет. Как вы видите из рисунка, который представлен ниже, тег настроен правильно. А это значит, что все сделано корректно и установка метрики через Google Tag Manager выполнена успешно.
Как вы видите, GTM – это эффективное решение, которое существенно упрощает работу с сайтом. Надеемся, инструкция была вам полезна и вы примените ее на практике уже сегодня.
Яндекс Метрика через Google Tag Manager
Добавляем код счетчика Яндекс Метрики. Если вы не знаете откуда его берут, спрашивайте в комментариях, не стесняйтесь. Другие настройки не трогаем. Сохраняем.
Наш тег сформирован и настроен. Осталось его опубликовать, чтобы он заработал. Жмем «Отправить».
Далее идем на сайт, для которого вы добавляли Яндекс Метрику и вуаля! Если все работает, то в появившейся панели Google Tag Manager, мы увидим ваш новый тег в списке тегов GTM этой страницы.
Установка кода Яндекс Метрики на сайт
Теперь перейдем к процессу его установки на сайт. В данном примере будет рассмотрен вариант установки кода через Google Tag Manager. Подробно о том как создать и установить код GTM можно ознакомиться здесь.
Необходимо совершить несколько простых шагов:
- Переходим в аккаунт Google Tag Manager. Выбираем пункт «Теги» и нажимаем кнопку «Создать»
- Указываем имя тега и нажимаем на кнопку для редактирования
- Выберите тип тега: Пользовательский HTML
- Теперь необходимо вставить код Яндекс Метрики
- Для того что бы скопировать код необходимо перейти в аккаунт Яндекс Метрики в раздел «Настройка» и перейти на вкладку «Код счётчика»
- Затем копируем код
- И вставляем его в ранее созданный тег в ГТМ
- Теперь нужно добавить условие при котором будет активироваться счётчик Метрики. Условие активации тега в тег менеджере называется «триггер». Нажмите на кнопку редактирования
- В нашем случаем триггером будет являться встроенный триггер «All Pages». Выбираем его
- Созданный вами тег будет выглядеть следующим образом. Необходимо его сохранить
- Теперь можно проверить работоспособность тега в режиме «предварительно просмотра» или отправить его на публикацию нажав на кнопку «отправить»
- Рассмотрим процесс публикации. После того как вы нажали на кнопку «отправить», то желательно написать название и описание версии. И жмём опубликовать
- После этого публикация завершена:
а) название опубликованной версии (указываем в предыдущем пункте)
б) описание опубликованной версии (указываем в предыдущем пункте)
в) что было добавлено в новую версию
Теперь код отслеживания Яндекс Метрики установлен на вашем сайте на всех страницах.
Как настроить аналитику с помощью Google Tag Manager
Правильная настройка веб-аналитики в интернет-рекламе важна для оценки и повышения эффективности кампаний.
Проще говоря, благодаря правильно настроенной веб-аналитике мы:
- узнаем, какие источники приносят больше конверсий;
- оптимизируем рекламные кампании (отключаем некачественные источники трафика);
- принимаем решения о бюджетировании рекламных каналов;
- повышаем конверсию сайта;
- снижаем стоимость привлечения клиента.
Желательно подключить аналитику для всех рекламных систем, в которых вы запускаете кампании. Это нужно не только для того, чтобы получать наиболее полные и актуальные данные, но и для того, чтобы эффективно настраивать ремаркетинг.
Вся интернет-реклама в eLama
Один кабинет и кошелек для 13 систем и сервисов, инструменты для повышения эффективности, бесплатное обучение и помощь на всех этапах работы.
Как настроить веб-аналитику
Есть два варианта настройки веб-аналитики.
Первый — сложный. Нужно поставить на сайт Яндекс.Метрику, Google Analytics, коды ремаркетинга рекламных систем (Facebook Pixel, пиксель ВКонтакте, счетчик Top.Mail), а также коллтрекинг (если лидом является звонок).
Затем — настроить отправку событий, конверсии и цели. Чтобы настроить отправку событий в рекламные и аналитические системы, часто требуется знание JavaScript, CSS и принципов работы с библиотеками типа JQuery.
А если появятся новые события и цели или новый сайт, все эти действия придется проделать заново.
Второй — попроще: использовать Диспетчер тегов Google (Google Tag Manager, GTM). С ним не нужно постоянно менять код — достаточно один раз поставить контейнер с тегами на сайт. Если появятся новые события, их можно будет добавить внутри GTM. А если вы поменяете сайт, контейнер со всеми настройками можно будет просто перенести.
Что такое Google Tag Manager
Google Tag Manager — это система управления тегами.
Основные сущности внутри GTM — это контейнер, тег, триггер и переменная.
Контейнер — это хранилище тегов и триггеров. Содержит счетчики, которые срабатывают при определенных условиях и учитывают действия пользователей на сайте. Контейнер устанавливается на сайт один раз; после этого можно управлять счетчиками — менять настройки, удалять или добавлять новые счетчики, — не внося правок в код сайта.
Тег — это действие, которое выполняет GTM (активация счетчика Google Analytics или Яндекс.Метрики, отправка события по конверсии и другие).
Триггер — это событие, активирующее тег (просмотр пользователем некоторой страницы на сайте, клик по кнопке и другие).
Переменные позволяют запускать теги или триггеры (когда значение триггера совпадает с переменной) и фиксировать действия или изменения на странице.
Структура и иерархия GTM
Google Tag Manager подойдет, если:
- надо установить системы аналитики (их коды);
- установить коды сервисов коллтрекинга или онлайн-чатов и других сервисов;
- нужно отправлять события и фиксировать конверсии в нескольких системах аналитики;
- у вас интернет-магазин и надо настроить e-commerce аналитику;
- у вас нет веб-программиста, вы настраиваете все сами и хотите, чтобы было просто и удобно.
Что еще можно делать с помощью GTM:
- подменять контент на сайте (статический коллтрекинг, подмена заголовков, изображений);
- проверять битые ссылки;
- настроить отправку user id в системы аналитики;
- отслеживать брошенные формы.
Как установить системы аналитики РС через Google Tag Manager
Подготовительный этап. Как создать Google Tag Manager и поставить его на сайт
Чтобы создать аккаунт в Google Tag Manager, нужна учетная запись Google (проще говоря, почта на Gmail). После ее создания (или если она уже есть) переходим на tagmanager.google.com и нажимаем «Создать аккаунт».
Даем названия аккаунту и контейнеру. Выбираем целевую платформу: сайт, приложение или amp-страница. Нажимаем «Создать» и принимаем пользовательское соглашение.
Если все сделано правильно, появится всплывающее окно «Установить Google Менеджер тегов».
Копируем код из первого поля. Его нужно поставить перед закрывающим тегом </head> в коде вашего сайта. (В зависимости от конкретного сайта это можно сделать через файл типа index.html, использовать плагин или же интегрировать GTM напрямую.) Код из второго поля ставим после открывающего тега <body>.
После этого нужно проверить, работает ли GTM на сайте. Можно использовать режим предварительного просмотра или расширение Google Tag Assistant.
На сайте должна подгрузиться iframe-форма.
После этого можно начать установку Google Analytics, Яндекс.Метрики, Facebook Pixel и других счетчиков.
Установка Google Analytics через Google Tag Manager
Установить Google Analytics проще всего: у него есть прямая интеграция с GTM.
В левом меню открываем раздел «Теги», нажимаем «Создать».
Откроется окно с двумя полями: «Конфигурация тега» (действие, которое будет выполняться) и «Триггеры» (условия).
В «Триггерах» выбираем вариант «All Pages» (тогда счетчик Google Analytics будет активироваться каждый раз, когда пользователь просматривает любую страницу сайта).
В «Конфигурации тега» выбираем «Google Аналитика — Universal Analytics».
В поле «Тип отслеживания» автоматически проставится параметр «Просмотры страницы».
В поле «Настройки Google Analytics» нужно вставить идентификатор. В выпадающем меню выбираем «Новая переменная».
Идентификатор отслеживания можно найти в Google Analytics: «Администратор» — «Ресурс» — «Настройки ресурса».
В блоке «Основные настройки» будет указан «Идентификатор отслеживания».
Копируем его в GTM. Переменную называем так же, как идентификатор отслеживания (чтобы не запутаться).
Сохраняем тег. После этого он отобразится в рабочей области.
Чтобы изменения в контейнере появились на сайте, нужно нажать на кнопку «Отправить» (в правом верхнем углу). Задаем «Название версии» и нажимаем «Опубликовать».
Дальше нужно проверить корректность работы тега: используем режим предпросмотра. Если все верно, тег отобразится в iframe-форме.
Также корректность работы можно проверить через Google Tag Assistant или Google Analytics (вкладка «Отчет в реальном времени»).
Установка Яндекс.Метрики через Google Tag Manager
Создаем новый тег (раздел «Теги» в левом меню, кнопка «Создать»). Триггер задаем тот же, что и в случае с Google Analytics, — «All Pages». В поле «Конфигурация тега» выбираем: «Специальные» — «Пользовательский HTML».
В поле для ввода HTML вставляем код Яндекс.Метрики. Для этого заходим в аккаунт и выбираем счетчик. В левом меню нажимаем «Настройка». Внизу появится поле «Код счетчика».
Копируем HTML-код в соответствующее поле в Google Tag Manager и нажимаем «Сохранить». Тег появится в рабочей области. Его нужно будет «Отправить» и проверить корректность работы.
Также корректность установки можно проверить при помощи параметра ?_ym_debug=1. Его нужно ввести сразу после URL сайта.
Находясь на сайте, открываем код (Ctrl+Shift+I) и ищем параметр PageView. Counter. После него стоит номер счетчика — проверьте, что он совпадает с номером внутри вашего аккаунта в самой Яндекс.Метрике.
Установка Facebook Pixel через Google Tag Manager
Для начала нужно создать Facebook Pixel (у eLama есть пошаговая видеоинструкция по созданию и настройке пикселя Facebook). Для этого заходим в Ads Manager и в разделе Events Manager выбираем пункт «Пиксели».
Добавить пиксель Facebook в GTM можно двумя способами: с помощью партнерских интеграций или на сайт вручную.
При установке пикселя вручную алгоритм тот же, что и в случае с Яндекс.Метрикой: создаем тег, в конфигурациях выбираем «Специальные» — «Пользовательский HTML» и копируем код.
Если добавляем пиксель с помощью партнерских интеграций, достаточно в списке найти Google Tag Manager.
Затем будет нужно выбрать почту Gmail, к которой привязан GTM, сам аккаунт в GTM и контейнер и «Завершить настройку».
В рабочей области GTM должен появиться тег пикселя Facebook.
Проверить установку можно также в режиме предпросмотра (iframe-форма) или через расширение Facebook Pixel Helper (для Google Chrome).
Настройка событий
Выбор событий зависит от структуры сайта и того, как выстроена воронка взаимодействия с пользователем. Чаще всего нужно отследить:
- заход на определенную страницу;
- нажатие на кнопку (например, посетитель заполнил форму: оставил контактные данные и нажал «Отправить»);
- видимость определенного элемента (например, баннера со спецпредложением);
- глубину прокрутки страницы (есть соответствующий тип триггера).
Далее подробно разберем, как настроить событие для нажатия на кнопку.
Настройка событий в Google Analytics
Создаем новый тег. Однако, в отличие от предыдущих схем, в качестве триггера выбираем не «All Pages», а создаем новый триггер.
Кликаем по полю «Настройка триггера». В меню «Выберите тип триггера» выбираем «Клик» — «Все элементы».
Задаем «Условие активации триггера» — «Некоторые клики».
В первом поле в выпадающем меню нажимаем «Выбрать встроенную переменную». В открывшемся меню выбираем Click Element.
Во втором поле выбираем условие «соответствует селектору CSS».
Где найти этот селектор? Идем на сайт и находим элемент, при клике на который GTM должен передавать событие. Проще говоря, кнопку.
Нажимаем на нее правой кнопкой мыши, в меню выбираем «Посмотреть код».
В правой части экрана появится поле с кодом страницы сайта; код самой кнопки будет подсвечен. Нажимаем на это подсвеченное поле правой кнопкой мыши, выбираем «Copy» — «Copy selector».
Вставляем селектор в последнее поле в окне «Настройка триггера» в GTM.
Назовем триггер, например, «Клик на кнопку» и сохраним его.
Далее заполняем блок «Конфигурация тега». Выбираем «Google Аналитика — Universal Analytics», тип отслеживания — «Событие». В открывшемся меню нужно обязательно заполнить два поля — «Категория» и «Действие». Допустим, «Категория» будет button, а «Действие» — click.
Сам тег назовем, например, «GA — Клик на кнопку».
В «Настройках Google Analytics» выбираем идентификатор аккаунта в Google Analytics. Тогда при клике на кнопку в аналитическую систему будет отправляться событие с категорией button и действием click.
Зайдем в Google Analytics и создадим соответствующую цель («Администратор» — «Представление» — «Цели»).
В поле «Установка цели» выбираем «Собственная». Даем ей название (например, «Клик на кнопку»), указываем «Тип» — «Событие». Заполняем «Подробные сведения о цели»: «Категория» — button, «Действие» — click. Сохраняем конверсию в Google Analytics.
Идем в GTM и сохраняем тег «GA — Клик на кнопку». Публикуем, проверяем.
Настройка событий в Яндекс.Метрике
Сначала нужно создать цель в Яндекс.Метрике («Настройка» — «Цели» — «Добавить цель»). Даем ей название (например, «Клик на кнопку»). В поле «Тип условия» выбираем «JavaScript-событие», в поле «Идентификатор цели» вводим, например, button.
Переходим в Google Tag Manager и создаем тег с триггером «Клик на кнопку» и конфигурацией «Пользовательский HTML». Прописываем отправку события в яндекс.метрику:
где вместо единиц — идентификатор аккаунта в Яндекс.Метрике, вместо ‘Идентификатор события’ — идентификатор, который указан в описании вашей цели (в нашем случае — button).
Называем тег «Метрика — Клик на кнопку». Сохраняем, отправляем в итоговую версию контейнера, проверяем.
В этой статье мы не будем рассматривать настройку событий для Facebook Pixel: это отдельная обширная тема.
Подробнее о настройке Google Tag Manager — в вебинаре от eLama.
Если хотите знать больше об интернет-рекламе и веб-аналитике в целом, регистрируйтесь на бесплатные вебинары от eLama.