Связывайте взаимодействие пользователя с функциями и компонентами пользовательского интерфейса

Связывайте взаимодействие пользователя с функциями и компонентами пользовательского интерфейса

Ранний доступ

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

Связывайте взаимодействие пользователя с функциями

Используйте атрибут data-dt-features для связывания взаимодействий пользователя с HTML-элементом с одной или несколькими конкретными характеристиками продукта. При взаимодействиях пользователя зафиксированные характеристики доступны в поле ui_element.features; см. раздел «Взаимодействия пользователя». Элементы наследуют характеристики от своих предков, обеспечивая всестороннее отслеживание характеристик.

Варианты использования

Этот атрибут data-dt-features позволяет вам:

• Отслеживать взаимодействие пользователей с функциями — например, «поиск», «оформление заказа», «навигация».
• Группировать связанные компоненты пользовательского интерфейса на странице.
• Анализировать поведение пользователей по областям применения функций.
• Создавать информационные панели и отчеты на основе функциональных возможностей.

Формат

Значение атрибута data-dt-features представляет собой список названий объектов, разделенных запятыми, где объект может быть любой строкой. Объекты чувствительны к регистру — например, «Search» и «search» — это разные объекты.

Примеры

Наследование функций

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

Пример DQL

Следующий DQL-запрос генерирует временной ряд, показывающий для каждой функции количество сессий, которые включают хотя бы одно взаимодействие с этой функцией.

fetch user.events
| filter isNotNull(ui_element.features)
| expand ui_element.features
| makeTimeseries countDistinct(dt.rum.session.id), by: {ui_element.features}, interval: 1d

Ассоциируйте взаимодействия пользователя с компонентами пользовательского интерфейса

Используйте атрибут data-dt-component для связывания взаимодействий пользователя с HTML-элементом с одним или несколькими компонентами пользовательского интерфейса, такими как средство выбора даты или календарь. Значения компонентов наследуются от всех родительских элементов и собираются в порядке сверху вниз, образуя путь через дерево компонентов. На захваченном взаимодействии пользователя собранные компоненты доступны в поле ui_element.components; см. «Взаимодействия пользователя».

Варианты использования

Атрибут data-dt-component позволяет вам:

• Определять, где происходят взаимодействия пользователя в компонентных фреймворках, таких как React, Vue и Angular.
• Понимать путь компонента от корневого элемента до элемента, с которым осуществляется взаимодействие.
• Различать одинаковые элементы в различных контекстах компонентов.
• Отлаживать и анализировать взаимодействия во вложенных компонентных структурах.

Формат и наследование

Значение параметра data-dt-component представляет собой строку, описывающую компонент. Компоненты собираются сверху вниз от всех предков, в результате чего получается массив, представляющий путь через дерево компонентов. Пустые значения или значения, состоящие только из пробелов, игнорируются.

Пример (React JSX)

<div data-dt-component="TimeframeSelector">
  <button data-dt-component="DatePicker">Выбрать дату</button>
</div>

Пример DQL

Следующий DQL-запрос генерирует временной ряд, показывающий, сколько разных пользователей взаимодействовали с компонентом TimeframeSelector. Результаты разделены по типу интерфейса.

fetch user.events
| expand ui_element.components
| filter ui_element.components == "TimeframeSelector"
| makeTimeseries countDistinct(dt.rum.instance.id), by: {frontend.name}, interval: 1d