Блогs

Главная » Блог » Google Tag Manager - Создание Аккаунта и Размещение Google Analytics и Yandex Metrikapost thumb

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).

gtm_init-uno

Жмём кнопку Create (Создать),и на следующем экране соглашаемся с Google Tag Manager Terms of Service Agreement.

Получено 2 фрагмента кода. 1-ый нужно вставить в head вашего сайта (чем выше, тем лучше),а второй - непосредственно после тега body.

gtm_code

ОК. Перед вами интерфейс Google Tag Manager:

gtm_interfaceoverall_e
  • Контейнер – это фрагмент JS-кода, который размещается на всех страницах сайта. Внутри контейнера содержится информация о тегах, которые запускаются вследствие выполнения определённых правил, заданных в триггерах и переменных;
  • Тег – фрагмент кода сайта, который позволяет отслеживать трафик и анализировать поведение пользователей, конверсию и т. д. (например, код Яндекс Метрики);
  • Триггеры определяют, когда нужно активировать тег в веб-контейнере;
  • Переменные – это пара «имя-значение», которая используется в триггере как условие, при котором будет срабатывать тег.

Понятнее станет дальше. :)

2. Подключение Google Analytics через Google Tag Manager

Добавим Тег Google Analytics:

gtm_addtag

Назовем его GA Base Tag и выберем тип Universal Analytics в разделе Tag Configuration:

gtm_gabasetaginit

Далее кликаем по Select Setting Variable в пункте Google Analytics Settings и выбираем в выпадающем списке New Variable:

gtm_gabasetag

Видим Untitled Variable, называем её gaProperty. Свойства при этом могут "спрятаться". тогда жмем Variable Configuration, чтобы вернуть их. Вводим код Universal Analytics:

gtm_gaproperty

Код можно найти в разделе ADMIN/Property Settings (Настройки ресурса) в интерфейсе GA или прямо в коде сайта, если он уже установлен на сайте (выглядит как UA-12345678-1). Нажимаем Сохранить:

gtm_gaconf

Теперь идем в подраздел Triggering.

Чтобы тег срабатывал на всех страницах, укажите триггер «All Pages»:

gtm_allpagestrigger

Жмем 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_chromeext_e

Теперь в GTM жмём SUBMIT и называем как-то текущую версию изменений. После этого можно нажать PUBLISH:

gtm_gapublish

Таким образом, мы подключили на сайт Google Analytics через GTM без вмешательства в исходный код страниц. Можно выйти из Preview Mode.

3. Подключение Яндекс Метрики через Google Tag Manager

Для подключения Яндекс Метрики выполните те же действия, что и для Google Analytics.

Создайте новый тег. Однако в его конфигурации вы не увидете Яндекс Метрику (так как по-умолчанию в списке tag type её просто нет),поэтому укажите Custom HTML - «пользовательский HTML».

gtm_metrikainit

В эту HTML-форму необходимо вставить код счётчика вашей Метрики:

gtm_ymcode_e

Если на сайте уже установлена Яндекс Метрика, скопируйте код счётчика с исходного кода страницы.

Обратите внимание! Как и в случае с Google Analytics, код Метрики в коде сайте размещать не нужно. Полученный код YM при её настройке нужно скопировать и добавить в появившееся на предыдущем этапе окно «Пользовательский HTML». Триггер - созданный ранее All pages.

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

З.Ы. Не забудьте убрать код GA и YM из кода сайта, если он там был ранее.


Term to search: tracking google analytics in tag manager.

Может пригодиться:

* На данном сайте во всех Google аккаунтах используется язык оригинала - только англоязычный интерфейс.