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

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

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

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

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

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

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

Для наглядности пройдемся по шагам настройки. В самом начале в 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 я увижу значение для того элемента, на который я кликнул. В моем примере - это кнопка Весь перечень для блока Индивидуально:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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