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

 

Такая задача часто возникает, когда на сайте имеются несколько элементов, которые ссылаются на определённые страницы сайта. Это может быть, например, список товаров интернет-магазина, состоящий из наименования, картинок и ссылки или кнопки для перехода на подробные характеристики. Это — разные элементы, но они имеют одну и ту же ссылку. В блогах в списке постов также — наименование поста, ссылка на полную статью и могут быть даже ссылки в мета-данных, и эти ссылки также могут быть одинаковыми.

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

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

Данная статья является небольшим дополнением к опубликованной ранее, поэтому все действия здесь будут аналогичны.

В первую очередь необходимо подключить скрипт отслеживания кликов по этим элементам. Для этого вытащим CSS-селекторы этих элементов:

Заголовок
#post-959 > div > div > header > h2 > a
Дата и время
#post-959 > div > div > header > div > span.posted-on > a
Кнопка «Подробнее»
#post-959 > div > div > div > a

Теперь избавимся от идентификатора #post-959, так как он будет мешать отслеживать остальные элементы, и на всякий случай добавим классы этих селекторов. В результате должно получиться примерно так:

для заголовка

div.blog-item-wrap > div.post-inner-content > header.entry-header > h2.entry-title > a

для даты и времени

div.blog-item-wrap > div.post-inner-content > header.entry-header > div.entry-meta > span.posted-on > a

а для кнопки «Подробнее» — просто класс more-link, так как он прописан в самом теге ссылки a.

Затем переходим в ГТМ в Теги и создадим там тег с названием Event Listener — Item Clicks. Выберем тип тега Пользовательский HTML, и в код вписываем такой скрипт:

<script>

  var itemTitle = document.querySelectorAll('div.blog-item-wrap > div.post-inner-content > header.entry-header > h2.entry-title > a');
  var itemTime = document.querySelectorAll('div.blog-item-wrap > div.post-inner-content > header.entry-header > div.entry-meta > span.posted-on > a');
  var itemButton = document.getElementsByClassName('more-link');

  for (var i = 0; i < itemTitle.length; i++) {
    itemTitle[i].addEventListener("click", function(){
      dataLayer.push({"event": "itemClick"});
    });
  }
  for (var i = 0; i < itemTime.length; i++) {
    itemTime[i].addEventListener("click", function(){
      dataLayer.push({"event": "itemClick"});
    });
  }
    for (var i = 0; i < itemButton.length; i++) {
    itemButton[i].addEventListener("click", function(){
      dataLayer.push({"event": "itemClick"});
    });
  }
</script>

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

 

Сохраняем.

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

Сохраняем.

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

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

и привяжем к нему триггер Item Click

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

<script>
  yaCounterXXXXXXXX.reachGoal('itemClick');
</script>

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

и привяжем к нему триггер Item Click

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

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

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

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

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

 

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