Что такое google tag manager

Что такое Google Tag Manager и как им пользоваться

Учимся работать с популярным диспетчером тегов: пошаговая иллюстрированная инструкция по настройке Google Tag Manager.

Степан Степанов

Автор статей по дизайну. В веб-дизайн пришёл в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил вёрстку. Время от времени публикую переводы на Habr.

Что такое Google Tag Manager

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

Зачем нужен Google Tag Manager (GTM)

С помощью GTM на сайт можно добавить код разных служб аналитики: Google Analytics, «Яндекс.Метрики», Google Maps и других сервисов для мониторинга сайта.

Преимущества GTM

1. Шаблоны для интеграции Google Analytics, разных метрик и так далее.
2. Можно использовать пользовательские теги.
3. Предпросмотр и инструмент отладки тегов.
4. Система контроля версий — в любой момент можно откатиться к более ранней.
5. Реализация асинхронной загрузки тегов, что положительно сказывается на скорости загрузки страниц сайта.
6. Можно настраивать текстовую подмену на сайте, мгновенно меняя варианты.

Термины 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 вы сможете углубить свои знания в веб-аналитике, рассмотрите множество реальных кейсов и познакомитесь со всеми инструментами сбора, обработки и визуализации информации, которые можно использовать на практике.

Теги

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

Диспетчер тегов для веб-страниц

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

Начать

Выберите вариант, чтобы начать.
Новые пользователи

Настроить и установить Диспетчер тегов

В этом документе объясняется, как установить Диспетчер тегов в первый раз.
Пользователи диспетчера тегов

Настроить новый веб-контейнер

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

пользователи gtag.js

Переход с gtag.js на Диспетчер тегов

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

Настройте тег Google

Тег Google является основой для всех ваших вариантов использования измерений. Тег Google позволяет:

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

Следующие шаги

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

Установить дополнительные теги

Диспетчер тегов позволяет управлять различными тегами для служб Google и третьих лиц. В галерее шаблонов есть теги других пользователей. Если ни один существующий тег не соответствует вашим потребностям, вы всегда можете создать собственный тег.

Настроить слой данных

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

Изучите теги на стороне сервера

Тегирование на стороне сервера — это ключ к отказу от сторонних файлов cookie. Сервер тегов позволяет создавать, записывать и хранить файлы cookie на вашем собственном сервере. Бонус: вы улучшите производительность своего сайта!

Настройка Google Tag Manager

Аналитика, ретаргетинг, авторассылка и другие дополнительные функции на сайте настраиваются при помощи специальных скриптов. Фрагменты кода, которые отвечают за определенную функциональность на сайте, называются тегами. Если тегов много, то работать с ними в коде становится сложно, ведь они не должны мешать друг другу и настраивать их нужно так же по отдельности. Для удобной работы с тегами компанией Google был разработан бесплатный инструмент Google Tag Manager (GTM).

Что такое Google Tag Manager

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

Сложный предполагает, что на сайт будут установлены Яндекс.Метрика, Google Analytics, коды ремаркетинга рекламных систем (Facebook Pixel, пиксель «ВКонтакте», счетчик Top.Mail), а также коллтрекинг (если лидом является звонок). После этого необходимо настраивать события, конверсии и цели. Чтобы это сделать грамотно, часто требуется знание JavaScript и CSS. И каждый раз, когда появятся новые события или цели, все эти действия придется совершать заново.

Но есть и простой способ настройки веб — аналитики. Можно один раз установить на сайт Диспетчер тегов Google — Google Tag Manager (GTM) — инструмент, который предназначен для управления тегами на сайте. С ним не придется постоянно менять код, а если появятся новые события, то их можно будет просто добавить внутри Диспетчера. И даже если придется сменить сайт, то контейнер со всеми настройками можно будет просто перенести.

GTM упрощает использование кодов сторонних служб на сайте и значительно расширяет возможности маркетологов, PPC и SEO-специалистов, а также всех кто занимается аналитикой сайтов.

Используя GTM на сайт можно добавить код любой службы: от сервисов Google до сторонних платформ. Например, можно добавить:

• Яндекс Метрику;
• Google Analytics;
• Тег ретаргетинга AdWords;
• Facebook Ads;
• Пиксель Вконтакте;
• Счетчик Top.Mail;
• Сервисы обратного звонка и многие другие.

При работе с GTM используется ряд основных понятий:

1. Контейнер — управляющий JavaScript—код, который вставляется на все страницы сайта. Он позволяет встраивать и запускать все остальные теги.
2. Тег — размещенный на страницах сайта JavaScript или HTML — код, который обеспечивает выполнение необходимых функций: отслеживание трафика, поведения посетителей на сайте и т.д. Например: коды счетчиков Яндекс Метрика, LiveInternet, код ремаркетинга, пиксели Вконтакте или Facebook.
3. Триггер — условие, которое указывает при каких обстоятельствах будут выполняться созданные теги. Например: при переходе по определенной ссылке или по клике на определенную кнопку.
4. Переменная — поле, используемое для хранения и передачи данных, необходимых для работы тегов и триггеров.

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

Что можно делать при помощи Google Tag Manager

Используя Менеджер тегов, можно:

1. Отслеживать внутренние и внешние переходы, в том числе и по конкретной ссылке;
2. Следить за показателями отказов;
3. Просматривать источники трафика: все или какие—то конкретные;
4. Отслеживать конверсии;
5. Настраивать ретаргетинг и ремаркетинг;
6. Мониторить отправку автоматических форм;
7. Отслеживать клики по социальным кнопкам и виджетам;
8. Отслеживать клики по элементам с тем или иным текстом;
9. Подменять номера, заголовки, изображения на сайте;
10. Внедрять микроразметку;
11. Настраивать кнопки расшаривания материалов.

Можно ли обойтись без GTM? Можно, если вы используете 1-2 сторонних службы. Если же вы регулярно добавляете на сайт коды различных служб, то GTM существенно упростит работу с ресурсом.

Установка и настройка Google Tag Manager

Чтобы установить GTM на свой сайт, сначала необходимо зарегистрировать аккаунт на сайте GTM https://tagmanager.google.com

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

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

Нажмите «Создать» и примите пользовательское соглашение.

Если все сделано верно, то появится всплывающее окно:

Скопируйте код из первого поля и вставьте его перед закрывающимся тегом в коде сайта. В зависимости от сайта это можно сделать через файл index.html, используя плагин или интегрировать GTM напрямую. Код из второго поля вставьте после открывающегося тега.

Если вы случайно закрыли окно, не скопировав код, его можно найти в разделе «Администрирование» — «Установить диспетчер тегов Google»

После этого проверьте, работает ли GTM на сайте. Для этого можно использовать режим предварительного просмотра:

Или расширение Google Tag Assistant. Бесплатно установите расширение Google Tag Assistant, нажмите на его значок на своем сайте, и он покажет, какие теги установлены.

Если все сделано верно, на сайте должна подгрузиться iframe-форма.

После этого можно начинать установку Яндекс.Метрики, Google Analytics и других счетчиков.

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

Принцип работы с тегами удобно освоить на примере установки систем аналитики Яндекс Метрика и Google Analytics.

Как установить Google Analytics через Google Tag Manager

У Google Analytics есть прямая интеграция с GTM, поэтому установить его довольно просто.

В левом меню откройте раздел «Теги» и нажмите «Создать»:

Откроется окно с двумя полями: «Конфигурация тега» и «Триггеры».

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

В «Конфигурации тега» выберите « Universal Analytics»:

Далее укажите идентификатор ресурса. В поле «Настройки Google Analytics» нужно вставить идентификатор. Для этого в выпадающем меню выберите «Новая переменная» и скопируйте туда идентификатор. Его можно узнать в аккаунте Google Analytics в разделе «Администратор — Ресурс — Настройки ресурса — блок Основные настройки — Идентификатор отслеживания».

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

В поле «Тип отслеживания» автоматически проставится параметр «Просмотр страницы»:

Сохраните тег, после чего он отобразится в рабочей области:

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

После этого нужно проверить корректность работы тега, используя режим предпросмотра. Если все сделано верно, то тег отобразится в iframe-форме.

Как установить Яндекс.Метрика через Google Tag Manager

Чтобы подключить сайт к системе Яндекс.Метрика, нужно добавить новый тег (раздел «Теги» в левом меню — кнопка «Создать»»). Триггер задаем тот же, что и с Google Analytics — «All Pages». В поле «Конфигурация тега» выберите «Специальные — пользовательский HTML»:

В поле для ввода HTML вставьте код Яндекс.Метрики. Для этого зайдите в аккаунт и выберите счетчик. В левом меню нажмите «Настройка», после чего внизу появится поле счетчика:

Скопируйте код в соответствующее поле GTM и нажмите «Сохранить». После того, как тег появится в рабочей области, его нужно будет «Отправить» и проверить корректно ли он работает:

Проверить, верно ли установлен счетчик можно и при помощи параметра _ym_debug=1, который нужно ввести сразу после адреса сайта.

Зайдите на сайт, откройте код (Ctrl+Shift+I) и найдите параметр PageView. Counter. после него будет указан номер счетчика. Проверьте, совпадает ли он с номером внутри вашего аккаунта в самой Яндекс.Метрике.

Как установить Facebook Pixel через Google Tag Manager

Чтобы добавить Facebook Pixel, предварительно нужно создать его, для чего следует зайти в Ads Manager и в разделе Events Manager выбрать пункт «Пиксели».

После этого можно добавить в GTM пиксель Facebook при помощи партнерских интеграций или вручную:

Установка пикселя вручную происходит по тому же алгоритму, что и в случае с Яндекс.Метрикой: нужно создать тег, выбрать в конфигурациях «Специальные — пользовательский HTML» и скопировать код.

Если нужно добавить пиксель при помощи партнерских интеграций, достаточно в списке отыскать Google Tag Manager:

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

Если все сделано верно, то в рабочей области Google Tag Manager появится тег пикселя Facebook:

Проверить правильность его установки можно также в режиме предпросмотра или через специальное расширение Facebook Pixel Helper (для Google Chrome).

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

Что такое Google Tag Manager (GTM)

Google Tag Manager (GTM или диспетчер тегов) – это система управления тегами, которая позволяет устанавливать код отслеживания и другие фрагменты кода (теги) на сайте или в мобильном приложении. Основное преимущество этого инструмента в том, что он позволяет добавлять теги и управлять ими без постоянного привлечения программиста.

Зачем нужен Google Tag Manager

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

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

Кому пригодится Google Tag Manager:

• Интернет-маркетологам в агентстве или инхаус-команде.
• SEO-специалистам.
• Специалистам по контекстной рекламе и таргетированной рекламе в соцсетях.
• Веб-аналитикам.
• Владельцам небольших проектов, которые развивают сайт самостоятельно.

Создание аккаунта Google Tag Manager

Для регистрации аккаунта нужно перейти на сайт диспетчера тегов и кликнуть на «Start for free».

Аккаунт – это самый высокий уровень иерархии в GTM. Поэтому при добавлении нового аккаунта для удобства лучше указывать название компании/клиента в качестве названия аккаунта. Затем указываете страну и по желанию можете установить галочку «Передавать анонимные данные в Google и другие службы».

Далее следует этап создания контейнера. В одном аккаунте может быть несколько контейнеров. Контейнеры разделяются по типу целевой платформы: сайт, мобильное приложение для iOS, мобильное приложение для Android, AMP-страницы. Давайте название контейнеру в соответствии с целевой платформой.

Примите соглашение об условиях использования Tag Manager.

Установка кода Google Tag Manager на сайт

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

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

Как проверить корректность установки Google Tag Manager на сайте

После того, как тег диспетчера тегов размещен на сайте, необходимо опубликовать контейнер. Для этого в правом верхнем углу нажмите на «Отправить»

и на следующем экране на «Опубликовать».

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

Далее необходимо убедиться в корректности установки кода на сайт.

Для этого можно использовать расширение для браузера Tag Assistant (by Google). Установить расширение можно по ссылке. После установки вам будут предложены теги систем, которые будет отслеживать расширение.

Затем необходимо включить Tag Assistant

и перезагрузить страницу. Tag Assistant покажет все обнаруженные на странице теги.

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

Красный и желтый цвет значка означают критичные и менее критичные ошибки, соответственно. Синий – некритичные недочеты.

Из чего состоит аккаунт Google Tag Manager

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

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

Переменные

Переменная в GTM – это параметр, который может принимать разные значения. Переменная представляет собой пару «ключ-значение». Ключ – это неизменное название переменной. Например, переменная Page URL хранит значение URL текущей страницы сайта.

В Google Tag Manager есть два типа переменных: встроенные и пользовательские.

Встроенные переменные в Google Tag Manager

Встроенные переменные – это переменные, которые сразу доступны в интерфейсе GTM. Для того, чтобы начать ими пользоваться, нужно перейти в раздел «Переменные« и нажать «Настроить».

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

Тут же можно найти списки для контейнеров AMP, iOS и Android.

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

Пользовательские переменные в Google Tag Manager

Чтобы добавить пользовательскую переменную, нужно перейти в раздел «Переменные» и кликнуть на «Создать».

Далее необходимо задать тип переменной. По ссылке доступен перечень всех типов пользовательских переменных.

Теги

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

В GTM есть встроенные теги, например, Google Analytics, Google Ads, Bing Ads и другие. Полный перечень всех поддерживаемых тегов доступен по ссылке. Если вам нужно установить тег системы, которой нет в списке поддерживаемых, не беда. Для этого можно использовать пользовательский тег. Далее я разберу установку такого тега на примере Facebook Pixel.

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

Триггеры

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

Как установить Google Analytics с помощью Google Tag Manager

Рассмотрим установку встроенного тега на примере Google Analytics.

Чтобы создать новый тег, нужно перейти на вкладку «Теги» и нажать «Создать».

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

Выбираем тип тега «Google Аналитика – Universal Analytics».

В качестве типа отслеживания указываем «Просмотр страницы».

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

типа «Настройки Google Analytics». В поле «Идентификатор отслеживания» вставляем ID своего ресурса Google Analytics.

Чтобы его скопировать, нужно перейти в аккаунт Google Analytics – «Настройки ресурса».

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

Так как код отправки данных о просмотрах должен срабатывать на всех страницах, в качестве триггера нам подойдет существующий по умолчанию триггер «All Pages».

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

Базовый тег Google Analytics довольно прост в установке. Тут сложно допустить ошибку, но при установке более серьезных отслеживаний перед публикацией стоит проверить корректность работы своего тега с помощью режима отладки.

Режим отладки в Google Tag Manager

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

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

Ярко-оранжевая область свидетельствует о том, что вы вошли в режим отладки.

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

При загрузке страницы сразу же должен сработать тег Google Analytics. На панели отладки он появится в блоке «Tags Fired».

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

• Container Loaded (gtm.js) срабатывает как можно раньше после загрузки страницы.
• Событие DOM Ready (gtm.dom) срабатывает, когда модель DOM готова.
• Window Loaded (gtm.load) срабатывает, когда полностью загрузится первоначальный контент страницы.

После установки кода Google Analytics с помощью Tag Manager также не будет лишним убедиться в поступлении данных при помощи отчетов реального времени в аналитике.

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

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

Разберем установку пользовательского тега на примере Facebook Pixel (пиксель Фейсбука).

Facebook Pixel – это инструмент, с помощью которого можно отслеживать действия пользователей на сайте и передавать эти данные в Facebook для оптимизации рекламы в соцсетях Facebook/Instagram.

Получить код пикселя можно в рекламном аккаунте Facebook, перейдя в «Events Manager».

По клику на «Создать пиксель» откроется окно с фрагментом кода.

Затем в интерфейсе Google Tag Manager нужно создать новый тег типа «Пользовательский HTML».

В текстовое поле вставляем скопированный ранее код пикселя. Так как этот тег должен загружаться при просмотре каждой страницы сайта, в качестве триггера выбираем «Все страницы», так же, как и в случае с базовым тегом Google Analytics.

Проверяем работу тега перед публикацией с помощью отладчика.

Чтобы увидеть поступление данных о просмотрах страниц непосредственно в интерфейсе Facebook, нужно перейти в «Events Manager», раздел «Тестирование событий». В нем, аналогично отчету в режиме реального времени в Google Analytics, появляется информация о посещениях сайта.

Отслеживание взаимодействия пользователей с контентом сайта с помощью Google Tag Manager

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

Рассмотрим, как выполнить такое отслеживание на примерах.

Пример 1. Отслеживание скроллинга страницы.

Создаем новый триггер.

В качестве типа триггера выбираем «Глубина прокрутки».

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

Если отслеживание скроллинга нужно выполнять не на всех страницах, а только на конкретных, выбираем «Некоторые страницы» и задаем условие активации. В первом выпадающем списке выбираем переменную, с помощью которой мы можем идентифицировать нужную страницу/страницы. Если нужная встроенная переменная недоступна, можно прямо отсюда активировать ее.

Во втором выпадающем списке указываем тип соответствия переменной значению.

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

• переменная: Page Path (хранит путь в текущем URL)
• тип соответствия: содержит
• значение: /blog/

При таких настройках триггер сработает при выполнении скроллинга не менее 80 % на всех страницах, URL которых содержит /blog/.

Мы закончили создание триггера. Далее нужно отправить информацию по действию триггера в какую-либо систему. Рассмотрим, как это сделать, на примере Google Analytics.

Создаем новый тег типа «Google Аналитика – Universal Analytics». Так как в этот раз мы отправляем информацию в Google Analytics не просто при просмотре страницы, а при определенном действии пользователя, то в качестве типа отслеживания указываем «Событие».

При отправке событий в Google Analytics нужно задать параметры отслеживания событий. В качестве категории я укажу статическое значение «Scroll 80 %». А в действие могу добавить встроенную переменную Page Path, чтобы иметь возможность в Google Analytics анализировать скроллинг в разрезе страниц.

Обращаю особое внимание читателей на параметр «Не взаимодействие». Он всегда вызывает много вопросов. Если вы хотите, чтобы отправленное событие повлияло на показатель отказов, устанавливаете «False». В ином случае – «True».

В поле «Настройки Google Analytics» добавляем переменную – идентификатор ресурса, которую мы создавали в самом начале.

Выбираем триггер, созданный на предыдущем шаге:

Тестируем настройку, пользуясь отладчиком. Прокрутив страницу до установленной отметки, вы заметите событие Scroll Depth и активировавшийся тег отправки события в GA.

Помимо триггера активации, можно использовать также триггер исключения (или триггер блокировки), который служит для блокировки триггера при определенных условиях. Например, если я хочу, чтобы предыдущий тег срабатывал во всех случаях, кроме страницы «Контакты», я могу создать соответствующий триггер

и добавить его в качестве исключения.

Пример 2. Отправка события в Google Analytics по клику на кнопку.

Создаем новый триггер.

Так как я хочу отследить клик по кнопке, в качестве типа триггера выбираю «Клик» – «Все элементы».

Далее формируем условие активации. По умолчанию установлено «Все клики». Это значит, что триггер будет приводить в действие тег при любом клике на сайте. Мне же нужно отследить конкретный клик, поэтому я выбираю опцию «Некоторые клики». В появившемся меню задаем условие активации.

Тут нам необходимо идентифицировать элемент, по которому мы хотим отследить клик. К примеру, я хочу отследить клик по кнопке «Оставить заявку».

Определить эту кнопку можно с помощью одной из встроенных переменных группы «Клики»: Click ID, Click Classes, Click Text и другие. В моем примере самое простое и быстрое решение – привязаться к тексту кнопки «ОСТАВИТЬ ЗАЯВКУ». То есть триггер будет выглядеть следующим образом:

Сохраняем триггер и создаем новый тег отправки данных в Google Analytics с типом отслеживания «Событие».

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

Какие задачи можно решать посредством GTM

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

Еще несколько популярных задач, которые можно решить с помощью GTM:

• Отслеживание копирования текста на сайте.
• Отслеживание заполнения полей формы и конверсии перехода на каждое поле.
• Отслеживание использования чекбоксов, выпадающих списков и прочих элементов фильтрации.
• Отслеживание ошибок JavaScript на сайте.
• Настройка стандартной и расширенной электронной торговли для интернет-магазинов.
• Настройка динамического ремаркетинга для рекламных систем.
• Проведение A/B-тестирования.
• Размещение баннеров на вашем сайте.

С чего начать самостоятельное изучение Google Tag Manager

Если вы хотите углубиться в возможности GTM, могу дать вам несколько советов:

• Для начала стоит пройти бесплатный курс по основам Google Tag Manager на платформе Google Analytics Academy.
• Изучить справочный центр Google Tag Manager. Это позволит вооружиться необходимой теоретической базой.
• Практиковаться на реальных задачах. Нет лучшего рецепта для освоения нового сервиса, чем пробовать что-то настроить самому.
• Задавать вопросы в сообществе практикующих специалистов.
• Читать блог Simo Ahava. Это лучшее, что есть по GTM, заодно и инглиш подтянете. Если на английском воспринимать новую информацию пока сложно, в Рунете в открытом доступе тоже есть много полезной информации и классных решений от разных аналитиков.

Если хотите овладеть всеми навыками работы с Google Analytics и Яндекс.Метрика, то курс «Веб-аналитика: отслеживание эффективности интернет-рекламы» разработан именно для вас. Полученные знания помогут найти своего покупателя, улучшить воронку конверсии. Курс также будет полезен всем, кто хочет разобраться с аналитикой своего сайта.