Разбираемся с переменной автоматического события в Google Tag Manager на примерах

Статья является адаптированным переводом материала «Auto-Event Variable In GTM: Upgrade Your Web Analytics With 2 Simple But Powerful Examples» из блога Analytics Mania.

Что такое переменная автоматического события

Переменная автоматического события используется для доступа к элементу взаимодействия автоматического события (click, error, form submit и т.п.).

Например:

• При нажатии на изображение вы можете получить доступ к URL-адресу изображения или ссылке, на которую ведет изображение.
• Когда вы отправляете форму, вы можете получить доступ к идентификатору формы.
• И так далее.

В GTM уже есть отдельные встроенные переменные для каждого элемента (click id, text form и т.п.). На самом деле, все такие переменные и являются переменными автоматического события (большинство встроенных переменных хранится в виде переменных уровня данных, Симо Ахава (Simo Ahava) описал подробно это в своем гайде по переменным).

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

Для чего нужна переменная автоматического события?

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

Как это сделать?

Первое, что приходит в голову – использовать триггер Click All. Хорошее решение! Но что, если все 3 изображения имеют один и тот же CSS-класс и не имеют ID? Задача становится несколько сложнее – нельзя просто так взять и определить, на какое изображение кликнул пользователь.

Какой следующий шаг можно предпринять?

Исследуем элемент через дебаггер браузера (доступен во всех современных браузерах по нажатию на клавишу F12 или при нажатии на правую кнопку мыши и выборе пункта «Просмотреть код»).

Остается найти нужный элемент в коде (для этого можно воспользоваться функцией инспектора элементов).

Как говорилось выше, у этого элемента нет ни ID, ни CSS-классов. Зато есть пара других атрибутов – alt и data-video-id. Их-то и можно использовать в переменной автоматического события, используя их значения в качестве триггера или для передачи в содержимое тега.

Разбираемся в настройках переменной автоматического события

Чтобы создать переменную автоматического события:

1. Перейдите в раздел переменных.
2. Спуститесь к блоку «Пользовательские переменные» и нажмите кнопку «Создать».
3. В открывшемся модальном окне выберите «Переменная автоматического события» в разделе «Элементы страницы».

На выбор есть 13 типов переменных автоматического события:

1. Атрибут элемента (Element Attribute) – возвращает значение задаваемого атрибута.

• Например: если указан атрибут HREF, то при клике в переменную попадет URL-значение ссылки.

2. Идентификатор элемента (Element ID) – возвращает значение атрибута ID.

• На уровне данных хранится в ключе gtm.elementId.
• Примечание: соответствует встроенным переменным Click ID и Form ID.

3. Источник изменения истории (History Change Source) – возвращает название события, которое вызвало изменение в истории (popstate, pushState, replaceState, polling).

• На уровне данных хранится в ключе gtm.historyChangeSource.
• Примечание: соответствует встроенной переменной History Source.

4. Классы элемента (Element Classes) – возвращает значение атрибута class.

• На уровне данных хранится в ключе gtm.elementClasses.
• Примечание: соответствует встроенным переменным Click Class and Form Class.

5. Новый статус истории (History New State) – возвращает новый объект состояния истории.

• На уровне данных хранится в ключе gtm.newHistoryState.
• Примечание: соответствует встроенной переменной New History State.

6. Новый фрагмент URL истории (History New URL Fragment) – возвращает новый фрагмент URL из истории браузера.

• Фрагмент URL – часть URL-адреса, идущая после знака хеша (#). Например, фрагмент для URL site.ru/#hello будет #hello.
• Применяется в сайтах, разработанных на технологии SPA.
• На уровне данных хранится в ключе gtm.newUrlFragment.
• Примечание: соответствует встроенной переменной New History Fragment.

7. Старый статус истории (History Old State) – возвращает старый объект состояния истории.

• На уровне данных хранится в ключе gtm.oldHistoryState.
• Примечание: соответствует встроенной переменной Old History State.

8. Старый фрагмент URL истории (History Old URL Fragment) – возвращает старый фрагмент URL из истории браузера.

• На уровне данных хранится в ключе gtm.oldUrlFragment.
• Примечание: соответствует встроенной переменной Old History Fragment.

9. Текст элемента (Element Text) – возвращает значение любого текстового свойства (textContent или innerText).

• Примечание: соответствует встроенным переменным Click Text и Form Text.

10. Тип элемента (Element Type) – возвращает HTML-тег элемента (element.tagName) с которым взаимодействовал пользователь.

• Например: A (если это была ссылка), IMG (если это изображение).

11. Цель элемента (Element Target) – возвращает значение атрибута target (например ‘_blank’).

• На уровне данных хранится в ключе gtm.elementTarget.
• Примечание: соответствует встроенным переменным Click Target и Form Target.

12. Элемент (Element) – возвращает DOM-элемент.

• Можно использовать как объект для переменной «Собственный код JavaScript”», например {{Element}}.title.
• Или можно использовать в CSS-селекторах, например {{Element}} соответствует селектору CSS div.foo.
• На уровне данных хранится в ключе gtm.element.
• Примечание: соответствует встроенным переменным Click Element и Form Element.

13. URL элемента (Element URL) – возвращает значение URL-ссылки, полученной из атрибута href или action.

• На уровне данных хранится в ключе gtm.elementUrl.
• Примечание: соответствует встроенным переменным Click URL и Form URL.

Пример применения переменной автоматического события в теге

Автор данной статьи Julius Fedorovicius раньше работал в стартапе Omnisend. Компания предлагала решения для email-маркетинга, которые легко интегрировались с популярными платформами электронной коммерции (Shopify, Bigcommerce и т.д.). На старой версии сайта компании были места с логотипами платформ электронной коммерции. Некоторые логотипы перенаправляли в магазины приложений (из которых посетители могли установить Omnisend), другие – перенаправляли пользователей на форму регистрации и так далее.

Автору стало интересно, какие платформы наиболее популярны среди посетителей сайта. К счастью, каждый логотип содержал атрибут с названием поставщика – data-platform.

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

1. Создана переменная автоматического события в GTM.
2. Настроен триггер клика (Только ссылки), который срабатывает только при нажатии на любой из логотипов.
3. Создан тег события Google Analytics, который отправлял данные GA.

Шаг 1. Создаем переменную автоматического события в GTM

Настройки переменной:

• Тип – переменная автоматического события (Auto-Event Variable).
• Название – aev – data-platform.
• Тип переменной – Атрибут элемента (Element Attribute).
• Название атрибута – data-platform.

Шаг 2. Настраиваем триггер на клики

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

• Тип – Клик – Только ссылки.
• Название – Click – Clicked Platform Logo.
• Условия активации триггера – Некоторые клики по ссылкам.
• Click classes содержит section-platform

                  ○ все логотипы платформ используют CSS-класс section-platform.

Шаг 3. Создаем тег события Google Analytics

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

• Тип – Google Аналитика: Universal Analytics.
• Название – GA Event – Clicked Platform Logo.
• Тип отслеживания – Событие.
• Категория – Click.
• Действие – Platform logo.
• Ярлык – {{aev – data-platform}}.

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

Пример применения переменной автоматического события в триггере

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

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

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

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

Интересовали только те изображения, которые являются частью сообщений в блоге, а не все изображения, которые есть на всей странице. После проверки было замечено, что все изображения содержимого содержали ссылки с атрибутом rel=”lightbox-5″ или rel=”lightbox-6″ и т.д. Число представляет идентификатор изображения.

Лучший способ отслеживать клики по этим изображениям – это создать переменную автоматического события rel и использовать ее в триггере клика по ссылке.

Шаг 1. Создаем переменную

• Тип – переменная автоматического события (Auto-Event Variable).
• Название – aev – rel.
• Тип переменной – Атрибут элемента (Element Attribute).
• Название атрибута – rel.

Шаг 2. Настраиваем триггер

• Тип – Клик – Только ссылки.
• Название – Click – Image In Blog Post.
• Условия активации триггера – Некоторые клики по ссылкам.
• aev – rel содержит lightbox

                   ○ aev – rel – это переменная из первого шага.

Шаг 3. Создаем тег события

• Тип – Google Аналитика: Universal Analytics.
• Тип отслеживания – Событие.
• Категория – Click.
• Действие – Image in blog post.
• Ярлык – {{Page Path}}.

Результат

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

Показатель отказов снизился почти на 5 процентов, а среднее время за сеанс увеличилось на 15 секунд. Конечно, долгосрочная цель всегда состоит в том, чтобы увеличить количество страниц за сеанс, но более точные показатели были хорошим началом.

Заключение

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

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