Установка кодов отслеживания

Устанавливаем код Google Tag Manager

Итак, прежде, чем начать собирать статистику нам необходимо установить счетчики систем аналитики. Делать это мы будем через контейнер GTM, который должен размещаться напрямую в коде сайта. К слову, это действие в идеале — единственное вмешательство в жизнь разработчика (конечно, можно сделать это и самому, если у тебя есть доступ к коду сайта), все остальное будет происходить внутри контейнера твоими силами.

Заходим в диспетчер тегов под почтой на gmail.com и создаем новый аккаунт.

Создаем аккаунт в GTM

Вводим название аккаунта, страну, название контейнера.

Создание аккаунта GTM

Далее выбираем место, где будет расположен контейнер.

Создание контейнера GTM

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

Установка GTM на сайте

Кликаем на него и появляется всплывающее окошко с техническим заданием на установку кода диспетчера тегов.

Установка кода GTM

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

После добавления кода на все страницы сайта можно начинать работу, только предварительно нужно проверить корректность установки контейнера и для этого потребуется расширение для Chrome — Tag Assistant. Достаточно просто нажать на значок установленного приложения, затем Enable, обновить страницу и оно покажет, какие счетчики установлены на сайте в открытой вкладке.

Tag Assistant

Установка Google Tag Manager на учебном сайте

Как создать контейнер GTM ты разобрался, теперь добавим его на наш учебный сайт твоего проекта.

Когда ты зайдешь на него первый раз, сайт будет без скрипта GTM, о чем тебе сообщит надпись внизу лендинга.

Установка GTM на учебном сайте

В окошко ввода необходимо добавить номер контейнера GTM в виде: GTM-W*****N, после чего нажать кнопку «Установить». И твой контейнер GTM появится на сайте.

Устанавливаем код счетчика Google Analytics

Мы установили на сайт код Google Tag Manager, но данные не будут собираться, так как еще не создан счетчик, который будет это делать.

Под тем же аккаунтом gmail.com заходим на сайт Google Analytics, далее в панель администратора и создаем новый аккаунт.

Создание нового аккаунта GA

Заполняем все данные и жмем «Получить идентификатор отслеживания».

Настройка аккаунта GA

После принятия пользовательского соглашения, Google Analytics предоставит номер счетчика (ресурса), который мы и будем использовать для установки через Google Tag Manager.

Номер счетчика GA

Давай создадим первый элемент в GTM. Это будет переменная, содержащая номер счетчика GA.

Создаем новую переменную

Для этого выбираем тип переменной «Настройки Google Analytics».

Выбираем тип переменной

И заполняем ее.

Переменная с настройками GA

А теперь создадим тег, который будет вызывать наш счетчик аналитики при каждом просмотре страниц. Выбираем «Google Analytics — Universal Analytics» с типом отслеживания «Просмотр страницы». А в поле «Настройки Google Analytics» будем ссылаться на нашу новую переменную «GA ID».

Не забудь задать условие активации тега. Мы знаем, что счетчик Google Analytics должен быть установлен на всех страницах сайта, поэтому кликаем на блок «Триггеры» и выбираем предложенный по умолчанию триггер «All pages», который будет активировать наш тег на всех страницах сайта.

Настройка GA через GTM

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

Продолжаем устанавливать счетчики систем веб-аналитики на сайт и на очереди у нас Яндекс.Метрика. Для входа в аккаунт понадобится почта на yandex.ru. Жмем на «Добавить счетчик».

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

И заполняем данные. Не забудь подключить «Вебвизор» и нажимай «Создать счетчик».

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

Теперь счетчик нужно добавить на сайт, поэтому переходим в Google Tag Manager. Диспетчер тегов не поддерживает непосредственную связь с Метрикой и не имеет тега-шаблона для нее, поэтому код будем вставлять простым тегом «Пользовательский HTML».

Так как код счетчика нам нужен на каждой странице — добавляем триггер «All Pages» также как и для счетчика Google Analytics. После чего сохраняем изменения.

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

Устанавливаем код ретаргетинга

Бывает так, что к веб-аналитику обращается специалист по контекстной рекламе и просит установить пиксель рекламной системы на сайт, например Facebook.

Код ретаргетинга (пиксель) устанавливается через GTM аналогично Яндекс.Метрике.

Заходим в Events Manager под своим аккаунтом Facebook и нажимаем «Начать» в первом из предложенных блоков.

Создание пикселя Facebook

Далее, нажимаем «Создать». Появляется модальное окно с действиями. Если выбрать первый блок «Использовать интеграцию или Tag Manager», то привязка к контейнеру GTM пройдет в 2 клика, нужно только указать свой аккаунт.

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

Выбираем «Установить код вручную».

Установка кода Facebook вручную

Забираем код из пункта 2 и возвращаемся в Google Tag Manager.

Создаем новый тег «Пользовательский HTML» и вставляем туда код нашего пикселя. Тег должен срабатывать на каждой странице сайта, поэтому ставим триггер «All Pages».

Установка пикселя Facebook

Вот и все. Аналогичным способом устанавливаются пиксели других рекламных систем.

Проверка контейнера GTM и релиз

Итак, все изменения внесены, осталось проверить правильность их работы. Для этого в Google Tag Manager есть возможность предпросмотра, который будет доступен только у тебя в браузере.

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

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

Тестирование тегов

Статус «Tags Fired On This Page» говорит о том, что наши теги сработали и мы можем публиковать контейнер.

Публикация контейнера

Домашнее задание

В этом уроке мы разобрали, как создаются счетчики и каким образом можно проверить их установку.

Что теперь тебе нужно сделать:

  1. Создай аккаунт и контейнер Google Tag Manager;
  2. Установи его на учебный сайт;
  3. Создай счетчик Google Analytics и установи его через GTM;
  4. Создай счетчик Яндекс.Метрики и установи его через GTM;
  5. Проверь работу счетчиков и опубликуй контейнер.

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