Google Tag Manager: как управлять тегами сайта

5769

Для использования сторонних программ, систем, сервисов или инструментов нужно установить их код на сайт. Отлично, когда таких сервисов 1-2, вы знаете HTML или у вас есть разработчик в штате — это несложно и займет относительно немного времени. Другая ситуация, когда помощи ждать неоткуда, а изменения в код внести надо. Чтобы облегчить жизнь РРС-специалистам, владельцам бизнеса, менеджерам и всем сопричастным, Google создал Менеджера тегов, он же Google Tag Manager, он же GTM.

В этой части гайда от Penguin-team поговорим о том, что это, зачем и кому нужно, в чем преимущества и как начать работу.

Что такое Google Tag Manager — GTM для начинающих

GTM — бесплатный сервис Google, который значительно упрощает управление JavaScript и HTML тегами на сайте или в мобильном приложении.

Фактически это — фрагмент кода из двух частей. Вот так он выглядит:

Код Google Tag Manager — Первая часть кода

Функции Google Tag Manager — GTM для начинающих

Какие функции есть у Менеджера тегов Google? С ним вы сможете:

быстро подключать различные сервисы аналитики: Google Analytics, Яндекс.Метрику, AppsFlyer + устанавливать коды для сбора данных Facebook, LinkedIn, Pinterest, Twitter и других;
фиксировать любые взаимодействия пользователя с сайтом и отправлять в нужный вам сервис;
настроить кроссдоменное отслеживание;
настраивать отправку данных для настройки ремаркетинга в Google Ads и ретаргетинга в Яндекс.Метрике, DoubleClick, Facebook;
использовать кастомные скрипты и встроенные теги сервисов для проведения А/В-тестов, показа баннеров и не только;
быстро вносить любые изменения во все теги;
установить на сайт коллтрекинг от Google или от сторонней компании;
использовать Google Optimize и Google Опросы для оценки удовлетворенности посетителей сайтом;
интегрировать внешние сервисы: Adometry, Distillery, comScore, FoxMetrics, Infinity, MouseFlow, Placed…

То есть GTM — это такая себе шкатулка, куда вы складываете небольшие, но очень ценные предметы.

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

Для чего нужен Диспетчер тегов Google — GTM для начинающих

Зачем использовать Google Tag Manager, если все можно сделать сразу на сайте?

Во-первых, большое количество тегов, установленных напрямую на сайте, замедляет работу последнего. Нормальная скорость загрузки страниц — до 3 секунд. Каждая лишняя секунда раздражает посетителей и делает их менее лояльными. Как следствие, потенциальных клиентов становится меньше и вы недополучаете прибыль. Если такое происходит постоянно, то после 2-3 попыток посетитель, скорее всего, больше не вернется.

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

В-третьих, размещая теги на сайте, не получится просто включить/отключить их. Для этого придется каждый раз добавлять/удалять теги из одного или нескольких файлов. Это быстро и несложно, когда тег один. Нормально, когда их три. А когда больше, легко запутаться, что-то забыть, где-то не полностью обновить код.

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

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

Преимущества Google Tag Manager — GTM для начинающих

При использовании Менеджера тегов:

Не нужно лезть в код сайта при каждой необходимости изменить параметры, активировать /заблокировать тег в одном или нескольких файлах. Такая себе гарантия ничего не забыть и не сломать сайт.
Вы не зависите от разработчиков: сервис позволяет самостоятельно управлять установленными тегами. Вы сможете протестировать несколько вариантов и выбрать оптимальный, отредактировать или добавить какой-то элемент всего за пару минут. Без Диспетчера приходится обращаться к разработчикам для внесения любых, даже самых незначительных, изменений. Часто это вызывает неудобства: порой нужно ждать недели-месяцы. Плюс привлечение специалистов — это всегда дополнительные расходы на оплату.
В вашем распоряжении понятный функционал для эффективного управления тегами + расширенные возможности для всяких хитрых схем (о которых мы еще поговорим в следующих частях гайда). При установке на сайт Диспетчера тегов на всех страницах размещается контейнер, который хранит теги с заданными параметрами. Потом при помощи пары кнопок вы можете редактировать, добавлять, удалять, отключать, включать любые теги, задавать условия для них. Кроме того, к одному интерфейсу подключается несколько аккаунтов. Это значительно упрощает жизнь, когда вы ведете разные проекты.
Проще отслеживать события на сайте. Например, вам нужно отследить клики по внешним ссылкам на сайте. Без GTM придется добавлять код отслеживания на каждую (!) внешнюю ссылку – а это долго и трудозатратно. С Диспетчером процесс пройдет в пару кликов и займет несколько минут. Так же просто отслеживать клики на кнопку, процент скроллинга, количество отправленных форм, другие данные.
Увеличивается скорость работы сайта. Теги загружаются по мере готовности, одновременно с загрузкой остальных элементов страницы. Таким образом активация одного тега не блокирует запуск другого. Именно установка Google Tag Manager используется, как один из способов повышения скорости работы сайта в рамках оптимизации коэффициента конверсии.

Кому нужен Google Tag Manager — GTM для начинающих

GTM однозначно полезен и имеет много плюсов, но не для всех.

Театр начинается с вешалки, дружба — с улыбки, а работа в GTM — с создания учетной записи и разбора основных понятий.

Создание учетной записи — GTM для начинающих

Чтобы начать работу, перейдите на главную страницу Google Tag Manager → «Регистрация» → «Создать аккаунт» → заполните все поля → «Создать»:

Готово.

Сервис сразу покажет код (он же контейнер). Его необходимо вставить в разделы <head> и <body> кода сайта, следуя инструкции:

Персональный код также найдете во вкладке «Администрирование» → «Установить Диспетчер тегов Google»:

В Диспетчере можно подключить сразу несколько аккаунтов к одной учетной записи Google. Для этого возвращаетесь на главную страницу и повторяете действия. Главное правило: один аккаунт — один сайт.

Основной функционал Менеджера тегов — GTM для начинающих

Чтобы разобраться с GTM было легче, рассмотрим основные возможности и общий принцип их работы.

В интерфейсе Рабочей области вы найдете разделы Тег, Триггеры, Переменные. Именно они помогут создать, настроить и управлять новыми тегами:

Принцип работы Диспетчера тегов Google — GTM для начинающих

Диспетчер тегов работает по принципу цепной реакции: выполнение определенных действий (ваш триггер) при заданных параметрах (ваши переменные) запускают тег — и вы получаете нужные для анализа данные. Разберем на примерах.

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

Тег отслеживания конверсии активируется только, когда посетитель окажется на странице благодарности, на которую он попадает при успешном оформлении заказа. Тут триггер — посещение страницы с определенным URL.

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

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

Полученные с помощью Диспетчера тегов данные импортируются в сервисы аналитики, например, в Google Analytics. Это позволяет анализировать рекламные кампании, тестировать отдельные элементы на сайте, а на основе этого — корректировать стратегию и тактику для эффективного ведения бизнеса.

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