Настройка захвата взаимодействия пользователя с веб-интерфейсами

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

RUM Ключ-АСТРОМ позволяет фиксировать действия пользователей, такие как клики и прокрутка, и преобразовывать их в полезную аналитическую информацию:

С помощью приложения Пользователи и сессии вы можете просмотреть все взаимодействия пользователей, произошедшие во время пользовательской сессии. Это особенно полезно для служб поддержки клиентов и разработчиков при диагностике проблем или ошибок, возникающих у клиентов.
Анализ взаимодействия пользователей с помощью DQL позволяет понять закономерности поведения в широком диапазоне сценариев использования; см. раздел «Анализ поведения пользователей с помощью DQL».

В период раннего доступа к данным о взаимодействии с пользователями дополнительная плата за их обработку не взимается. Запросы к данным о взаимодействии с пользователями также включены без дополнительной платы, поскольку запросы к необработанным данным RUM в настоящее время находятся в режиме раннего доступа; см. раздел «Расчет потребления данных мониторинга реальных пользователей и синтетического мониторинга — Запрос».

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

Для фиксации взаимодействия пользователей:

Перейдите в раздел Ключевые показатели опыта > Обзор.
Выберите Веб, чтобы просмотреть все веб-интерфейсы.
Выберите интерфейс, который хотите настроить.
Перейдите во вкладку Настройки.
В разделе Включение и контроль затрат включите Взаимодействие с пользователем.

Типы взаимодействия пользователей

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

Тип взаимодействия пользователя	Описание
Нажмите	Когда пользователь щелкает или касается HTML-элемента. Обратите внимание, что касание HTML-элемента регистрируется как щелчок.
Нажатие клавиши	Когда пользователь нажимает комбинацию клавиш или определенные отдельные клавиши; см. раздел «Запись нажатий клавиш».
Масштабирование / изменение размера	Когда пользователь увеличивает или уменьшает масштаб, или изменяет размер области просмотра.
Фокусировка / размытие	Когда пользователь фокусируется на HTML-элементе или покидает его. Эти типы взаимодействия с пользователем фиксируются только в том случае, если вы дали на это согласие.
Изменять	Когда пользователь изменяет значение в поле формы, например, устанавливая флажок.
Прокрутка	Когда пользователь прокручивает страницу или элемент интерфейса.
Перетаскивание	Когда пользователь начинает или заканчивает операцию перетаскивания. Также фиксируются допустимые действия по перемещению файлов извне, например, перетаскивание файла в область загрузки. В обоих случаях записывается положение файла.
Наведение курсора мыши	Когда пользователь наводит курсор на HTML-элемент. Этот тип взаимодействия с пользователем регистрируется только в том случае, если вы дали на это согласие.

Захват нажатия клавиши

Нажатие клавиш регистрируется для комбинаций, включающих клавиши Ctrl или Meta (Windows или Cmd). Запись происходит при одновременном удержании клавиши Ctrl или Cmd, но комбинации, включающие только Alt, не регистрируются. Все клавиши, нажатые одновременно с Ctrl или Cmd, объединяются в одно событие в поле keys. Удержание клавиши не генерирует повторных событий — срабатывает только первое нажатие клавиши.

Помимо комбинаций клавиш, при нажатии без Ctrl или Cmd фиксируются и некоторые отдельные клавиши:

Enter и Tab фиксируются для всех целей.
Escape и Space фиксируются.
Backspace и Delete не фиксируются для редактируемых элементов, таких как <input> элементы, принимающие текстовый ввод, <textarea> и элементы с contentEditable="true".
Для предотвращения спама событий все отдельные события нажатия клавиш ограничиваются 500 мс на каждый уникальный ключ.
Активация кнопок и ссылок — например, нажатие Enter на кнопку — запускает синтетические события клика в браузере. В этом случае фиксируется только событие нажатия клавиши, а событие клика игнорируется.

Типы взаимодействия пользователей с согласия пользователя

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

Фокусировка/Размытие

Для захвата фокуса и размытия взаимодействия с пользователем добавьте атрибуты data-dt-focus и data-dt-blur к соответствующим HTML-элементам. Атрибут может быть пустым или иметь значение; оба варианта data-dt-focus и data-dt-focus="true" допустимы.

Примеры

<!-- Отслеживание момента, когда пользователи фокусируются на поиске -->
<input data-dt-focus type="text" placeholder="Поиск товаров...">

<!-- Мониторинг взаимодействия с полями формы -->
<form>
  <input data-dt-focus name="email" type="email" placeholder="Email">
  <input data-dt-focus name="password" type="password" placeholder="Password">
  <button type="submit">Войти</button>
</form>

<!-- Отслеживание фокуса на пользовательских компонентах -->
<div data-dt-focus tabindex="0" role="button">Пользовательская кнопка</div>

<!-- Отслеживайте фокус и размытие для полного взаимодействия -->
<textarea data-dt-focus data-dt-blur placeholder="Ваш отзыв..."></textarea>

<!-- Мониторинг отказов от поиска -->
<input data-dt-focus data-dt-blur type="search" placeholder="Что вы ищете?">

Наведение курсора мыши

Для отслеживания действий пользователя при наведении курсора мыши добавьте атрибут data-dt-mouse-over="<milliseconds>" к соответствующему HTML-элементу. Значение атрибута определяет, сколько миллисекунд пользователь должен удерживать курсор над элементом, прежде чем действие будет зафиксировано. При выборе подходящей задержки учитывайте следующие факторы:

Если вы хотите измерить вовлеченность пользователей в действия, совершаемые с помощью элементов призыва к действию (CTA) или карточек товаров, сколько миллисекунд должно пройти с момента наведения курсора мыши, прежде чем это действие будет считаться преднамеренным?
Если ваша цель — отслеживать взаимодействие с всплывающими подсказками, то какая задержка требуется вашему приложению до появления этих подсказок?

Примеры

<!-- Отслеживание наведения курсора через 300 мс (показывает намерение) -->
<button data-dt-mouse-over="300">
  Узнать больше
</button>

<!-- Мониторинг интереса к карточке товара с порогом 500 мс -->
<div class="product-card" data-dt-mouse-over="500">
  <img src="product.jpg">
  <h3>Премиум-наушники</h3>
  <p>299,99 долларов</p>
</div>

<!-- Отслеживание всплывающей подсказки при наведении курсора с порогом в 1 секунду -->
<span data-dt-mouse-over="1000">
  <i class="info-icon">?</i>
  <div class="tooltip">Подробная информация отображается здесь</div>
</span>

<!-- Возможны разные пороговые значения для разных намерений -->
<nav>
  <div data-dt-mouse-over="200">Товары</div> <!-- Быстрый наведение курсора -->
  <div data-dt-mouse-over="500">Решения</div> <!-- Средний уровень намерения -->
  <div data-dt-mouse-over="1000">Документация</div> <!-- Сильное намерение -->
</nav>