Google Tag Manager: универсальный инструмент для работы с тегами

Google Tag Manager — это удобный инструмент, с помощью которого управлять тегами и кодами сторонних сайтов становится проще. Веб-мастеру достаточно всего раз разместить контейнер на создаваемом ресурсе, а далее все остальные сайты будут добавлять коды в автоматическом режиме. В этой статье мы расскажем о Google Tag Manager: как установить и использовать инструмент.

Что такое Google Tag Manager

Google Tag Manager (e-commerce) официально был представлен компанией Google 1 октября 2012 года. Это бесплатная программа, призванная управлять рекламными мероприятиями и отслеживать теги на вашем сайте. Если говорить простым языком, это метки, но не для тегирования материалов. Здесь речь идет о тегировании посетителей.

Чтобы четко понимать, что такое GTM, или Google Tag Manager (GTM), приведем простой пример. Как нам известно, диспетчеры — обязательное звено в процессе обработки заказов в интернет-магазинах, такси, сервисах доставки еды. Именно они координируют и обеспечивают работу всей организации. Такую же роль играет GTM. Благодаря ему отпадает необходимость разрываться между приложениями, задачами и программами. Можно объединить все в одно целое и раздавать команды централизованно.

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

Google Tag Manager позволяет делать все необходимые интеграции без техподготовки и привлечения других веб-мастеров. Для хранения установленных кодов сервисов есть специальный контейнер. Google Tag Manager сохраняет историю изменений в случае поломок и прекращения работы. При этом код сайта не нужно менять. Достаточно внести правки в контейнер GTM и опубликовать их.

По какому принципу работает Google Tag Manager?

• Сначала вам нужно разместить на своем веб-сайте или в мобильном приложении код Google Tag Manager.

• Далее через интерфейс Google Tag Manager разместить на сайте нужные сервисы (Google Analytics или Яндекс.Метрику, программы ретаргетинга/ремаркетинга и т. д.), а также события (триггеры), при которых будет происходить активация сервисов: загружаться страница, отправляться форма, нажиматься кнопка и т. д.

Насколько удобно использовать Google Tag Manager в управлении тегами

Вследствие того, что необходимость более гибко измерять маркетинг и следить за изменениями усиливалась, возникла концепция управления тегами. Непосредственно управлять ими и править их — работа весьма монотонная.

Приводить абстрактные ситуации мы не будем, а лучше рассмотрим реальный пример использования Google Tag Manager. Итак, как компания, специализирующаяся на SEO-продвижении, управляет тегами?

В исходном коде основной страницы есть определенные куски, которые бы эффективно работали с менеджером тегов. SEO-оптимизаторы применяют:

• Google Analytics — само собой.

• Kiss Metricks — чтобы более глубоко изучать аудиторию.

• AdRoll — для ремаркетинга.

• fi — тоже для ремаркетинга.

• Optimizely — чтобы тестировать CRO (conversion rate optimization).

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

Как вы считаете, к чему приводит желание кого-то из маркетинговой команды откорректировать теги?

Скорее всего, все происходит так: специалисты пишут письма, внесенные предложения добавляются в очередь, планируются совещания по этому вопросу, прикладываются определенные усилия к ускорению решения проблемы, обосновывается необходимость. Потом предложения ждут своей очереди в общем потоке задач, но при этом график расписан еще на месяц вперед. И так до бесконечности.

Это негибкий и невеселый процесс.

Благодаря менеджеру тегов можно контролировать отдельное место на странице. Один контейнер на веб-странице заменяет 6-7 интеграций в коде. В этом контейнере есть код, которым из личного кабинета управляет маркетолог.

Если маркетологи хотят опробовать новую ремаркетинговую программу, то могут взять код, разместить его в менеджере тегов и добавить на сайт. Все займет 10 минут без привлечения веб-мастеров. Google Tag Manager дает именно такие возможности.

10 достоинств GTM:

• Легкая настройка Google Analytics через Tag Manager, а также Яндекс.Метрики. Программа работает с различными программами сбора данных, к примеру DoubleClick, AdRoll, Kiss Metrics и другими.

• Простота и удобство в работе. Программа требует от юзера минимум сведений: большинство функций автоматизировано, а настроить основные скрипты можно в 2-3 шага. Также позволяет оперативно изменять настройки аналитики.

• Бережет время веб-мастеров. Как правило, для настройки счетчика на сайте необходимо поменять код. Здесь нужно разработать техническое задание разработчику или исполнителю. Каждое новое звено в цепи — дополнительные временные затраты. Даже небольшие правки замедляют решение вопроса на несколько дней.

• Зачастую программа влияет на цену услуг подрядчика, так как специалист быстрее решает задачу. С помощью Google Tag Manager временные затраты удалось сократить от 2 до 4 часов. Это дает возможность клиенту экономить от 3 тыс. рублей и более.

• Программа имеет удобную и понятную структуру. В ней есть единый контейнер со всеми нужными скриптами. В связи с этим размещать в коде сайта несколько счетчиков нет необходимости. Хватает одного — от Google Tag Manager.

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

• Дает гостевой доступ для показа настроек без возможности их изменения.

• Собирает информацию с сайтов и мобильных приложений. Одна программа собирает информацию для анализа из различных источников.

• Хранит предыдущие версии настроек и дает возможность возобновить их, если нужно. Поэтому вносить правки можно почти безболезненно и в сжатые сроки.

• Не влияет на работу веб-страницы и ее элементов — при условии корректной установки.

Какой бизнес нуждается в управлении тегами с помощью Google Tag Manager

Сегодня маркетинг просто необходимо гибко измерять, а также отслеживать внесенные правки и оценивать их эффективность. Корректировать теги и управлять ими — процесс довольно длительный, включающий в себя несколько этапов. Google Tag Manager упрощает его.

Google Tag Manager (GTM) (Диспетчер тегов) — бесплатная программа от Google, с помощью которой можно:

• размещать пользовательские JavaScript и HTML-скрипты на сайте, не вмешиваясь в его код;

• устанавливать правила выполнения скриптов;

• интегрировать информацию о поведении юзеров с аналитическими системами, например, Google Analytics и Яндекс.Метрикой, инструментами управления рекламой в Интернете, к примеру, Google AdWords, и прочими внешними программами, которые используются в работе;

• вместе с аналитическими программами отслеживать и анализировать поведение пользователей веб-сайта и эффективность каналов рекламы.

Настраивать и управлять размещением скриптами можно через пользовательский интерфейс инструмента. Участие программистов не требуется. Исключение составляет лишь установка кода GTM на сайте.

Надо учитывать, что есть масса продуктов, особенно из области электронной коммерции, гораздо более сложных по сравнению с SEO-продвижением. При этом необходимость управлять тегами в таких случаях становится только острее.

Можно ли не использовать Google Tag Manager? Электронная коммерция — область, в которой он очень выручает. Но вы можете его не применять, если пользуетесь одной или двумя сторонними службами. В этой ситуации GTM не нужен. Если же вы все время добавляете на сайт коды различных сервисов, благодаря Google Tag Manager работать станет легче.

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

• вам не сложно размещать дополнительные коды;

• вы часто экспериментируете с программами, которые просят размещать их коды.

В этих ситуациях Google Tag Manager, возможно, не ваш инструмент. Во всех остальных это прекрасное подспорье в решении задач agile-маркетологом.

Существует и платные аналогичные сервисы с более обширным функционалом. Однако большинству сайтов они не нужны. GTM отлично решает свою задачу. При этом его просто использовать. Советуем применять Google Tag Manager как владельцам сайтов для хранения кодов сайтов в одном месте, так и тем, кто хочет проще настраивать веб-аналитику.

• На лендингах GTM помогает точнее замерить процент отказов (все знают: Google Analytics считает, что пользователь пробыл на сайте 0 секунд, если открыл его и больше ничего не сделал (например, не подал заявку). Однако человек мог прочесть отзывы или записать телефон или email).

• На более сложных сайтах (корпоративных, интернет-магазинах), которые хотят контролировать целевые действия, учитывать в офлайн-конверсии (GTM позволяет удобно настраивать любые цели в Google Analytics самостоятельно) и передавать идентификатор пользователя в CRM.

Поговорим о Google Tag Manager подробнее.

С чего начать работать с Google Tag Manager

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

• Аккаунт.

• Контейнер.

• Теги.

• Правила.

• Макросы.

Эти термины вы встретите и далее в статье, и в любых документах Google.

Аккаунт есть аккаунт. Рассказывать о нем, думаем, не нужно.

Контейнер — основной и единственный фрагмент JS-кода, который размещается на всех страницах сайта. Фактически это тег, однако его задача — выступать в качестве контейнера для всех тегов. О них мы расскажем далее. Это, по сути, архитег, запускающий все остальные теги при соответствии заданным нами правилам для них.

Тег — фрагмент JS-кода. Все те скрипты, которые ранее мы вручную размещали на страницах сайта, например код Google Analytics, код отслеживания конверсий AdWords, пользовательский код и т. д.

Правило — условие, при котором будет вызван или выполнен тег или наоборот (заблокирован). Так, для кода Google Analytics правилом вызова будет: «на всех страницах».

Макросы — пары типа имя/значение, для которых передаются значения в ходе работы. Применяются при настройке правил.

Менеджер тегов по умолчанию состоит из трех макросов:

• URL-макрос

Имя — URL, значение — URL вне зависимости от верхнего уровня. Пример:

If URL = /confirmation.html send our 'Conversion' tags.

На ваших страницах конверсий наверняка множество кодов типа AdWords, eCommerce, аналитических систем и других трекеров.

• HTTP Referrer

Имя — HTTP Referrer, значение — предыдущая веб-страница, на которой побывал человек.

Пример:

If referring page matches Twitter or Facebook, send the 'Referred by Social' tags.

Может быть, вы захотите применить значение пользовательской переменной (custom variable) из Google Analytics.

• Event-макрос

Это несколько труднее, особенно если для вас привычнее события (Events) в Google Analytics. Они похожи, и вы можете пользоваться и ими. Но мы бы не советовали, поскольку у Google Analytics схожий инструмент отслеживания событий.

События можно применять, чтобы отслеживать взаимодействия на странице после ее загрузки. Например, в случае взаимодействия посетителя с формой у вас на сайте вы можете создать соответствующее событие. При наличии каких-либо правил, зависящих от значения этого события, сработает соответствующий тег.

Пример кода:

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

Резюмируем: в коде веб-страницы есть код контейнера. В контейнер с сервера Google загружаются и активизируются теги, соответствующие правилам активации. Макросы необходимы для того, чтобы настраивать теги и правила.

Как настроить Google Tag Manager: пошаговая инструкция

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

Зарегистрируйтесь и создайте контейнер

Для добавления на сайт контейнера GTM авторизуйтесь на странице сервиса и заведите новый аккаунт.

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

Далее нужно скопировать код и вставить его на сайт. Если вы работаете с сайтом, который управляет CMS WordPress, используйте плагины для вставки кода, например Head, Footer and Post Injections. Первую часть кода необходимо вставить в хедер максимально близко к открывающему тегу, а вторую — в тело веб-страницы, сразу после тега <body>.

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

Использование переменных Google Tag Manager

Теги в диспетчере активируются, когда значения триггера и переменной, которую задал пользователь, совпадают. К примеру, во встроенной переменной Click Text всегда есть какой-то текст, а переменная Click URL — URL. Здесь триггер Google Tag Manager активируется, если значение переменной совпадает с параметрами, заданными посетителем: с помощью клика по элементу с указанным текстом или URL.

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

Здесь можно использовать встроенные переменные или создать пользовательские. Для использования встроенных нажмите «Настроить» и отметьте галочкой необходимую опцию.

Пользователи могут применять встроенные переменные следующих видов:

• Страницы. Переменной может быть полный URL (Page URL), относительный URL (Page Path), имя хоста страницы (Page Hostname), источник запроса (Page Referrer).

• Утилиты. Переменные этого типа состоят из событий, ID и версии контейнера, названия рабочей области и ID HTML-тега.

• Ошибки. Эти встроенные переменные состоят из просмотра контейнера в режиме отладки, сообщения об ошибке, ее URL и номера строки.

• Клики. Переменной могут быть HTML-элементы, классы элементов, URL, текст элемента, атрибуты target и ID элемента.

• Формы. Можно использовать как переменную элементы и классы формы, атрибуты target и href и текст формы.

• История. Переменные этого типа поддерживают активацию триггера, если меняется хеш URL. Переменной могут быть новый и старый фрагменты URL, новое и старое состояние истории, а также ее источник.

Когда переменная включается, она появляется в фильтре при формировании триггера.

Используйте триггеры Google Tag Manager

Триггер — условие для активации тега. Оно наступает при совпадении триггера с обозначенным значением переменной. Для настройки триггера нужно выбрать в меню соответствующий раздел и нажать «Создать».

На странице настройки триггера обозначьте название и выберите вид.

В Google Tag Manager есть триггеры следующих типов:

• Просмотр веб-страницы. Активация этого типа происходит по готовности объектной модели инструмента («Модель DOM готова»), после того, как все элементы страницы загружены («Окно загружено»), или сразу после того, как пользователь перешел на страницу.

• Клик. Триггер этого типа отслеживает клики по ссылкам и любым элементам веб-сайта, на которые можно кликать.

• Другие виды. Здесь можно выделить «Ошибку JavaScript», «Таймер», «Пользовательские события», «Отправку формы» и «Изменение в истории».

Итак, вы выбрали тип триггера. Теперь настройте условия его активации: выберите переменную и укажите, что она означает. К примеру, для отслеживания переходов по определенному URL, нужно выбрать тип переменной Click URL и указать значение URL.

Галочка в поле «Ждать теги» блокирует действие, пока не активированы все теги в контейнере. Функция «Проверка ошибок» не дает тегу активироваться при совершении посетителем ошибочного действия.

Как использовать Google Tag Manager для решения конкретных маркетинговых задач сайта

Контейнер тегов в Google Tag Manager позволяет не размещать на сайте код, когда вам нужно сделать ресурс более функциональным или подключить его к новому сервису. На практике это можно использовать так.

Как использовать селекторы CSS в Google Tag Manager

Cелектор CSS является формальным описанием элемента или группы элементов, к которым применяется обозначенное правило стиля.

Селекторы CSS в GTM используют, чтобы определять условия в триггерах, а также в пользовательских переменных типа Элемент DOM и Собственный код JavaScript. Для применения селекторов CSS в триггерах выберите в настройках Click Element или Form Element.

Селектор CSS выручает не только в том случае, если у элемента отсутствуют идентифицирующие его атрибуты. Если один и тот же Click Classes применяется в нескольких элементах на одной странице, в этом случае также применяем селекторы CSS.

Скачайте полезный документ:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Чтобы узнать селектор CSS, можно просмотреть код элемента. Правой кнопкой мыши необходимо кликнуть на необходимый элемент и выбрать пункт «Посмотреть код»:

Далее нужно кликнуть на код нужного элемента правой клавишей и выбрать пункт Copy > Copy selector.

Скопируйте селектор и вставьте в Click Classes триггера. Важно: выберите — Соответствует селектору CSS. Сохраните.

Сформируйте по тем же правилам, что были указаны выше. Выберите в триггере сформированный до этого триггер с переменной и опубликуйте его.

Работа с Яндекс.Метрикой и Google Analytics через Google Tag Manager

Для отслеживания событий или использования внешних служб создайте тег и поместите его в контейнер. GTM поддерживает несколько десятков тегов сторонних ресурсов и служб Google. Также у вас есть возможность размещать пользовательские теги.

Чтобы лучше понять, как работать с тегами, посмотрите, как ресурс интегрируется с аналитическими системами Яндекс.Метрика и Google Analytics.

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

Автор статьи

Павел Бобылев

Руководитель отдела конверсии и упаковки

Статья опубликована: 02.10.2019

Последние статьи этого автора:

• Реально интересные бизнес-идеи 2021 года, о которых вы бы никогда не догадались
• Примеры лендинг пейдж: советы по созданию
• Выбор ниши с нуля: 12 подходов и 10 этапов

Забрать подарки
из закрытой базы

Скачать 7,4 MB

Полезные
материалы
для руководителей

Скачать 3,2 MB