Запущенный в 2012 году, диспетчер тегов Google (Google Tag Manager) помогает маркетологам и веб-мастерам решить важную задачу — встраивание в страницы фрагментов кода, которые отслеживают нужные показатели на сайте. До появления диспетчера встраивание кода в сайт было рискованной штукой без каких-либо гарантий, что всё заработает правильно с первого раза.Также не было гарантий, что вы получите те показатели, которые хотели, а куча запускавшихся сниппетов могла прилично замедлить скорость загрузки сайта.

Диспетчер тегов Google избавляет от перечисленных неудобств, предлагая шаблоны для легкого встраивания фрагментов кода (на языке Google — “тегов”) и обеспечивая асинхронный запуск тегов для ускорения загрузки сайта. А обновленная редакция этого инструмента получила более понятный интерфейс и поддержку большого числа тегов, полезных маркетологам и веб-мастерам.

Как утверждается в Справке по диспетчеру тегов Google, с ним “экономится время, сокращается количество ошибок и отпадает необходимость обращаться за помощью к разработчику”. Но правда ли эта система настолько простая в освоении, что может использоваться обычным пользователем? Попробуем разобраться.

Словарь диспетчера тегов Google для “чайников”

Для начала познакомимся с некоторыми понятиями из мира диспетчера тегов Google.

Тег — это фрагмент кода, который выполняется на странице сайта. Когда тег начинается выполнятся, мы говорим, что он активируется.

Триггер — это механизм, который активирует тег. Он проверяет выполнение нужных условий, и в зависимости от результата активирует или не активирует тег. Например, если вы встроили код для отслеживания статистики, условием активации тега будет каждое посещение страницы пользователями.

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

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

Вооружившись базовыми понятиями, попробуем встроить фрагмент кода с помощью диспетчера тегов Google.

Встраивание Universal Analytics через диспетчер тегов

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

Если вы относитесь к редким людям, не имеющим аккаунта Google, ликвидируйте этот пробел до начала работы с диспетчером тегов. Если же у вас есть несколько аккаунтов Google, перейдите в тот, через который вы работаете (или собираетесь работать) со своими сайтами. Теперь перейдем непосредственно к диспетчеру.

Шаг 1: создание аккаунта

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

В аккаунте будет храниться идентификатор контейнера для вашего сайта. Вам нужно выбрать тип контейнера (веб, iOS или Android) и нажать кнопку “Create” (“Создать”). После этого в выпадающем окне вы получите код для установки диспетчера тегов.

В качестве названия контейнера удобно использовать доменное имя; так вы легко определите, к какому сайту относится тот или иной контейнер. Если вы решили добавить еще один контейнер (например, для мобильного приложения сайта), это можно сделать через страницу аккаунта. В примере ниже в аккаунте SHHwebsites добавлен контейнер GPTWO.

Шаг 2: создание тега

Теперь нужно создать тег. Выберите надпись “NEW TAG” (“Новый тег”), затем выберите тег, который хотите добавить.

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

Шаг 3: добавляем идентификатор отслеживания

Найдите идентификатор отслеживания для своего сайта в аккаунте Google Analytics. Он указан во вкладке “Администратор” в разделе “Ресурс” — “Код отслеживания”. Скопируйте идентификатор и вставьте его в нужную строку в окне настройки тега в диспетчере тегов.

Шаг 4: указываем условия отслеживания

Теперь выберите, какой параметр вы хотите отслеживать. Для аналитики это обычно просмотры страниц. На этом шаге вы можете также выбрать условия активации тега. Используйте для аналитики триггер “Все страницы”.

Шаг 5: устанавливаем идентификатор диспетчера тегов на свой сайт

Если вы уже установили диспетчер тегов на свой сайт (код для вставки был получен в шаге 1), следующим шагом станет публикация контейнера. В противном случае нужно подготовить сайт к публикации. В ресурсах на WordPress можно использовать специальные плагины для установки диспетчера тегов Google, например, DuracellTomi’s Google Tag Manager. С их помощью идентификатор диспетчера тега устанавливается даже с нулевым знанием программирования.

Шаг 6: предпросмотр и публикация

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

В режиме предпросмотра вы увидите, какие теги активируются.

Если вас всё устраивает, жмите на кнопку “Publish” (“Опубликовать”). С этого момента диспетчер тегов начнет отслеживать теги, триггеры и переменные. Каждый раз, когда вы добавляете что-то новое, создается новая версия контейнера. После публикации она становится текущей версией, с которой работает сайт. В панели навигации диспетчера можно найти все предыдущие опубликованные версии контейнера.

Шаг 7: удаляем дублирующий код

Скорее всего, вы использовали на своем сайте инструменты для аналитики от Google и до появления диспетчера тегов. Чтобы получать правильную достоверную статистику, вам нужно удалить старый код и управлять аналитикой только через диспетчер тегов.

Убедиться, что на сайте запущен только один код для отслеживания статистики, поможет плагин для браузера Chrome — Google Tag Assistant.

Шаг 8: проверяем статистику

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

Как добавить новые теги на сайт

После установки и активации первого тега работать с диспетчером становится гораздо проще. Например, добавим на сайт тег с многообещающим названием Crazy Egg. На главной странице нажимаем кнопку “Аdd new tag”, выбираем в уже знакомом окне из списка тегов Crazy Egg.

Устанавливаем триггер, затем делаем предпросмотр и публикуем новую версию контейнера.

Как мы убедились, работать с диспетчером тегов под силу даже очень далекому от кодинга человеку. Не поленитесь дополнительно изучить Справку по Диспетчеру тегов Google, чтобы этот инструмент на самом деле облегчил вам жизнь, а не превратился в новую головную боль.