Настройка отслеживания кликов с передачей данных другого связанного элемента с помощью GTM

 

Такая задача возникает в тех случаях, когда необходимо отследить клик по элементу, не содержащему необходимых данных о событии. Это могут быть кнопки или ссылки типа «Читать дальше», «Подробнее», «Купить», «Заказать» и т.п.

В Google Tag Manager такая задача решается при помощи переменной типа Пользовательский JavaScript, с помощью которой можно передать данные об элементе, связанным по логике с другим элементом. Рассмотрим решение этой задачи.

Перед тем, как начать все действия, код Google Tag Manager должен быть в исходном коде. Если он уже имеется, идём дальше.

На примере этого сайта рассмотрим клик по кнопке ПОДРОБНЕЕ в статье и настроим отслеживание названия статьи при клике.

В Менеджере тегов Google включаем режим Предварительный просмотр, находим в анонсах любую статью и кликаем по ней с удержанием кнопки Shift для того, чтобы окно не закрылось и событие клика зафиксировалось в окне отладки.

Как видно из скриншота, кроме ссылки и класса, никакой полезной информации этот клик не показал.

Теперь в Google Chrome открываем Дополнительные инструменты — Инструменты разработчика и переходим на вкладку Console.

Запускаем команду

google_tag_manager["GTM-XXXXXXX"].dataLayer.get('gtm.element').parentElement

где GTM-XXXXXXX — это id Менеджера тегов Google

таким образом мы попадаем в HTML-код родительского элемента

Теперь поднимемся ещё на один уровень вверх и увидим весь исходный код страницы с помощью команды

google_tag_manager["GTM-XXXXXXX"].dataLayer.get('gtm.element').parentElement.parentElement

таким образом мы видим весь HTML-код страницы

Теперь мы можем вытащить заголовок нужной нам статьи с помощью селектора при помощи команды

 

google_tag_manager["GTM-XXXXXXX"].dataLayer.get('gtm.element').parentElement.parentElement.querySelector("div > header > h2").innerText

CSS-селектор будет у каждого свой, это зависит от вёрстки шаблона сайта. Также и количество команд parentElement для того, чтобы подниматься на уровень вверх по HTML-коду.

Теперь переходим в Google Tag Manager в Переменные и создадим Пользовательскую переменную с именем Related Link и выберем тип Собственный код JavaScript

Вставим следующий код:

function() {
	return google_tag_manager["GTM-XXXXXXX"].dataLayer.get('gtm.element').parentElement.parentElement.querySelector("div > header > h2").innerText
}

После этого переходим в Триггеры и создадим триггер с именем Click — More Link и выберем тип триггера Только ссылки

В условиях активации выбираем Некоторые клики по ссылкам и зададим условие

Click Classesравноmore-link

так как в нашем случае ссылка имеет класс more-link

Затем переходим в Теги и создадим тег GA — Click — More Link и выберем тип тега Google Аналитика — Universal Analytics

Зададим следующие параметры:

  • Тип отслеживания — Событие
  • Категория — More Link
  • Действие — Click — More Link
  • Ярлык — More Link — {{Related Link}}
  • Настройки Google Analytics — {{Google Analytics}}

и выберем триггер активации Click — More Link

Сохраняем и публикуем контейнер.

Проверяем.

Переходим в интерфейс Google Аналитики в Отчёты реального времени и при нажатии на кнопку ПОДРОБНЕЕ увидим наше событие.

Источник: видеоурок Джулиена Джунеманна, MeasureSchool

Поделиться ссылкой:

 

Читайте также