×
Россия +7 (495) 139-20-33

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

Россия +7 (495) 139-20-33
Шрифт:
1 8598
Подпишитесь на нас в Telegram

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

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

GTM

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

Например:

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

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

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

Переменная в GTM

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

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

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

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

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

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

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

Код

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

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

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

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

Переменная в GTM

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

Тип переменной

  1. Атрибут элемента (Element Attribute) – возвращает значение задаваемого атрибута.
  • Например: если указан атрибут HREF, то при клике в переменную попадет URL-значение ссылки.
  1. Идентификатор элемента (Element ID) – возвращает значение атрибута ID.
  • На уровне данных хранится в ключе gtm.elementId.
  • Примечание: соответствует встроенным переменным Click ID и Form ID.
  1. Источник изменения истории (History Change Source) – возвращает название события, которое вызвало изменение в истории (popstate, pushState, replaceState, polling).
  • На уровне данных хранится в ключе gtm.historyChangeSource.
  • Примечание: соответствует встроенной переменной History Source.
  1. Классы элемента (Element Classes) – возвращает значение атрибута class.
  • На уровне данных хранится в ключе gtm.elementClasses.
  • Примечание: соответствует встроенным переменным Click Class and Form Class.
  1. Новый статус истории (History New State) – возвращает новый объект состояния истории.
  • На уровне данных хранится в ключе gtm.newHistoryState.
  • Примечание: соответствует встроенной переменной New History State.
  1. Новый фрагмент URL истории (History New URL Fragment) – возвращает новый фрагмент URL из истории браузера.
  • Фрагмент URL – часть URL-адреса, идущая после знака хеша (#). Например, фрагмент для URL site.ru/#hello будет #hello.
  • Применяется в сайтах, разработанных на технологии SPA.
  • На уровне данных хранится в ключе gtm.newUrlFragment.
  • Примечание: соответствует встроенной переменной New History Fragment.
  1. Старый статус истории (History Old State) – возвращает старый объект состояния истории.
  • На уровне данных хранится в ключе gtm.oldHistoryState.
  • Примечание: соответствует встроенной переменной Old History State.
  1. Старый фрагмент URL истории (History Old URL Fragment) – возвращает старый фрагмент URL из истории браузера.
  • На уровне данных хранится в ключе gtm.oldUrlFragment.
  • Примечание: соответствует встроенной переменной Old History Fragment.
  1. Текст элемента (Element Text) – возвращает значение любого текстового свойства (textContent или innerText).
  • Примечание: соответствует встроенным переменным Click Text и Form Text.
  1. Тип элемента (Element Type) – возвращает HTML-тег элемента (element.tagName) с которым взаимодействовал пользователь.
  • Например: A (если это была ссылка), IMG (если это изображение).
  1. Цель элемента (Element Target) – возвращает значение атрибута target (например ‘_blank’).
  • На уровне данных хранится в ключе gtm.elementTarget.
  • Примечание: соответствует встроенным переменным Click Target и Form Target.
  1. Элемент (Element) – возвращает DOM-элемент.
  • Можно использовать как объект для переменной «Собственный код JavaScript”», например {{Element}}.title.
  • Или можно использовать в CSS-селекторах, например {{Element}} соответствует селектору CSS div.foo.
  • На уровне данных хранится в ключе gtm.element.
  • Примечание: соответствует встроенным переменным Click Element и Form Element.
  1. 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.

Переменная GTM

Шаг 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 вообще нет.

Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Олег Рассказов
    1
    комментарий
    0
    читателей
    Олег Рассказов
    больше года назад
    Руслан, спасибо за статью! Иногда думаешь, что ты уже бог GTM. А потом попадается такая статья и думаешь: "Нееее, не бог... так, пока только полубог"))) еще раз спасибо за расширение горизонтов
    -
    1
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Накрутка поведенческих факторов: дорого, сложно, но можно. Если очень хочется
Oleg_bobr2012
1
комментарий
0
читателей
Полный профиль
Oleg_bobr2012 - Мда...Может Анне сразу в Яндекс написать кейсы по накрутке ПФ. Я бы такого сотрудника гнал вон.
28 способов повысить конверсию интернет-магазина
Татьяна
1
комментарий
0
читателей
Полный профиль
Татьяна - Очень действенные рекомендации представлены в статье! Всё четко расписано и легко внедряемо в работу интернет-магазинов.Удобство и наглядность+различные бонусы и скидки-именно то, что и цепляет покупателя.
7 актуальных сервисов для анализа сайта: сравнительная характеристика
Jenimeon
1
комментарий
0
читателей
Полный профиль
Jenimeon - SimilarWeb один из моих фаворитов, частенько им пользуюсь. Ценник не малый, но функционал хороший. Be1 тоже годный.
Какие сайты лидировали в поиске Яндекса и Google в 2023 году
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Если что по рейтингу вы не правы, есть ядро по которому производиться оценка и вы можете по нему самостоятельно все посмотреть. Единственный объективный рейтинг по SEO. Других не знаю Ну я вам скажу что это не так и в предыдущие года сайт моего клиента попадал в рейтинг, при чем несколько раз. И я прекрасно знал еще до объявления результатов кто лидер - рейтинг прозрачный, есть фразы по которым набираются баллы. В этом году наш сайт не попал в рейтинг например и это было понятно, что не попадет (по статистике позиций)
Создали ресурс для металлургов, который позволяет следить за аналитикой рынка и осуществлять продажи
Наталья Сталь
3
комментария
0
читателей
Полный профиль
Наталья Сталь -
5 способов увидеть сайт глазами поисковика: анализируем скрытый контент и cloaking
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Сейчас клоаку прячут, так что под нее можно глянуть только с гуггловских ip. Сейчас только гуггл сервисами можно глянуть
Число доменов в зоне .ru достигло рекордных показателей с 2017 года
Валерия Власова
3
комментария
0
читателей
Полный профиль
Валерия Власова - Благодарим за внимательность, в зоне .рф зарегистрировано 762 тыс. доменов.
Как легко определять спрос на продукцию. Проводим мини-исследование, привлекая ChatGPT
Гость
1
комментарий
0
читателей
Полный профиль
Гость - норм статья, надо юзать и не бояться
Какие методы SEO-продвижения устарели в 2024 году
Эксперт
1
комментарий
0
читателей
Полный профиль
Эксперт - Ужасная вода. А начало "обзора" со слов - мне кажется - нечто.
Насколько вечные – вечные ссылки?
daniilastaaahov
1
комментарий
0
читателей
Полный профиль
daniilastaaahov - Я где-то пару месяцев назад заказывал размещение вечных ссылок, до сих пор рабочие, не удалены. Буду надеется что и дальше с ними ничего не произойдёт.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
386
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
120
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!