Прослушивание пользовательских событий в GTM

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

В JavaScript есть такое понятие, как «событие». Событие – это сигнал о том, что что-то произошло в браузере. Браузерных событий большое количество. Самые распространенные в интернет-маркетинге – это click (когда кликнули на какой-то элемент левой кнопкой мыши), submit (когда пользователь отправил форму <form>). Данные по ним мы отправляем в Яндекс.Метрику и Google Analytics, а также настраиваем цели-события.

В Google Tag Manager есть соответствующие триггеры для их отслеживания. Один называется Клик – все элементы (gtm.click), а второй - Отправка формы (gtm.formSubmit). Со временем появились и другие:

• Клики – Только ссылки (gtm.linkClick);
• Видео YouTube (gtm.video);
• Глубина прокрутки (gtm.scrollDepth);
• Доступность элемента (gtm.elementVisibility);
• Изменение в истории (gtm.historyChange);
• Таймер (gtm.timer);
• и другие.

Вспоминаем, что по умолчанию Google Tag Manager фиксирует 3 события.

1. событие Page View (gtm.js) происходит сразу же после загрузки страницы;
2. событие DOM Ready (gtm.dom) происходит, когда модель DOM готова к обработке;
3. событие Window Load (gtm.load) происходит после загрузки всего первоначального контента страницы.

В этом легко убедиться, перейдя в режим предварительного просмотра и обновив страницу.

Однако браузерных событий гораздо больше, чем заложено в GTM. Не всегда спасает и Переменная автоматического события (Auto-Event), которая, по сути, совпадает со встроенными переменными. Про часть из них я писал в статье «События в Google Analytics. Часть II».

События в JavaScript разделяются на системные: загрузка (load) и выгрузка (unload) страницы, события мыши (click, mouseover, mousemove и т.д.) и события клавиатуры (keypress, keydown, keyup).

Приведу список самых часто используемых DOM-событий из статьи learn.javascript.ru «Введение в браузерные события».

События мыши:

• click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании);
• contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши;
• mouseover / mouseout – когда мышь наводится на / покидает элемент;
• mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе;
• mousemove – при движении мыши.

События на элементах управления:

• submit – пользователь отправил форму <form>;
• focus – пользователь фокусируется на элементе, например нажимает на <input>.

Клавиатурные события:

• keydown и keyup – когда пользователь нажимает / отпускает клавишу.

События документа:

• DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.

CSS events:

• transitionend – когда CSS-анимация завершена.

Чтобы отличить событие от свойства объекта, перед ним традиционно пишется приставка on. onsubmit, onclick, onchange, onfocus, onblur и т.д. Например, если мы выберем какой-либо элемент у себя на сайте (у меня это зеленая кнопка «Консультация»), и откроем консоль разработчика (клавиша F12 в Google Chrome), то на вкладке Properties сможем увидеть список всех свойств для данного элемента.

На моей кнопке в коде сайта есть событие onclick (клик по кнопке, с обработчиком событий для Google Analytics). Это и отображается в Properties (цифра 3) в соответствующем свойстве onclick (цифра 4) элемента.

Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло. В моем примере это gtag('event', 'click', {'event_category': 'button'});

Обработчик события - функция, которая сработает, как только событие произошло. Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя. В них указывается тип события и цель.

Тип события - строка, определяющая тип действия, вызвавшего событие. Например, событие blur возникает когда элемент теряет фокус, т.е. курсор покидает этот элемент, а change происходит, когда содержимое элемента формы, выделения или выбора изменяется (для элементов <input>, <select>, и <textarea>).

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

Объект события - объект, связанный с определенным событием и содержащий информацию об этом событии. Объекты событий передаются функции обработчика события в виде аргумента. Все объекты событий имеют свойство type (тип события) и свойство target (цель события).

Цель события - объект, в котором возникло событие или с которым это событие связано. Например, событие load объекта Window или событие click элемента <button>.

Назначить обработчик события можно несколькими способами:

• в виде атрибута элемента HTML;
• использование свойства DOM-объекта;
• с помощью addEventListener().

Использование атрибута HTML

Способ, который чаще всего показывают в статьях и который интернет-маркетологи используют для прослушивания событий вручную, добавляя обработчик прямо в разметке, в атрибуте, который называется on<событие>. Например:

При клике мышкой по кнопке выполнится код, указанный в атрибуте onclick. Этот код передает событие в Google Analytics с действием click и категорией button (библиотека gtag.js).

Атрибут HTML-тега не чувствителен к регистру, поэтому ONCLICK будет работать так же, как onClick и onCLICK… Но, как правило, атрибуты пишут в нижнем регистре: onclick.

Использование свойства DOM-объекта

Можно назначать обработчик, используя свойство DOM-элемента on<событие>.

Два примера кода работают одинаково. При клике мышкой по кнопке выполнится код и в Analytics отправится та же информация по событию.

Регистр DOM-свойства имеет значение. Используйте button.onclick, а не button.ONCLICK, потому что DOM-свойства чувствительны к регистру.

Так как у элемента DOM может быть только одно свойство с именем onclick, то назначить более одного обработчика так нельзя. Но чтобы обойти это ограничение, можно воспользоваться методом addEventListener или attachEvent.

С помощью addEventListener()

Синтаксис добавления обработчика:

, где:

• event - имя события, например "click";
• handler - ссылка на функцию-обработчик;
• options - дополнительный объект со свойствами.

Таким образом, наша запись будет выглядеть так:

Подробнее обо всех способах читайте в этой статье, а про addEventListener разобрано в видео:

Для удаления обработчика следует использовать removeEventListener:

Итак, мы с вами узнали, что браузерных событий очень много и отслеживать их можно различными способами. Плюс они не все по умолчанию прослушиваются в Google Tag Manager. Для этого в самом GTM необходимо произвести дополнительные настройки. Этим мы сейчас и займемся.

Чтобы создать универсальный прослушиватель всех событий, необходимо создать:

• пользовательский тег HTML для каждого типа события, который вы хотите отслеживать (например, change, blur, focus и т.д.)
• переменную типа Собственный код JavaScript, которая возвращает функцию-обработчик, которая помещает событие в dataLayer;

По традиции воспользуемся исходниками кода Симо Ахавы (Simo Ahava) из его статьи.

Создаем пользовательскую переменную типа Собственный код JavaScript и вставим следующий фрагмент:

В Google Tag Manager это будет выглядеть так:

Вводим название переменной generic event handler (или любое другое) и сохраняем изменения.

Рассмотрим данный код подробно.

• return function(e) { ... } - возвращение результата. Обязательным условием использования данной переменной типа Собственный код JavaScript является то, что она должна возвращать результат. Если переменная не будет возвращать функцию, а будет запускать сам код, вы будете отправлять пустые события каждый раз, когда тег прослушивания будет записываться в шаблон страницы.
• window.dataLayer.push({ ... }); - триггерное событие event помещается в dataLayer (уровень данных);
• 'event': 'event.'+e.type - берет свойство (type) из объекта события, который представляет собой строку, и помещает значение в переменную уровня данных event. Как мы уже разобрались, типы событий могут быть разными – change, blur, click, submit и т.д.;
• 'gtm.element': e.target – помещает элемент, с которым произошло событие в переменную уровня данных element;
• 'gtm.elementClasses': e.target.className || ' ' - помещает класс (class) цели события в переменную gtm.elementClasses. Если в объекте HTML нет класса, вместо него вставляется пустая строка;
• 'gtm.elementId': e.target.id || ' ' - помещает идентификатор (id) цели события в переменную gtm.elementId. Если в HTML-объекте нет идентификатора, вместо него вставляется пустая строка;
• 'gtm.elementTarget': e.target.target || ' ' – помещает цель (target) цели события в переменную elementTarget. Если в объекте HTML отсутствует целевой атрибут, вместо него вставляется пустая строка;
• 'gtm.elementUrl': e.target.href || e.target.action || ' ', помещает атрибут (href) или (action) цели события в переменную elementUrl. Если в HTML-объекте нет таких атрибутов, вместо них вставляется пустая строка;
• 'gtm.originalEvent': e – доступ к исходному событию (дополнение Симо).

Теперь нам необходимо создать тег типа Пользовательский HTML тег и вставить в него следующий код:

В Google Tag Manager это выглядит так:

Триггер активации – All Pages (Просмотр страницы), gtm.js в случае, если вы добавляете прослушиватель к узлу документа или DOM Ready (Модель DOM готова), gtm.dom когда прослушиваете конкретный элемент HTML.

Красным я выделил тип события, который вы можете заменить на тот, который хотите прослушать (без приставки on), а синим пометил места, в которых следует указать в двойных фигурных скобках название переменной типа Собственный код JavaScript с предыдущего шага.

Сохраняем изменения. Когда на странице активируется Пользовательский HTML тег, он присоединяет выбранный слушатель к узлу документа. Затем, когда событие происходит, функция обработчика события выполняется с объектом события в качестве его параметра. Этот объект события затем анализируется и помещается в dataLayer с набором свойств, к которым вы можете получить доступ с помощью переменной уровня данных.

В качестве примера я покажу, как можно отследить событие ondblclick, которое срабатывает только по двойному щелчку мыши по выбранном элементу. Все, что необходимо сделать, это изменить переменную eventType в Пользовательском HTML теге (пишем без on):

Сохраняем. Затем переходим в режим отладки и кликаем двойным щелчком мыши по любому элементу.

Двойной клик по кнопке активировал прослушивание события gtm.dblclick. А на уровне Data Layer мы можем видеть все атрибуты данного объекта (класс, id, url и т.д.).

И напоследок, давайте передадим в качестве события данные о двойном щелчке в Google Analytics.

Для это необходимо:

1. создать триггер типа Пользовательское событие с именем gtm.dblclick

Примечание: вы можете выбрать не все специальные события, а какие-то конкретные, расположенные на определенных страницах, задав соответствующее условие активации.

2. создать тег типа Google Аналитика – Universal Analytics, указав в нем соответствующие данные.

• Тип отслеживания – Событие;
• Категория – Произвольно;
• Действие – Произвольно;
• Триггер активации – наше пользовательское событие gtm.dblclick.

Проверяем с помощью режима предварительного просмотра. При двойном щелчке мыши активируется тег:

Который отправляет данные о событии в Google Analytics: