gtm что это такое
Что такое Google Tag Manager и как им пользоваться
Учимся работать с популярным диспетчером тегов: пошаговая иллюстрированная инструкция по настройке Google Tag Manager.
Что такое Google Tag Manager
Google Tag Manager — это простой, надежный и бесплатный диспетчер тегов. С помощью него можно создавать и обновлять теги для сайта или мобильного приложения, проще использовать код сторонних служб, самостоятельно управлять тегами и заниматься тестированием и отладкой.
Зачем нужен Google Tag Manager (GTM)
С помощью GTM на сайт можно добавить код разных служб аналитики: Google Analytics, «Яндекс.Метрики», Google Maps и других сервисов для мониторинга сайта.
Преимущества GTM
Термины Google Tag Manager
Оболочка для хранения всех тегов вашего сайта или мобильного приложения. По сути, контейнер — основной код, который добавляется на сайт и отвечает за запуск тегов сторонних сервисов. Для каждого ресурса — свой контейнер.
Фрагмент кода JS, который необходимо выполнить и к которому можно подключить триггер. У тега много разных функций: отслеживание трафика и поведение посетителей, анализ эффективности рекламы, ремаркетинг и таргетинг.
Условие для выполнения или блокировки тега. Триггер должен содержать какое-то событие: загрузка страницы, переход по ссылке, клик и так далее. Также для триггера есть фильтры, которые можно настроить. Например, указать URL страниц, на которых должен срабатывать тег.
Параметр, для которого передается значение в процессе работы.
Настройка Google Tag Manager
Перейдите на сайт Google Tag Manager и авторизуйтесь с помощью
Google-аккаунта. Если аккаунта нет, создайте и затем авторизуйтесь.
После авторизации создайте аккаунт для GTM или выберите из уже созданных. Я покажу настройку GTM на своем небольшом тестовом сайте sokratzona.info.
В открывшемся окне добавления нового аккаунта введите его название. Нажмите кнопку Далее.
Для создания контейнера введите его название и укажите, где он будет использоваться. Я выбрал веб-сайт. Нажмите кнопку Создать.
Скопируйте код контейнера.
Если вы случайно закрыли окно с кодом и не скопировали его, ничего страшного, найти его можно, нажав на идентификатор контейнера в правом верхнем углу.
Нажмите на идентификатор, и у вас появится окошко с кодом. Скопируйте его и разместите на своем сайте.
В моем случае файл, куда я поместил код, называется index.html. Если вы используете CMS, возможно что файл будет называться header.php или еще как-то.
Как создать тег в Google Tag Manager
Давайте подключим сайт к Google Analytics. В рабочей области в карточке Новый тег нажмите на ссылку Добавить новый тег.
Далее перейдите в Конфигурацию тега и выберите его тип. Например, Google Аналитика — Universal Analytics.
Укажите идентификатор отслеживания. Найти его можно в аккаунте Google Analytics, Администратор — Настройки ресурса — Идентификатор отслеживания.
В качестве типа отслеживания выберите Просмотр страницы. В категории Триггеры выберите All Pages. Сохраните изменения.
Теперь проверим, правильно ли мы все подключили. Для этого нужно опубликовать контейнер. Перед публикацией рекомендую сделать предпросмотр в режиме отладки, чтобы в случае необходимости все быстро исправить, не затрагивая боевую версию сайта.
Сайт откроется в том же браузере. Если у вас внизу на панели отладки появился тег, то вы все сделали правильно.
Проверьте корректность работы Google Analytics. Да, все работает.
Как настроить и использовать триггеры GTM
Триггеры находятся в меню рабочей области GTM.
Выберите тип триггера.
Выбрав тип триггера, настройте условие его активации: укажите тип переменной Click URL и ссылку, переходы по которой будете отслеживать.
Как использовать переменные GTM
Чтобы задействовать переменные, выберите соответствующий пункт в меню рабочей области GTM.
Можно настраивать встроенные шаблоны переменных или создавать пользовательские.
В этом окне вы можете ознакомиться с доступными типами встроенных переменных. После того, как отметите переменную, она станет доступной в фильтре триггера.
Какие задачи можно решить с помощью Google Tag Manager
1. Отслеживать клики по кнопкам соцсетей
Создайте тег Пользовательский HTML и скопируйте код кнопок шеринга сервиса, которым вы пользуетесь.
Укажите триггер All Pages. Сохраните и опубликуйте контейнер. Триггер можно указать как для всех страниц, так и выборочно.
Вот, что получилось после публикации:
2. Внедрять микроразметку
Так же, как и в предыдущем примере, сгенерируйте код с помощью сервиса Schema или любого другого. Создайте тег Пользовательский HTML и разместите туда полученный код, настройте активацию триггера. Вот так настраивается микроразметка.
3. Отслеживать переходы по внешним ссылкам
Создайте новый тег. Тип тега выберите Universal Analytics.
Настройте конфигурацию тега.
Настройте триггер. Выберите тип Только ссылки, отметьте пункт Некоторые ссылки и назначьте событие активации триггера.
Сохраните и опубликуйте ваш тег, но прежде проверьте, активирован ли он. Для этого нажмите на предварительный просмотр и кликните по любой внешней ссылке.
Посмотрите в Google Analytics вкладку события в режиме реального времени.
4. Просматривать показатель отказов
Любое посещение сайта без совершения целевых действий Google Analytics считает отказом. Например, вы просмотрели одну страницу, не зарегистрировались или не подписались на рассылку, не заказали услугу, не связались посредством формы обратной связи и не поделились контентом — это и есть отказ.
Даже если по итогу вы позвонили по указанному на сайте телефону, а не через кнопку обратного звонка, и купили товар, все равно Google Analytics учтет вас как «отказника». Такое состояние дел несколько искажает действительность и не дает реальной картины.
Для уточнения показателя отказов и получения более точных сведений можно настроить отслеживание длительности посещения без привязки к действиям. Пробыли на сайте десять секунд — уже не отказ.
Чтобы настроить показатель отказов, создайте тег Universal Analytics, тип отслеживания Событие.
Затем укажите для тега триггер Таймер и задайте нужный интервал в миллисекундах.
Проверьте подключение тега.
В Google Analytics показатель уменьшился.
Заключение
Знание таких инструментов, как GTM, пригодится каждому маркетологу. К сожалению, нередко бывают ошибки, которые влекут за собой дополнительные расходы, а неверно собранные данные искажают результаты. Поэтому всегда важен комплексный подход и умение правильно работать с данными аналитики.
На курсе Skillbox вы сможете углубить свои знания в веб-аналитике, рассмотрите множество реальных кейсов и познакомитесь со всеми инструментами сбора, обработки и визуализации информации, которые можно использовать на практике.
Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикую переводы на хабре.
Что такое Google Tag Manager?
Установка на сайте инструментов аналитики, систем по сбору данных о посетителях сопровождается добавлением HTML и JS элементов в коде админки. Выполнить такую работу способен только компетентный человек. Обновление кода иногда приводит к сбоям в работе сайта, поломанной верстке, изменению скорости загрузки страниц. Так как многие сайты по сути представляют бизнес-проекты, подобные неполадки могут привести к оттоку клиентов и убыткам.
Чтобы не рисковать работоспособностью сайта, иногда владельцы отказывают вебмастерам в доступе к коду. Оптимальным вариантом для владельцев сайтов и вебмастеров считается система управления тегами — Google Tag Manager. В этой статье мы расскажем о нем подробнее.
Google Tag Manager — это единое место для хранения всех тегов, которые подключены на сайте.
В GTM можно добавить коды аналитики (Google Analytics, Яндекс Метрика и др.), систем коллтрекинга (Calltouch, Calltracking), онлайн-чатов (Jivosite, Siteheart) и других сервисов. Для этого в интерфейсе диспетчера тегов предусмотрены встроенные шаблоны, а также есть возможность создания персональных шаблонов. Все HTML и JS элементы хранятся в диспетчере тегов.
Чтобы использовать GTM необходимо единожды добавить в раздел кода два фрагмента. Активировать сервис и работать в нем могут специалисты с минимальным опытом в программировании. Готовые шаблоны и функции дают возможность проводить тесты, использовать теги с пользой для каждого посетителя. При этом владельцу сайта легко отследить конверсии и оценить эффективность использования каждого тега по отдельности.
Для работы с диспетчером тегов необходимо понимать значение терминов:
Контейнер — место, где хранятся все теги для одного проекта. Рекомендуется создавать отдельный контейнер для каждого сайта. Исключение составляют полностью идентичные сайты, которые удобно объединить в один контейнер. Для запуска такого контейнера необходимо единожды установить код на сайт.
Тег — Участок кода, который подключает стороннюю систему. Например, для подключения Яндекс Метрики нужно подключить соответствующий участок кода в GTM. К тегу можно подключить триггеры, которые отслеживают действия посетителей сайта.
Триггер — условие, при котором выполняется запуск или блокировка тега. В диспетчере тегов можно настроить график запуска или конкретные страницы, на которых должно сработать условие. Для этого в GTM предусмотрены фильтры. Каждый триггер включает конкретное событие: переход по ссылке, клик, загрузку страницы и т.д.
Переменная — параметр в формате «ключ — значение», функция или переменная, которую можно использовать в нескольких тегах.
Удобство и бесплатный доступ. В админке сайта необходимо добавить лишь код GTM, действия с тегами выполняются в интерфейсе диспетчера тегов.
Самостоятельное управление. Для добавления тегов и настройки триггеров не нужно привлекать дополнительных специалистов.
Быстрая установка и начало работы. Настройка и запуск аккаунта GTM выполняется в несколько кликов.
Интеграция с большим количеством систем. Через GTM можно подключить любые системы аналитики и взаимодействия с пользователями сайта.
Скопление тегов в одном месте.
Единоразовое вмешательство в код страниц сайта.
Система контроля версий и возможность отката к предыдущим версиям в несколько кликов.
Возможность установки целей и отслеживания конверсий.
Привычный интерфейс, схожий со всеми сервисами Google.
Удобство тестирования и возможность проверки кода до его публикации на сайте.
Совместимость с мобильными сайтами и приложениями.
Наличие встроенных шаблонов для настройки кода.
Управление триггерами и возможность создавать собственные переменные для вызова кода в определенное время либо при совершении указанного действия пользователем на сайте.
1. Войдите в аккаунт Google и перейдите на страницу диспетчера тегов.
Что такое Google Tag Manager и как настроить Google Analytics с его помощью
Соберите все данные для сквозной аналитики вместе с OWOX BI
Соберите все данные для сквозной аналитики вместе с OWOX BI
Чтобы использовать системы веб-аналитики, рекламные сервисы и другие сторонние инструменты, необходимо добавить их код на свой сайт. Это не сложно, если у вас пара-тройка таких сервисов, вы разбираетесь в HTML или имеете штатного разработчика.
Проблемы начинаются, когда нужно внести изменения в уже установленный код или добавить новые интеграции. Во-первых, это отнимает много времени. Во-вторых, случайно задев какой-нибудь фрагмент кода, можно «поломать» весь сайт. К счастью, Google создал отличный инструмент для решения этих проблем — Tag Manager, он же Диспетчер тегов, он же GTM.
бонус для читателей
Подробный гайд, как установить Google Tag Manager на свой сайт
Содержание
Что такое Google Tag Manager
GTM — это система для удобного управления JavaScript и HTML тегами (фрагментами кода) без помощи разработчиков. Или почти без помощи — один раз все же придется обратиться к программистам, чтобы установить на сайт код самого Диспетчера тегов. Зато потом вы сможете самостоятельно подключать любые сервисы и добавлять новые скрипты уже в интерфейсе Google Tag Manager.
С помощью Диспетчера тегов вы можете:
Кому будет полезен Google Tag Manager:
Узнайте, какие кампании приносят прибыль, а какие не окупаются
Автоматически импортируйте расходы из рекламных сервисов в Google Analytics. Сравнивайте затраты, CPC и ROAS разных кампаний в одном отчете.
Плюсы и минусы Диспетчера тегов
Помимо описанных выше возможностей, у Диспетчер тегов есть дополнительные преимущества, которые значительно облегчат вам жизнь и помогут сэкономить время и деньги. Вот некоторые из них:
К недостаткам Google Tag Manager можно отнести такие пункты:
Если вам нужна помощь с установкой и настройкой Google Tag Manager, вы можете воспользоваться услугой «Настройка веб-аналитики» от OWOX BI. Наши специалисты разработают индивидуальную систему метрик под ваши цели и бизнес-задачи.
Структура и термины Google Tag Manager
В Диспетчере тегов для одного gmail-адреса можно создать несколько аккаунтов, но зачастую хватает и одного, если только вы не агентство, которое работает с сайтами многих компаний.
Следующая ступень в иерархии GTM — это контейнер. В нем хранятся все теги для вашего сайта, мобильного приложения или AMP-страниц. В аккаунте можно создать несколько контейнеров — для каждого ресурса отдельный. С технической стороны контейнер — это главный код GTM, который устанавливается на сайт и позволяет запускать теги остальных сервисов.
Тег, как мы уже писали выше — это фрагмент кода, который необходимо выполнить. Он может выполнять разные функции: передавать данные в системы аналитики и другие сторонние приложения; запускать ремаркетинг; отправлять email пользователям, бросившим корзину; менять контент для A/B тестов и т. д.
Вы можете использовать готовые шаблоны тегов:
Или создавать собственные теги, если вы хорошо разбираетесь в HTML:
Триггер — это обязательное условие для срабатывания тега. Его можно настроить как для активации тега, так и для блокировки. Триггер должен содержать событие: клик по кнопке, загрузка страницы, переход по ссылке и т. д. Также для каждого триггера можно настроить фильтры, например, указать URL страниц, на которых должен срабатывать тег.
В Google Tag Manager все триггеры разделены на 4 группы:
Триггеры в Диспетчере тегов:
Переменная — это параметр и его значение. В триггерах с помощью переменных настраивают фильтры. Например, если вам нужно отслеживать просмотр страницы www. site. ru/tovar, вы можете настроить триггер «Просмотр страницы», который будет срабатывать только тогда, когда переменная Page URL принимает значение site. ru/tovar. В тегах переменные используются для хранения и передачи данных о действиях пользователей на сайте, транзакциях, товарах и т. д.
На момент написания этой статьи в GTM доступно 44 встроенных переменных для сайтов. Чтобы использовать переменную, ее нужно активировать, поставив напротив галочку:
Если встроенных переменных недостаточно, вы можете создавать пользовательские с помощью кода JavaScript и CSS селекторов, что позволяет отслеживать практически все действия посетителей на сайте.
Как настроить Google Analytics с помощью Google Tag Manager
Шаг 1. Создайте аккаунт в Google Analytics, если у вас его еще нет. Как это делается, мы детально описали в статье про настройку GA.
Шаг 2. Установите код контейнера GTM на свой сайт. Для этого вы можете использовать инструкцию, которую мы подготовили.↴
бонус для читателей
Подробный гайд, как установить Google Tag Manager на свой сайт
Шаг 3. Создайте переменную просмотра страниц. Для этого на вкладке «Рабочая область» выберите «Переменные» — «Пользовательские переменные» и нажмите «Создать». В поле «Тип переменной» выберите из выпадающего списка «Настройки Google Analytics», а в поле «Идентификатор отслеживания» укажите ID вашего ресурса Google Analytics, в который хотите передавать данные.
Придумайте название для переменной, например GUA Pageview, и сохраните ее.
Не знаете где посмотреть ID вашего ресурса? Открываем Google Analytics, на вкладке «Администратор» выбираем «Настройки Ресурса» и находим идентификатор отслеживания:
Шаг 4. Создайте тег, который будет отправлять данные о просмотре страниц в ресурс Google Analytics. Для этого в разделе «Теги» нажмите «Создать», выберите из списка тип тега «Google Аналитика — Universal Analytics». В поле «Тип отслеживания» укажите «Просмотр страницы», а в поле «Настройки Google Analytics» — переменную, которую создали в Шаге 3. Затем выберите встроенный триггер «All Pages», назовите и сохраните тег.
Шаг 5. Опубликуйте изменения, которые вы только что внесли в свой контейнер. Для этого на вкладке «Рабочая область» нажмите на кнопку «Отправить».
В открывшемся окне укажите название новой версии контейнера и нажмите «Опубликовать».
ВАЖНО! Если ранее вы вручную разместили код Google Analytics на сайт, то его нужно удалить и одновременно с этим опубликовать контейнер GMT, иначе данные будут дублироваться.
Шаг 6. Проверьте, передаются ли данные в Google Analytics. Для этого зайдите в свой аккаунт GA и откройте отчет «В режиме реального времени — Обзор». В него должны начать поступать данные:
Возможные проблемы при работе с Google Tag Manager
Проблема: Теги отрабатывают верно в режиме отладки, но данные в GA не поступают.
Причина: При настройках тега Google Analytics указан неверный идентификатор отслеживания. Из-за этого данные не отправляются в необходимый ресурс.
Решение: Указать верный идентификатор отслеживания. Где его взять, мы описали в Шаге 3.
Проблема: При переходе на Google Tag Manager резко возросло количество сеансов и пользователей.
Причина: Опубликован контейнер GTM, а код Google Analytics, установленный вручную, не удален. Из-за этого данные передаются в GA и через GTM, и через насайтовый код, в результате чего дублируются.
Решение: Удалить насайтовый код GA.
Проблема: Вы внесли изменения в контейнер Google Tag Manager, но в режиме отладки их не видете.
Причина: После каждого изменения необходимо обновлять предварительный просмотр — этого не сделали. Либо же у вас несколько «Рабочих областей» и режим предварительного просмотра включен не для той, в которой вносились изменения.
Решение: Обновить предварительный просмотр. Проверить, какая «Рабочая область» в режиме предварительного просмотра.
Полезные ссылки и примеры задач, решаемых с помощью Диспетчера тегов
Google Tag Manager в связке с Google Analytics дает вам очень гибкую систему аналитики и позволяет настроить сбор практически любых данных с сайта. Мы подготовили подборку статей по теме — узнайте, какие еще задачи вы можете решить благодаря GTM:
И на закуску вебинар «На шаг впереди: приемы и тонкости работы с Google Tag Manager», на котором наш веб-аналитик показала, как:
Заполните форму, и мы пришлем вам запись и презентацию вебинара на email.