Сетевой снимок экрана аля userfly.com? - PullRequest
2 голосов
/ 21 июля 2010

Я проверял http://userfly.com/demo. Он фиксирует все щелчки мыши и нажатия клавиш и воспроизводит все обратно. Как это сделать без установки какого-либо программного обеспечения? Чистый Javascript? Не похоже, что он использует Flash. Существуют ли инструменты, которые я могу использовать, чтобы разместить что-то подобное на своем сайте, предлагая это другим?

Ответы [ 3 ]

4 голосов
/ 21 июля 2010

Они связывают все возможные события с объектом уровня документа с помощью функции "_bindEvents", создающей делегатов для каждого действия, которое пользователь выполняет на странице. Они также записывают метку времени, когда произошло каждое событие. Они сохраняют эти данные, превращая их в строки JSON и загружая изображение 1x1, передавая строку JSON в качестве параметра строки запроса.

Они воспроизводят его очень просто, они просто вызывают все события в той же последовательности на странице. За исключением события перемещения мыши. Поскольку невозможно заставить курсор мыши перемещаться из JavaScripts, они создают div с изображением, похожим на курсор мыши, и перемещают его в последовательности перед записывающим устройством. Довольно просто, но и впечатляет.

1 голос
/ 21 июля 2010

В основном я думаю, что делается захват 1001 * всякий раз, когда что-то происходит, они записывают, что это было за событие, что оно сделало и время.Тогда просто восстановите это для воспроизведения.Я не знаю, есть ли инструменты для этого, но основная концепция не должна быть сложной.Метод сохранения данных и извлечения, вероятно, будет самой сложной частью.

0 голосов
/ 22 июля 2010

вы запросили другие подобные инструменты, и вам обязательно стоит попробовать http://mouseflow.com. Он предлагает те же функции записи / воспроизведения, что и Userfly, но также предлагает тепловые карты, показывающие щелчки, движения мыши и поведение прокрутки на ваших страницах. Он поддерживает записи страниц за входом в систему, зависящие от сессии страницы (например, страницы оформления заказа). Есть бесплатные и платные планы.

Ласс

(представляет Mouseflow.com)

...