1 nov 2017
Google Tag Manager - Создание Аккаунта и Размещение Google Analytics и Yandex Metrika
By: Roman Kondrashov
Google Tag Manager - удобный инструмент для добавления и обновления различных фрагментов кода на веб-сайт без внесения каких-либо изменений непосредственно в код сайта. Ну или с внесением минимальных изменений, причем таких, которые вряд ли потребуют правки в будущем. В данном посте рассмотрим создание аккаунта Tag Manager (далее GTM) с размещением его кода на сайте и размещение счетчиков Google Analytics (далее - GA) и Yandex Metrika (далее - YM). Пост актуален на конец 2017 года (в нём использованы скриншоты современного интерфейса Tag Manager).
1. Создание аккаунта и добавление контейнера счетчика GTM в код сайта
Идем по адресу https://tagmanager.google.com/ и создаем новый аккаунт* (если он у вас ещё не создан). В 1-ом поле - название аккаунта, во 2-ом поле (Setup Container) - название контейнера (собственно, счетчика) в виде URL-адреса нашего сайта. Также жмём тип использования "Web" (Where to Use Container).
Жмём кнопку Create (Создать),и на следующем экране соглашаемся с Google Tag Manager Terms of Service Agreement.
Получено 2 фрагмента кода. 1-ый нужно вставить в head вашего сайта (чем выше, тем лучше),а второй - непосредственно после тега body.
ОК. Перед вами интерфейс Google Tag Manager:
- Контейнер – это фрагмент JS-кода, который размещается на всех страницах сайта. Внутри контейнера содержится информация о тегах, которые запускаются вследствие выполнения определённых правил, заданных в триггерах и переменных;
- Тег – фрагмент кода сайта, который позволяет отслеживать трафик и анализировать поведение пользователей, конверсию и т. д. (например, код Яндекс Метрики);
- Триггеры определяют, когда нужно активировать тег в веб-контейнере;
- Переменные – это пара «имя-значение», которая используется в триггере как условие, при котором будет срабатывать тег.
Понятнее станет дальше. :)
2. Подключение Google Analytics через Google Tag Manager
Добавим Тег Google Analytics:
Назовем его GA Base Tag и выберем тип Universal Analytics в разделе Tag Configuration:
Далее кликаем по Select Setting Variable в пункте Google Analytics Settings и выбираем в выпадающем списке New Variable:
Видим Untitled Variable, называем её gaProperty. Свойства при этом могут "спрятаться". тогда жмем Variable Configuration, чтобы вернуть их. Вводим код Universal Analytics:
Код можно найти в разделе ADMIN/Property Settings (Настройки ресурса) в интерфейсе GA или прямо в коде сайта, если он уже установлен на сайте (выглядит как UA-12345678-1). Нажимаем Сохранить:
Теперь идем в подраздел Triggering.
Чтобы тег срабатывал на всех страницах, укажите триггер «All Pages»:
Жмем SAVE. Потом нужно было бы нажать SUBMIT. Но мы перед публикацией сначала перейдем в режим просмотра для проверки внесенных изменений.
2.1. Режим отладки в Google Tag Manager
Нажмем PREVIEW, чтобы проверить внесенные изменения.
После этого в том браузере (проверено в Google Chrome и Firefox),в котором вы залогинены в GTM, перейдите на свой сайт (или обновите страницу, если он уже открыт) и прокрутите страницу вниз. Внизу должен отобразиться контейнер. Если контейнер отобразился под строкой «Tags Not Fired On This Page», тег на странице не сработал. Необходимо проверить все настройки и при необходимости исправить допущенные ошибки. Если контейнер появился под строкой «Tags Fired On This Page», значит, Universal Analytics установлен без ошибок.
Теперь в GTM жмём SUBMIT и называем как-то текущую версию изменений. После этого можно нажать PUBLISH:
Таким образом, мы подключили на сайт Google Analytics через GTM без вмешательства в исходный код страниц. Можно выйти из Preview Mode.
3. Подключение Яндекс Метрики через Google Tag Manager
Для подключения Яндекс Метрики выполните те же действия, что и для Google Analytics.
Создайте новый тег. Однако в его конфигурации вы не увидете Яндекс Метрику (так как по-умолчанию в списке tag type её просто нет),поэтому укажите Custom HTML - «пользовательский HTML».
В эту HTML-форму необходимо вставить код счётчика вашей Метрики:
Если на сайте уже установлена Яндекс Метрика, скопируйте код счётчика с исходного кода страницы.
Обратите внимание! Как и в случае с Google Analytics, код Метрики в коде сайте размещать не нужно. Полученный код YM при её настройке нужно скопировать и добавить в появившееся на предыдущем этапе окно «Пользовательский HTML». Триггер - созданный ранее All pages.
Опять проверяем работоспособность в режиме «Предварительный просмотр» или сразу Публикуем. Таким образом, мы подключили на сайте Яндекс Метрику без вмешательства в исходный код страниц.
З.Ы. Не забудьте убрать код GA и YM из кода сайта, если он там был ранее.
Term to search: tracking google analytics in tag manager.
Может пригодиться:
- Implementing Google Analytics with Google Tag Manager: https://support.google.com/analytics/topic/6163649?hl=en
- Assign GA counter to a variable. Use constant string user-defined variables: https://support.google.com/analytics/answer/6164390?hl=en
- Использование пикселя Facebook с Google Tag Manager: https://www.facebook.com/business/help/1021909254506499?helpref=faq_content
* На данном сайте во всех Google аккаунтах используется язык оригинала - только англоязычный интерфейс.