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

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

Россия +7 (495) 139-20-33
Шрифт:
0 4806

Статья является адаптированным переводом материала «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 вообще нет.

(Голосов: 8, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Алгоритм продвижения сайта через Pinterest
Виктор Гаврюков
28
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - В самом вверху есть ссылка на мою группу в ВК, там где автор материала. Через группу и свяжитесь со мной_)
Как забрать 5 мест в выдаче из 10. Кейс-эксперимент
Виктор Гаврюков
28
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - такое можно делать и с ВЧ_)
Ссылочный апдейт Google: что изменится для SEO-специалистов в рунете
Тимур
6
комментариев
0
читателей
Полный профиль
Тимур - Понял, спасибо за информацию.
3 основные ошибки, которые допускают владельцы сайтов при продвижении
Виктор Гаврюков
28
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - Не обращай внимания_) Если у тебя хороший ресурс, то ты будешь первоисточником, и все кто своровал, автоматически начнут на тебя ссылаться, точнее, так гугл будет считать_)
Как продвинуть сайт по коммерческим запросам в ТОП-10 с помощью ресурса Reddit
Denis Zar
2
комментария
0
читателей
Полный профиль
Denis Zar - пользовались услугами по продвижению на реддит от reddit-marketing.pro?
Как мы увеличили трафик из Яндекса более чем в 3 раза за неделю на сайте клиники. Кейс
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - У большинства сайтов произошел рост в Гугле в декабре и в марте Яндекса. Ваши шаманства тут не причём :)
Как доработка структуры вывела сайт в ТОП-10 Google и увеличила трафик в 2 раза. Кейс Связной Трэвел
Дмитрий
3
комментария
0
читателей
Полный профиль
Дмитрий - Вероятнее всего было обновление Google и позиции были снижены в связи с низкой скоростью загрузки страниц (так как доработке ведутся не только по SEO, но и в целом по функционалу сайта, появляются новые скрипты). В этот период в Google Search Console увеличилось количество страниц с низкой скоростью загрузки. Мы выявили несколько проблем, которые снижают скорость загрузки страниц и выдали рекомендации по их устранению. Пока данные рекомендации находятся в работе. Также был проведен анализ EAT факторов и проверка сайта на соответствие требованиям Google к YMYL сайта, выданы рекомендации по доработке данных факторов (ждем внедрения наших рекомендаций, поделимся потом результатами).
Как добавить и подтвердить карточки компании в Google Мой бизнес
Кристина
2
комментария
0
читателей
Полный профиль
Кристина - Здравствуйте! Реклама сервиса Google? Кажется, в рекламе не нуждаются :)
Как поступить в ситуации, когда конкурент рекламируется по вашим брендовым запросам. Кейс
Гость
47
комментариев
0
читателей
Полный профиль
Гость - поржал с Тинькофф банк и точка)))
Вечные ссылки: зачем они нужны и где их взять
Павел Павлов
3
комментария
0
читателей
Полный профиль
Павел Павлов - Покупаю только на сапе и те арендованные остальная масса ссылок это крауд ссылки
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
385
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
114
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
92
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
62
Комментариев
60
Комментариев
59

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