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

22 мая, 2020

Статья про отслеживание состояния элемента "ползунок" с помощью Google Tag Manager и про передачу этой информации в инструменты веб-аналитики.

Представленный в спецификации HTML5 ползунок выбора диапазона (range) является одним из типов у элемента input. Он позволяет осуществить выбор какого-то числового значения в указанном диапазоне.

Пример элемента "ползунок"

Мы можем передвигать ползунок вправо или влево, чтобы выбрать нужное значение в рамках заданного диапазона. Такой элемент часто используют в автомобильном, финансовом, банковском и других секторах - на сайте размещается калькулятор или форма с N количеством полей, где одним из них и является <input type='range'> с возможностью выбора определенной суммы из представленного диапазона.

Пример формы с выбором суммы с помощью ползунка

В качестве примера я покажу как отслеживать состояние ползунка с помощью Google Tag Manager на сайте graphanalytics.ru. На нем размещена форма, в которой пользователю необходимо выбрать значение конверсии сайта с помощью ползунка. Итоговое число мы передадим в Google Analytics.

Пример отслеживания

Последовательность действий следующая:

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

Создание пользовательской переменной

Для этого переходим в раздел Переменные и создаем переменную типа Собственый код JavaScript:

function (){
var cr = document.querySelector('#rangeValue').innerText;
  return cr;
}

function (){

var cr = document.querySelector('#rangeValue').innerText;

return cr;

}

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

Пользовательская переменная CR Variable

Эта переменная, которая возвращает значение из селектора элемента #rangeValue в виде числа.

Примечание: при настройке вам необходимо изменить подчеркнутый красным CSS-селектор на свой.

Идентификатор (id) rangeValue

Сохраняем переменную в GTM.

Это не единственный способ определения переменной. Для кого-то может подойти такая конструкция:

function (){
var cr = document.getElementById('ID').value;
  return cr;
}

function (){

var cr = document.getElementById('ID').value;

return cr;

}

Принцип такой же, только возвращается значение элемента по его идентификатору.

Создание тега прослушивания событий

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

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

function() {
return function(e) {
window.dataLayer.push({
'event': 'gtm.'+e.type,
'gtm.element': e.target,
'gtm.elementClasses': e.target.className || '',
'gtm.elementId': e.target.id || '',
'gtm.elementTarget': e.target.target || '',
'gtm.elementUrl': e.target.href || e.target.action || '',
'gtm.originalEvent': e
});
}
}

function() {

return function(e) {

window.dataLayer.push({

'event': 'gtm.'+e.type,

'gtm.element': e.target,

'gtm.elementClasses': e.target.className || '',

'gtm.elementId': e.target.id || '',

'gtm.elementTarget': e.target.target || '',

'gtm.elementUrl': e.target.href || e.target.action || '',

'gtm.originalEvent': e

});

}

В GTM это выглядит так:

Переменная Собственный код JavaScript (generic event handler)

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

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

<script>
(function() {
var eventType = "change"; // Измените на тот тип события, который хотите прослушать
if (document.addEventListener) {
document.addEventListener(eventType, {{generic event handler}}, false);
} else if (document.attachEvent) {
document.attachEvent('on' + eventType, {{generic event handler}});
}
})();
</script>

(function() {

var eventType = "change"; // Измените на тот тип события, который хотите прослушать

if (document.addEventListener) {

document.addEventListener(eventType, {{generic event handler}}, false);

} else if (document.attachEvent) {

document.attachEvent('on' + eventType, {{generic event handler}});

}

})();

</script>

В Google Tag Manager тег выглядит следующим образом:

Отслеживание события change

Триггер активации - Все страницы (All Pages).

Хочется отметить событие change. Его особенность заключается в том, что оно вызывается после того, как пользователь отпустил ползунок. Событие не позволяет отследить все манипуляции, которые производит пользователь, пока выбирает нужное значение. В этом случае можно использовать событие oninput, которое создается и в промежуточных состояниях, пока пользователь двигает ползунок.

Примечание: при настройке следует обратить внимание на переменную generic event handler. Если вы изменяли название на предыдущем шаге, то и здесь необходимо указать собственное значение.

Создание тега прослушивания событий

В разделе Триггеры создаем событие типа Пользовательское событие с именем события gtm.change:

Пользовательское событие gtm.change

Создание тега Universal Analytics

Все, что осталось, создать тег для передачи данных в Google Analytics. Переходим на вкладку Теги и создаем тег типа Google Аналитика - Universal Analytics

Тег Universal Analytics

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

Сохраняем настройки. Проверить корректность работы можно с помощью режима отладки GTM.

Режим предварительного просмотра

Как видим, при изменении значения на ползунке в GTM срабатывает наше событие gtm.change, а оно, в свою очередь, активирует тег Universal Analytics и передает в показатель Ярлык события значение в формате строке (string). Если вам необходимо передавать числовое значение (number), в переменной возвращайте переменную с помощью функции parseInt:

function (){ 
var cr = document.querySelector('#rangeValue').innerText; 
return parseInt(cr); 
}

function (){

var cr = document.querySelector('#rangeValue').innerText;

return parseInt(cr);

}

В режиме реального времени в Google Analytics события также отображаются:

В режиме реального времени

Через некоторое время все данные по событиям появятся в отчете Поведение — События — Лучшие события.

Метки: Google Analytics, Google Tag Manager

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

Получайте бесплатные уроки и фишки

Еще статьи