Настройка отслеживания событий в новом интерфейсе Google Tag Manager при помощи DataLayer

A A A

Совсем недавно Google изменил интерфейс одного из самых популярных своих инструментов — Google Tag Manager, которого в народе называют просто GTM.

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

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

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

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

В первую очередь нам потребуется довольно простое техническое задание, в котором мы пропишем имена параметров уровня данных, которые будем передавать в Google Analytics, а также код отслеживания события для передачи события в Метрику, которую мы также используем в своей работе.

Вот пример фрагмента ТЗ для данного случая:

  1. Кнопка «Обратный звонок»

  2.  Кнопка «Отправить»

Обратите внимание! Когда даете имена переменным уровня данных (‘eventCategory’, ‘eventAction’ и ‘eventLabel’), старайтесь делать это так, чтобы вы потом в отчетах Analytics понимали, какое именно событие передалось.

Эти же имена переменных мы затем пропишем в настройках целей Analytics и Метрики.

Программист благополучно выполнил ваше ТЗ? Теперь вы можете приступать к настройкам событий в GTM.

Сначала необходимо задать несколько пользовательских переменных. В аккаунте GTM переходим на вкладку ‘Workspace’ -> ‘Variables’ (‘Рабочая область’ -> ‘Переменные’):

Создание пользовательской переменной в новом интерфейсе GTM

Внизу вкладки находим ‘User-Defined Variables’ (‘Пользовательские переменные’):

Новая пользовательская переменная в GTM

Затем указываем необходимые параметры:

Создание пользовательской переменной в новом интерфейсе GTM

Выбираем необходимый тип переменной:

Создание пользовательской переменной в новом интерфейсе GTM

Сохраняем результат:

Сохранение пользовательской переменной в новом интерфейсе GTM

Аналогично задаем переменные ‘eventAction’ и ‘eventLabel’. На этой же вкладке вносим пользовательское событие ‘UAevent’:

Создание пользовательской переменной в новом интерфейсе GTM

Обратите внимание! Здесь же можно задать константу «UA ID’. Это очень удобно, когда впоследствии необходимо создать много тегов, в которых необходимо указывать идентификатор Universal Analytics.

Создание пользовательской переменной в новом интерфейсе GTM

Теперь, при создании тегов просто следует выбрать эту константу:

Выбор пользовательской переменной в новом интерфейсе GTM

 

Выбор пользовательской переменной в новом интерфейсе GTM

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

Возвращаемся на вкладку ‘Workspace’ -> ‘Triggers’ (‘Рабочая область’ -> ‘Триггеры’):

Создание нового триггера в новом интерфейсе GTM

Создание нового триггера в новом интерфейсе GTM

Теперь создаем тег отслеживания наших событий. Возвращаемся на вкладку ‘Workspace’ -> ‘Tags’ (‘Рабочая область’ -> ‘Теги’):

Создание нового тега в новом интерфейсе Google Tag Manager

Указываем название тега, в соответствующих полях выбираем переменные уровня данных:

Создание нового тега в новом интерфейсе Google Tag Manager

Создание нового тега в новом интерфейсе Google Tag Manager

В данном случае — это триггер, который мы подготовили на предыдущем этапе:

Конфигурация триггера в новом интерфейсе GTM

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

Переходим в рабочее представление Google Analytics на вкладку «Цели»:

Создание новой цели в новом интерфейсе GTM

А вот здесь очень важно не допустить ошибки. При указании условий событий необходимо вводить именно те имена, которые указаны в ТЗ:

Создание новой цели в новом интерфейсе GTM

Для отслеживания второго события из нашего ТЗ создаем аналогичное событие, только вводим его имена переменных:

Создание новой цели в новом интерфейсе GTM

После публикации контейнера GTM проверьте правильно ли отрабатывают события в отчете ‘В режиме реального времени’ -> ‘События’, ‘Конверсии’.

Для настройки цели в Метрике необходимо выбрать раздел ‘Настройки’ -> ‘Цели’ -> ‘Добавить цель’:

Выбор цели в Яндекс.Метрике

Добавляем конверсионную цель:

Выбор цели в Яндекс.Метрике

Конверсии будут отражены в соответствующем отчете на вкладке «Стандартные отчеты».

Вот теперь всё!

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

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

Если вы нашли ошибку, выделите участок текста и нажмите Ctrl + Enter или , чтобы сообщить нам.