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

Май 22, 2020

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тег Universal Analytics

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

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

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

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

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

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

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

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

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

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

По контекстной, таргетированной рекламе и аналитике