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

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

Россия +7 (495) 139-20-33
Шрифт:
1 7026
Подпишитесь на нас в 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 вообще нет.

Друзья, теперь вы можете поддержать SEOnews https://pay.cloudtips.ru/p/8828f772
Ваши донаты помогут нам развивать издание и дальше радовать вас полезным контентом.
Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Олег Рассказов
    1
    комментарий
    0
    читателей
    Олег Рассказов
    6 месяцев назад
    Руслан, спасибо за статью! Иногда думаешь, что ты уже бог GTM. А потом попадается такая статья и думаешь: "Нееее, не бог... так, пока только полубог"))) еще раз спасибо за расширение горизонтов
    -
    1
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Продуктовый подход в SEO: новая эпоха поисковой оптимизации
Борис
1
комментарий
0
читателей
Полный профиль
Борис - Почитал и спич очень близок к тому, что гугловоды говорят у себя на курсере. К комменту ниже: инклюзивность, доступность - это часть маркетинга и seo становится. Удивился даже, что в снг о таком слышали)))))
Альманах фатальных ошибок b2b-сайта: как владельцы бизнеса обрекают сайты на бесславное существование. Часть первая
Сергей Ерофеев
3
комментария
0
читателей
Полный профиль
Сергей Ерофеев - Спасибо за комментарий! Вы правы, если за CMS следит заинтересованный профессионал - риски минимальны. Но мы же с вами понимаем, что: а) Не каждый разработчик делает все, как "для себя". б) После создания сайта разработчик редко остается на проекте в) Часто разработчик не является маркетологом. В этом случае принцип "функционал работает и этого достаточно" может быть на первом месте. Мы тоже видели большое количество хороших и качественных проектов на бесплатных CMS, но проблемных проектов мы видели сильно больше. Просто статистика.
Почему сайтам нужно переезжать с конструкторов на полноценные CMS
Seodm.ru
3
комментария
0
читателей
Полный профиль
Seodm.ru - Ааа по мне, сам seo специалист, вероятность внедрения необходимого контента на тильда того же блока этапом работы или преимуществ, намного выше чем на движке. А что тильда что движок малый бизнес норм продвигается особо супер разработки не требуется
Белые и серые методы продвижения. Тренды 2023
sarges
2
комментария
0
читателей
Полный профиль
sarges - Нужно учитывать и тот факт, что со временем методы продвижения меняются и необходимо подстраиваться под новые реалии. Посоветую заглянуть на zenlink.ru/blog/kak-izmenilsja-internet-marketing-za-10-let и почитать статью, там рассказывается о том, как изменился интернет-маркетинг за последние 10 лет, какие сейчас тенденции и какие прогнозы в этой сфере.
Почему не стоит отказываться от SEO на этапе разработки
Максимус
3
комментария
0
читателей
Полный профиль
Максимус - Я уже сделал и сегодня в первый класс отвёл!
Как автоматизировать мессенджеры для бизнеса в CRM-системе
Алиналина
1
комментарий
0
читателей
Полный профиль
Алиналина - Кстати да. Но мы зарегались, CRMка реально интересная
Как мы увеличили для клиента трафик из поиска в 7 раз. Кейс
Кирилл Половников
2
комментария
0
читателей
Полный профиль
Кирилл Половников - Оба этих статуса (редирект и малополезная) преобладали в качестве проблем с индексацией. Помогла работа с .htaccess (в нем были ошибки и его чистили), работа над корректировкой редиректов, каноникалами и прочими техническими ошибками. Нельзя сказать, что только редиректы были ключевым препятствием.
Как показывать рекламу посетителям сайтов конкурентов
Павел
2
комментария
0
читателей
Полный профиль
Павел - Спасибо за комментарий. Гипотеза была в том, что с указанными счетчиками конкурентов показы будут не просто похожей аудитории их сайтов (как при рекламе по доменам), а именно на аудиторию которую Яндекс для себя разметил как целевая дл сайтов конкурентов. Важно, это гипотеза. А про белые нитки, как говорится, доверяй, но проверяй))
Как монетизировать трафик с помощью push-подписок
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - Полностью согласен! Сейчас прикрыли регистрацию без активации ака, активация только через менеджера, но это говорит лишь о том что качество должно быть выше. Сотрудничаю, плюсую!
Кейс MediaNation: увеличили еженедельный трафик автомобильной компании на 50% за год и вышли в топ поиска по 300 запросам
Игорь Скляр
1
комментарий
0
читателей
Полный профиль
Игорь Скляр - Действительно, изначально рост был именно по информационным запросам. Но рост позиций и трафика по информационным запросам положительно повлиял и на связанные позиции по коммерческим запросам и сдвинул видимость с мёртвой точки
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
385
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
115
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
63
Комментариев
60
Комментариев
59

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