Отслеживание кликов в GTM с помощью dataLayer

StalkerOK

Администратор
Команда форума
Регистрация
5 Фев 2019
Сообщения
481
Материал про отслеживание кликов по элементам в Google Tag Manager с помощью dataLayer.

При настройке Google Tag Manager иногда попадаются элементы, клики по которым нельзя просто так отследить, поскольку у них может не быть ни класса (.class), ни идентификатора (#id). А если мы перейдем в режим предварительного просмотра, то увидим там одно из таких значений:

Отслеживание кликов в GTM с помощью dataLayer
[object HTMLButtonElement]

Почему так происходит? Давайте разберем пример отслеживания клика по кнопке Товары на моем демонстрационном сайте techniqa.ru:

Отслеживание кликов в GTM с помощью dataLayer
Пример отслеживания кнопки «Товары»

Казалось бы, обычная задача и кнопка. Перед тем, как настроить тег и триггер для нее, мы можем воспользоваться триггером Клик — Все элементы и режимом отладки Google Tag Manager, чтобы определить атрибуты этого элемента.

Отслеживание кликов в GTM с помощью dataLayer
Элемент имеет Click Classes

После клика мы видим, что у элемента есть Click Classes. Мы также можем определить CSS-селектор этой кнопки. Для этого отправляемся в консоль разработчика и инспектируем элемент, а затем выделив его, вызываем контекстное меню и копируем селектор.

Отслеживание кликов в GTM с помощью dataLayer
Копирование CSS-селектора элемента

Получим CSS-селектор #cart > button . Чтобы проверить, что мы выбрали нужный элемент, воспользуемся расширением CSS Selector Tester.

Отслеживание кликов в GTM с помощью dataLayer
Проверка селектора с помощью CSS Selector Tester

Элемент подсветился в нужной области, значит мы можем использовать его селектор при настройке триггера в GTM. Соответственно, справедлив и класс элемента, который мы также можем проверить с помощью расширения браузера:

Отслеживание кликов в GTM с помощью dataLayer
Проверка класса элемента с помощью CSS Selector Tester

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

  1. Click Classes равно .btn.btn-block.btn-lg.dropdown-toggle
  2. Click Element соответствует селектору CSS #cart > button
Сразу скажу, что настроив любым из этих способов, наш тег и триггер могут срабатывать через раз или вовсе не срабатывать. Вот демонстрация того, что при нажатии внутри этого элемента в одном случае тег срабатывает, а в другом нет. В качестве условия использовал второй вариант (через Click Element):

Отслеживание кликов в GTM с помощью dataLayer
Тег не всегда срабатывает по клику
Почему? Все дело во вложенности. Как вы уже знаете из этой статьи, некоторые элементы содержат вложенную структуру. И когда нам кажется, что мы нашли тот самый верный атрибут элемента для отслеживания, на деле оказывается, что это не так.

Например, внутри кнопки Товары есть еще и маленькая иконка с корзиной, которая имеет свой класс и селектор. А что будет, если пользователь кликнет по ней? Тогда триггер и тег не сработают, и событие не будет передано в инструменты аналитики. Именно поэтому рекомендуется использовать подстановочный знак (*, wildcard) для точного определения. Условие #cart > button, #cart > button * для триггера позволило бы нам отследить все клики по данному элементу.

Отслеживание кликов в GTM с помощью dataLayer
Верное условие активации триггера

Подстановочный знак очень сильно помогает. Но это еще не все способы отслеживания кликов в Google Tag Manager. Давайте вернемся к нашему примеру с кнопкой Товары в самом начале. В режиме отладки напротив встроенной переменной Click Element мы наблюдаем такую картину:

Отслеживание кликов в GTM с помощью dataLayer

В ней отображаются объекты [object HTMLButtonElement] и [object HTMLSpanElement]. Что это такое?

Чтобы понять о чем Google Tag Manager пытается нам сообщить, необходимо вернуться к определению DOM. Document Object Model (DOM) — это объектная модель документа, древовидная структура, содержащая элементы, из которых состоит страница сайта. У всех на сайте есть элемент body [HTMLBodyElement], неотъемлемая часть HTML-разметки, или, например, один или несколько элементов div [HTMLDivElement]. Обработчик кликов GTM всегда возвращает элемент, по которому кликнул текущий пользователь. Типов объектов (их еще называют интерфейсы веб API) большое количество. Подробнее с ними вы можете ознакомиться в официальной документации Mozilla.

Элементы DOM являются объектами. Их трудно представить в текстовом виде, поскольку они имеют свойства и методы, а также являются производными от родительских объектов и могут иметь дочерние узлы. Поэтому браузер пытается сообщить вам, какой тип объекта возвращается.

В этом случае мы можем использовать отслеживание кликов с помощью уровня данных (dataLayer) и такую конструкцию:

Код:
<script>
var elem = document.querySelectorAll('CSS-селектор');
for (var i = 0; i < elem.length; i++) {
  elem[i].addEventListener("click", function(){
   dataLayer.push({"event": "customClick});
});
}
</script>
Разберем код подробнее:

  • document.querySelectorAll(‘CSS-селектор’); — метод возвращает статический список, содержащий все найденные элементы документа, которые соответствуют указанному селектору (как определить — см. выше). В моем примере — это #cart > button . А elem — это переменная, которую мы объявляем и присваиваем ей это значение;
  • for (var i = 0; i < elem.length; i++) — создаем цикл, которым будем искать все элементы в документе, которые соответствуют заданному селектору. Запускается столько раз, сколько есть элементов, не больше их количества (length);
  • elem.addEventListener(«click», function(){ dataLayer.push({«event»: «customClick}); — для каждого элемента создаем метод addEventListener с событием click и функцией обработчика, в которой мы прописываем пользовательское событие customClick в уровне данных;
    [*]customClick — произвольное название события. Можете задать какой пожелаете.

Другими словами: при клике на любой элемент, содержащий заданный селектор, будет срабатывать пользовательское событие customClick, которое мы сможем использовать в качестве триггера GTM. Подробнее про прослушивание событий и addEventListener можете прочитать здесь.

Ее необходимо добавить в тег типа Пользовательский тег HTML. Условие активации — All Pages (Все страницы). В Google Tag Manager для моего примера это будет выглядеть так:

Отслеживание кликов в GTM с помощью dataLayer
Выделенное красным — измените под себя

Сохраняем тег. Теперь настраиваем триггер типа Пользовательское событие. В нем указываем имя нашего события. В моем примере — customClick:

Отслеживание кликов в GTM с помощью dataLayer
Пользовательское событие customClick

Сохраняем. Остается только добавить тег(и) для инструментов веб-аналитики. Для передачи этой информации в Google Analytics достаточно создать тег типа Google Аналитика — Universal Analytics с типом отслеживания Событие.

Отслеживание кликов в GTM с помощью dataLayer

В поля Категория и Действие вписываете произвольные значения. Подробнее про события в Google Analytics читайте в этом материале. В качестве триггера активации добавляем наше Пользовательское событие, созданное на предыдущем шаге. Сохраняем настройки.

Проверить корректность отслеживания клика можно также с помощью режима отладки GTM. Запускаем Debug Mode и кликаем по нашему элементу.

Отслеживание кликов в GTM с помощью dataLayer
Корректная настройка с активацией тега Google Analytics

Наше пользовательское событие срабатывает везде, где произошел клик, заданный CSS-селектору. Тег Google Аналитика активируется, в отчетах Google Analytics «В режиме реального времени» отображается наше событие:

Отслеживание кликов в GTM с помощью dataLayer
В режиме реального времени

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

Источник
 
Сверху