Клик по одному элементу в GTM, а данные по другому

Март 24, 2020

В этой статье разберем пример извлечения данных с помощью Google Tag Manager по клику на элемент. В результате мы получим информацию, которую сможем отправить в инструменты веб-аналитики не только об отслеживаемом элементе, но и еще и родительском объекте.

Чтобы лучше понять, о чем идет речь, давайте рассмотрим конкретную задачу. У нас на сайте есть блок с тарифами. Предложения разные, а вот кнопка, по которой можно получить дополнительную информацию об услуге — одна.

Клик по элементу в GTM

Блок с тарифами: кнопка — одна, а предложения — разные

Нам необходимо передать информацию о клике в инструменты веб-аналитики. Но не просто факт клика как событие, а еще и название того блока, по которому был совершен этот клик:

  • Веб-аналитика
  • Контекстная реклама
  • Индивидуально

На выходе мы должны получить:

Клик по элементам в GTM

Результат в Google Analytics

Получается, что мы кликали по кнопке, а в Google Analytics передалась информация по заголовку блока. Как это сделать?

Для наглядности пройдемся по шагам настройки. В самом начале в GTM создадим триггер типа Клик — Все элементы с условием активации Все клики. Это нужно для того, чтобы проверить наш элемент (кнопку). Переходим в режим предварительного просмотра и кликаем по кнопке Весь перечень. Затем выберем наше событие и перейдем на вкладку Data Layer:

Клик по элементам в GTM

Клик по кнопке — Data Layer

На ней отображается информация об отслеживаемом объекте. В Google Tag Manager есть встроенная переменная Click Element, которая возвращает значение для того HTML-элемента, на который кликнул пользователь и который был объектом действия пользовательского события (event — gtm.click или gtm.linkClick). Этот объект извлекается из ключа gtm.element в dataLayer. Нас интересует как раз gtm.element, поскольку мы совершили клик по кнопке Весь перечень.

Теперь перейдем в консоль разработчика (клавиша F12 для Google Chrome). Выберем вкладку Console. Мы можем получить доступ к значениям, которые хранятся в модели данных GTM с помощью метода google_tag_manager. Полная конструкция будет выглядеть так:

, где:

  • GTM-XXXX — идентификатор контейнера Google Tag Manager;
  • keyName — имя переменной.

Эта команда извлекает значение, хранящееся в модели данных GTM для имени переменной keyName .

Для своего примера я использую:

В Console я увижу значение для того элемента, на который я кликнул. В моем примере — это кнопка Весь перечень для блока Индивидуально:

Клик по элементам в GTM

google_tag_manager[‘GTM-KJ6QNBN’].dataLayer.get(‘gtm.element’)

Команда вернула полный тег нашего элемента. Когда мы наводим мышкой на элемент, он подсвечивается на странице. Мы также можем посмотреть в каком месте страницы находится код этого элемента в структуре DOM. Для этого нажмем правой кнопкой мыши на элемент в консоли и выберем Reveal in Elements panel (Показать элемент на вкладке Elements):

Клик по элементам в GTM

Показать элемент на вкладке Elements

Нас перебросило на соответствующую вкладку, на которой подсветился выбранный элемент кнопки.

Клик по элементам в GTM

Выбранный элемент подсвечен

Далее идет важный шаг — нам необходимо подняться наверх по DOM-дереву и добраться до заголовка блока.

Клик по элементам в GTM

Подъем по DOM-дереву до заголовка блока

Мы нашли нужный нам элемент заголовка <h2>Индивидуально</h2> на несколько уровней выше. Возвращаемся назад на вкладку Console. Воспользуемся свойством parentElement. Оно возвращает элемент, который является родителем данного узла. Конструкция выглядит также, только в конце добавляется parentElement через точку:

Вставляем в консоль разработчика и нажимаем Enter. В результате получим родительский узел для элемента, по которому мы кликнули (кнопка Весь перечень):

Клик по элементам в GTM

google_tag_manager[«GTM-KJ6QNBN»].dataLayer.get(«gtm.element»).parentElement

Раскрыв его и кликнув по первой строчке (верхней по иерархии), мы видим как подсвечивается весь блок с тарифом Индивидуально. В эту область попадает и наш заголовок блока. Если бы он не подсветился, нам бы пришлось подниматься на уровень выше, используя parentElement повторно. Но в данном примере этого не требуется, поскольку заголовок попал в область и подсветился.

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

Выделяем элемент <h2>Индивидуально</h2> в консоли и повторяем действие, нажав правой кнопкой мыши и Reveal in Elements panel (Показать элемент на вкладке Elements):

Клик по элементам в GTM

Клик по h2 — Правая кнопка мыши — Reveal in Elements panel

Нас снова перебросило на соответствующую вкладку Elements, на которой подсветился выбранный элемент кнопки. Теперь мы можем составить селектор элемента, и заодно проверить его с помощью CSS Selector Tester. Если необходимо выбрать элемент, вложенный в другой элемент, то используйте конструкцию «элемент элемент». Подробне об этом читайте статью CSS-селекторы в GTM. Часть I. В моем примере — это .pricing-header h2:

Клик по элементам в GTM

Общий селектор для всех заголовков

Данный селектор подходит для всех трех заголовков блока. Об этом свидетельствуют 3 подсвеченные области. Возвращаемся на вкладку консоль и осуществляем проверку с помощью конструкции:

В консоли разработчика мы увидим правильный элемент:

Клик по элементам в GTM

google_tag_manager[«GTM-KJ6QNBN»].dataLayer.get(«gtm.element»).parentElement.querySelector(«.pricing-header h2»)

Все, что осталось сделать, это извлечь текста из последнего элемента. Сделать это можно с помощью свойства innerText:

Клик по элементам в GTM

google_tag_manager[«GTM-KJ6QNBN»].dataLayer.get(«gtm.element»).parentElement.querySelector(«.pricing-header h2»).innerText

Вот мы и получили значение заголовка блока. Необходимо эту конструкцию добавить в Google Tag Manager. Создаем пользовательскую переменную типа Собственный код JavaScript и вставляем код:
В GTM это выглядит так:

Клик по элементам в GTM

Собственный код JavaScript

Теперь осталось создать триггер на отслеживание кнопки по элементу и тег Universal Analytics с типом Событие, где в качестве Категория, Действие или Ярлык можем добавить нашу переменную.

Клик по элементам в GTM

Тег Universal Analytics

Сохраняем настройки. В режиме отладки проверяем корректность передачи данных. Кликнем по другой кнопке, например, по блоку Веб-аналитика:

Клик по элементам в GTM

Активный тег, заголовок блока передается корректно

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

Клик по элементам в GTM

В режиме реального времени

Данные в отчетах Google Analytics будут отображаться в разделе Поведение – События – Лучшие события.

Для тех, кто знает английский язык, я рекомендую посмотреть ролик Джулиана Джуенманна (Julian Juenemann), основателя проекта Measureschool на эту тему:

Решить эту задачу можно и другим способом. Например, используя расширение для браузера GTM datalayer sifter. Подробно о том, как оно работает, читайте в статье Переменные с точечной нотацией в GTM. У автора расширения также есть видео разбора своего инструмента.

Клик по одному элементу в GTM, а данные по другому

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике