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

Материал про отслеживание кликов по элементам в Google Tag Manager с помощью dataLayer.

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

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

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

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

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

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

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

1. Click Classes равно .btn.btn-block.btn-lg.dropdown-toggle
2. Click Element соответствует селектору CSS #cart > button

Сразу скажу, что настроив любым из этих способов, наш тег и триггер могут срабатывать через раз или вовсе не срабатывать. Вот демонстрация того, что при нажатии внутри этого элемента в одном случае тег срабатывает, а в другом нет. В качестве условия использовал второй вариант (через Click Element):

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

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

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

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

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

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

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

Разберем код подробнее:

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

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

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

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

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

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

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

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

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