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

Данная статья описывает работу с CSS-селектором на JavaScript с помощью GTM – аналогично работы переменной Элемент DOM. С помощью селекторов можно отследить клики по ссылкам или элементам, находящимся в определённом блоке и не имеющим класса или идентификатора.

Ранее была опубликована статья про клики по элементам. Для отслеживания там использовался класс элемента. В этой статье рассмотрим реализацию подобной задачи другим способом – с использованием CSS-селектора.

В первую очередь необходимо внедрить GTM в исходный код сайта, если его там ещё нет. Если есть, переходим к настройке.

На этом сайте есть блок Записи из этой рубрики, состоящие из заголовков. Их как раз и будем отслеживать.

Исследуем сначала код

Из скриншота видим, что ссылка имеет класс post-title, однако этот класс могут иметь элементы и в других блоках. Например, последние (или свежие) статьи и пр.

Есть класс у тега списка li, который называется same-category-post-item. Но его мы тоже пропустим, этот способ был уже описан.

Скопируем CSS-селектор. Получится вот так:

#same-category-posts-2 > ul > li:nth-child(1) > a

Уберём из тега li nth-child(1), так как он позволит отслеживать только первый пункт из предлагаемого списка.

Получится у нас следующее:

same-category-posts-2 > ul > li > a

Теперь переходим в ГТМ в Теги и создадим там тег типа Пользовательский HTML, назовём его Click – Same Category Posts и впишем туда скрипт

<script>
var elements = document.querySelectorAll('#same-category-posts-2 > ul > li > a');
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("click", function(){
   dataLayer.push({"event": "click_scp"});
});
}
</script>

и привяжем триггер All Pages – Просмотр страницы.

После этого переходим в Триггеры и создадим там триггер типа Пользовательское событие, назовём его Same Category Posts – Click и в поле Имя события впишем click_scp. В условиях активации оставляем Все специальные события

Теперь создадим тег для передачи события в Google Analytics. Для этого возвращаемся в Теги и создадим там тег типа Google Аналитика – Universal Analytics и зададим ему следующие параметры:

  • Тип отслеживания: Событие
  • Категория: Same Category Posts
  • Действие: Click
  • Ярлык: {{Page Path}}
  • Настройки Google Analytics: {{Google Analytics}}

и привяжем к нему триггер Same Category Posts – Click

Затем создадим тег типа Пользовательский HTML для передачи цели в Яндекс Метрику. Впишем в него:

<script>
  yaCounterXXXXXXXX.reachGoal('same-category-posts');
</script>

где XXXXXXXX – это id счётчика Метрики

и привяжем к нему триггер Same Category Posts – Click

Сохраняем и отправляем изменения.

После этого переходим в Яндекс Метрику в Настройки – Цели, и жмём кнопку Добавить цель. Задаём название: Переход на пост той же категории, тип условия: JavaScript-событие и идентификатор цели: same-category-posts. Далее жмём кнопку Добавить цель

После этого цель появится в списке

и можно ждать сбора статистических данных по этой цели. Для этого переходим в Отчёты – Стандартные отчёты – Конверсии

В Google Analytics в Отчёты – Поведение – События – Лучшие события и находим там категорию событий Same Category Posts

В Google Аналитике также можно создать цели на основе этих событий. Для этого переходим в Администратор – Представление – Цели и жмём на кнопку +ЦЕЛЬ

В Установке цели выбираем Собственная, в Описании цели задаём название Переход на пост той же категории и тип Событие

и в Подброных сведениях вписываем Категорию Same Category Posts и Действие Click

Жмём Сохранить и ждём данных.

Готово!

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