Google Tag Manager для googлят: Руководство по управлению тегами

при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick. Таким образом, когда пользователь нажимает на кнопку «Весь перечень», срабатывает событие, которое передает два обязательных условия (Категория event_category и Действие event_action) в Google Analytics, тем самым фиксируя цель.

Но когда Google Analytics установлен через GTM, так отслеживать события уже не получится. И поможет нам в этом уровень данных. Данные о событии мы можем передать сначала в dataLayer, а только оттуда – в Analytics.

Добавляем уровень данных к нашему элементу:

Рис. 311. Добавление dataLayer.push () к элементу

где ‘event’: ‘UAevent’ – пользовательское событие, а eventCategory и eventAction – все те же обязательные условия.

Крайне важно: следите за символами кавычек. Копирование из разных мест (из чужих блогов и сайтов) и кодировок недопустимо.

Рис. 312. Используйте одинаковые кавычки

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

Переходим к настройкам в интерфейсе Google Tag Manager. Нам необходимо создать:

1. две переменных уровня данных (eventCategory и eventAction);

2. триггер «Пользовательское событие» со значением UAevent;

3. тег для передачи данных в Google Analytics с типом отслеживания «Событие» и триггером активации UAevent;

4. цель в Google Analytics типа «Событие» со значениями категорий/действий = click/knopka соответсвенно.

В GTM на основании передаваемых с помощью dataLayer данных можно создавать переменные и триггеры. Создадим их:

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

Рис. 313. Переменная уровня данных

Аналогично создаем вторую переменную уровня данных, только с именем eventAction. Далее создаем триггер типа «Пользовательское событие» с тем именем, которое указали в коде страницы у кнопки. В нашем случае – это UAevent. Вводим название и сохраняем триггер.

Рис. 314. Пользовательское событие

Теперь создаем тег типа «Universal Analytics» с настройками:

● Тип отслеживания – Событие

● Категория – {{eventCategory}}

● Действие – {{eventAction}}

● Идентификатор отслеживания – наш код отслеживания Google Analytics (можно создать переменную типа «Константа» и добавить туда идентификатор UA)

● Триггер активации – Пользовательское событие «Клик по кнопке».

Рис. 315. Настройки тега

На последнем шаге переходим в Google Analytics и создаем цель «Событие» с условиями (те, которые указаны в коде страницы сайта):

● Категория – click

● Действие – knopka

Рис. 316. Настройка события в Google Analytics

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

Рис. 317. Событие UAevent в режиме отладки GTM

А с помощью отчетов «В режиме реального времени»в Google Analytics вы можете убедиться в корректности ее настройки и передачи данных.

Рис. 318. Отладка события в «Режиме реального времени»

Чтобы проверить, что передается в dataLayer, можно воспользоваться консолью в панели инструментов разработчика (в Google Chrome – F12). Вводим dataLayer и нажимаем клавишу «Enter».

Рис. 319. Console – dataLayer – Enter

Как мы уже знаем, Google Tag Manager по умолчанию передает на уровень данных набор значений gtm.js (когда GTM готов к работе), gtm.dom (когда готова модель DOM) и gtm.load (когда окно полностью загружено). Последнее по счету событие UAevent – это наш клик по кнопке.

Использование уровня данных полезно при отслеживании отправки форм, данных по e-commerce, динамического ремаркетинга, функции User ID и других событий на сайте.

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

Рис. 320. Фрагмент кода для передачи данных ecommerce

Подробнее об этом читайте в официальной справке разработчиков.

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

Триггеры

Триггер (от анг. слова trigger в значении спусковой крючок, или приводящий в действие элемент) в GTM – это условие, при котором активируется или блокируется тег. Для запуска тега должен быть хотя бы один триггер. Таким образом, нельзя создать тег без триггера. Триггер может принимать значение «true» (истина), либо «false» (ложь). Он выполняется только в том случае, когда его значение является истинным, и, если выполняются все условия триггера.

А чтобы это определить (true или false), значение переменной сравнивается с тем, которое задано в триггере. Все триггеры в Google Tag Manager связаны с событиями. Также они могут иметь дополнительные условия или фильтры. В старой версии диспетчера тегов Google триггер назывался «правилом».

Существует два способа создания триггеров:

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

Рис. 321. Создание триггера

2. через сам тег в блоке «Триггеры» по нажатию на «+» если в нем уже есть триггеры;

Рис. 322. Создание триггера

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

Рис. 323. Создание триггера

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

● Просмотр страницы;

● Клик;

● Взаимодействие пользователей;

● Другое;

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

Просмотр страницы

Рис. 324. Триггеры «Просмотры страницы»

● Модель DOM готова (DOM Ready) – передается gtm.dom событие, как только браузер загрузил объектную модель документа;

● Окно загружено (Window Loaded) – передается gtm.load событие после завершения загрузки всей страницы, когда окно полностью загружено;

● Просмотр страницы (Page View) – передается gtm.js событие, когда контейнер GTM готов к работе.

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

Рис. 325. Предварительный просмотр

Перейдя на сайт в режиме отладки, вы увидите:

Рис. 326. Режим отладки – три события

Выбрав событие, например, Window Loaded, и перейдя на вкладку «Variables» (Переменные), можно просмотреть зафиксированное пользовательское событие (переменная _event) и его значение (value – в нашем примере gtm.load):

Рис. 327. Пользовательское событие

или у переменной «Пользовательское событие»:

Рис. 328. Переменная «Пользовательское событие»

Клик

Тип триггера фиксирует клики по ссылкам или любым кликабельным элементам сайта.

Рис. 329. Триггеры «Клики»

● Все элементы – передается gtm.click событие когда на странице щелкнут любой элемент;

● Только ссылки – передается gtm.linkClick событие при нажатии на тег <a> элемента HTML.

Например, создадим триггер на «Все элементы» с условием активации триггера «Все клики».

Рис. 330. Тип триггера –