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

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

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

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

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

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

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

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

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

=== Формат ===

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

=== Примеры ===

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

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

'''Пример DQL'''

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

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

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

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

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

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

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

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

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

'''Пример (React JSX)'''

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

'''Пример DQL'''

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

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