Регистрация взаимодействия пользователей на веб-странице является неотъемлемой частью исследования пользователей. Это базовое руководство по регистрации событий, таких как щелчки мышью, наведение курсора мыши и изменения видимости на тестируемой веб-странице.
Для целей этого руководства мы будем записывать взаимодействия пользователей только с предопределенными элементами HTML на нашей веб-странице, например, с некоторыми определенными изображениями, кнопками, абзацами и т. д. Мы называем эти элементы HTML AOI. или Области интересов. Окончательный журнал будет содержать два элемента: aoi_dtl и interaction_events.
aoi_dtl — это объект объектов, содержащий сведения о каждом AOI и агрегированные события взаимодействия (общее количество кликов и общая продолжительность наведения в миллисекундах). Пример ниже
interaction_events — это массив объектов, содержащий хронологический список всех событий взаимодействия, имевших место на веб-странице, от загрузки страницы до ухода пользователя со страницы. Пример с четырьмя типами событий взаимодействия (M_HOVER, M_CLICK, VISBILITY_HIDDEN и VISIBILITY_VISIBLE) показан ниже.
События VISIBILITY_interaction определяют, видна ли текущая вкладка, прокси для активна ли текущая вкладка.
Подробная информация о каждом из записанных значений данных представлена в тексте и/или в комментариях к коду ниже.
Шаг 0: Предварительные требования
Мы зависим от следующих библиотек JavaScript:
Шаг 1: Разметьте свой HTML
Для каждого элемента HTML, который мы хотим отслеживать, мы добавляем атрибут data-aoi к этому элементу. Значением атрибута data-aoi является имя AOI. Это имя служит ключом и значением атрибута aoi_name в объекте aoi_dtl JSON. Эти имена отображаются в окончательных данных журнала, которые мы собираем. В следующем примере показаны два AOI: изображение заголовка и кнопка «Оценить результаты».
Шаг 2: JavaScript в начале пути пользователя
Когда пользователь просматривает страницу, мы инициализируем нашу настройку ведения журнала. Обычно это внутри функции$(document).ready() в jQuery.
Инициализация
Сначала мы инициализируем переменные, в которых будут храниться зарегистрированные данные.
Затем мы определяем две функции полезности. Первая функция, get_ts_h, преобразует временные метки Javascript (миллисекунды эпохи Unix) в удобочитаемый формат: «2021–07–21 15:43:48.119».
Вторая функция, get_bb_details, получает детали ограничительной рамки любого HTML-элемента относительно экрана (монитора) и веб-страницы. Эти значения можно использовать для корреляции, например, с данными отслеживания взгляда.
Теперь мы готовы регистрировать взаимодействия с пользователем.
Регистрация щелчков мышью
Логирование щелчков мышью взято из этого ответа StackOverflow. Иногда событие click создает повторяющиеся события на переключателях, поэтому вместо этого мы используем событие mouseup.
Регистрация наведения мыши
Ведение журнала наведения мыши адаптировано из этого ответа StackOverflow. Сначала мы определяем пороговое значение HOVER_THRESH в 100 мс (скажем). Затем мы регистрируем события наведения, которые длятся не менее 100 мс.
Регистрация того, видна ли текущая вкладка
Это ведение журнала полезно, если пользователь щелкает ссылку, которая открывает веб-страницу в новой вкладке. В конце концов, пользователь вернется на вкладку «эта». В таких случаях следующий код добавляет запись журнала VISIBILITY_HIDDEN, когда пользователь переходит на новую вкладку; и запись журнала VISIBILITY_VISIBLE, когда возвращается на эту вкладку.
Регистрация других событий взаимодействия
Мы также можем добавить другие типы событий регистрации, присоединив прослушиватели событий к соответствующему событию и поместив объект с необходимыми метаданными в массив interaction_events. Примеры таких событий могут включать прокрутку, щелчок правой кнопкой мыши, ввод текста и другие.
Шаг 3: JavaScript в конце пути пользователя
Когда пользователь выполнил все задачи на нашей веб-странице и готов покинуть нашу страницу, мы запускаем следующий код, чтобы сопоставить все данные журнала вместе.
Заполнить aoi_dtl
Следующий код получает сведения обо всех AOI в их окончательной форме и заполняет объект aoi_dtl, инициализированный при запуске.
На данный момент массив interaction_events полностью заполнен и может использоваться как есть. Теперь вы можете предпринять соответствующие действия в соответствии с требованиями вашего конвейера данных. Например, вы можете добавить его в существующую форму на веб-странице, сделать запрос AJAX к API или сохранить данные в локальном хранилище.
Спасибо за чтение. Пожалуйста, поделитесь предложениями, улучшениями и / или комментариями ниже.
Если вы хотите процитировать этот учебник в своем исследовании, вы можете использовать следующее:
@misc{bhattacharya_2021, author={Bhattacharya, Nilavra}, title={Record User Interactions on your Webpages: A tutorial}, year={2021}, url={https://medium.com/@nilavra/60ccc19f0516}, note = "[Online]" }
