Google Tag Manager

Учимся работать в Google Tag Manager

Что такое Google Tag Manager (GTM) и для каких целей его можно использовать

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

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

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

На текущий момент помимо существующей и уже привычной Google Universal Analytics в использование активно входит Google Analytics 4. Стандарт Google Analytics 4 представляет собой новую версию Google Analytics, основанную на типе ресурса App+Web. Новый подход позволяет отслеживать действия пользователей на сайте и в приложении согласно единой логике сбора данных и анализировать эту информацию в едином интерфейсе. Инструкцию, как настроить Google Analytics 4 с помощью Google Tag Manager, я выделила в отдельную статью

Так как на сегодняшний день Google Analytics 4 еще не готова в полной мере заменить Universal Analytics (не все функции доступны, инструментарий постепенно только появляется в аккаунтах), то пока не стоит отказываться от старого стандарта аналитики. Лучше собирать данные в оба ресурса параллельно. Рассмотрим, как настроить Universal Analytics, используя GTM. 

Создаем новый тег. Можно сделать это на странице «Обзор»

Новый тег GTM

или на вкладке «Теги».

Вкладка Теги

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

Тег Google Аналитика

Тип отслеживания – «Просмотр страницы».

Тип отслеживания

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

Создание новой переменной

В поле «Идентификатор отслеживания» указываем ID ресурса аналитики.

Идентификатор отслеживания

Как найти ID ресурса Google Analytics:

ID ресурса

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

Триггеры

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

Триггер All Pages

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

Новая версия GTM

Очень удобно и полезно тестировать изменения перед публикацией с помощью инструмента предварительного просмотра и отладки. Эта функция в GTM позволяет проверить свои настройки до публикации на сайте и удостовериться, что ваше отслеживание настроено корректно и не провоцирует ошибок. Новая версия предварительного просмотра плотно интегрирована с расширением для браузера Tag Assistant (by Google), поэтому стоит сразу установить его. 

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

Режим предпросмотра

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

Режим отладки

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

Основные части отладчика

Область 1 (меню слева) показывает информацию о страницах сайта и зарегистрированных событиях в хронологическом порядке. При загрузке страницы тут будет список событий, которые GTM отправляет по умолчанию:

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

В области 2 (Tags Fired) представлены теги, которые активированы на данной странице. Соответственно, в области 3 (Tags Not Fired) – теги, которые пока не активированы. Как только тег будет активирован действием на сайте, он переместится из этого раздела во второй. 

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

Блок Переменные

При загрузке страницы в отладчике видим, как сработал созданный нами тег Google Analytics.

Проверка нового тега

Если при проверке в отладчике вы убедились, что все работает правильно, можно публиковать новую версию. 

Проверяем данные в Google Analytics, отчет «Режим реального времени».

Режим реального времени

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

В Google Tag Manager есть встроенные теги, например, Google Ads, Google Optimize, и другие. Если необходимо добавить на сайт код системы, которой нет по умолчанию (например, Facebook Pixel), то можно это сделать с помощью пользовательского тега. 

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

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

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

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

Пример 1. Отслеживание времени, проведенного на странице

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

1. Добавляем триггер типа «Таймер».

Триггер Таймер

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

Настройки таймера

2. Создаем новый тег типа «Google Analytics».

Новый тег типа Google Analytics

Тип отслеживания – событие. Указываем параметры события (»Категория», «Действие», «Ярлык», «Значение»).

Параметры события

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

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

Поле Не взаимодействие

Условием активации выбираем созданный на предыдущем шаге триггер «Таймер».

Условие активации

Тестируем в режиме предварительного просмотра. Открыв страницу и подождав 30 секунд, вы заметите событие Timer и активацию тега отправки события в GA.

Тест в режиме реального времени

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

Триггер исключения

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

Добавление исключения

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

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

Создание нового триггера

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

Тип триггера Клик - Все элементы

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

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

Отслеживание кнопки Оставить заявку

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

Настройка триггера

В случае, когда необходимо настроить отслеживание клика по какому-либо элементу на веб-странице, а у этого элемента нет идентифицирующих его атрибутов (например, ID, class или URL), задачу отслеживания можно решить с помощью селекторов CSS.

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

Конфигурация тега

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

Проверка события в режиме отладки

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

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

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