Запис екрану відвідувачів сайту

Що саме треба зробити? Що за код, звідки?

Ievhen Ліхачев 10 лютого 2025

код наразі такий, але можна модифікувати для відповідної функції

потрібна функція перегляду руху мишки по екрану

Готових рішень даного функціоналу рідко можна зустріти в реалізації, а у відкритому доступі їх взагалі не зустріти (принаймні за  більш, як 10 років лише в одній CRM бачив таке)

Варіант розробки подібного можливий, але треба чітко описати всі моменти та фінансово це буде дещо більше вартувати, хоча все залежить від того, в якому форматі та рівню складності треба все робити 

Ievhen Ліхачев 10 лютого 2025

я бачив це в сервісі онлайн консультантів jivosite , заплатити можна і більше. Треба елементарно щоб можна було відкрити вікно і бачити сторінку сайту по якому пересувається мишка відвідувача в реалтаймі. ЦЕ все що потрібно від цього сервісу.

Ievhen Ліхачев 10 лютого 2025

передавати координати мишки кожні 1 сек наприклад і демонструвати адміну на екрані цю траекторію

Це так, але не зовсім: питання виникають з об'ємами даних, записом повторних сесій, та форматом відтворення.

Зокрема треба подумати над цим 

Вам треба записувати поведінку відвідувачів суто однієї сторінки, чи на сайті в цілому?

Ievhen Ліхачев 10 лютого 2025

записувати всі дії на сайті, включно з переходом на іншу сторінку. можна записувати рух миши не так часто умовно раз на 1сек кадр, якщо забирає багато ресурсу.

Такий функціонал колись був у яндекс.метріка. Не знаю як зараз. Але якщо ще і працює, то, як відомо, яндекс не працює у нас.

Ievhen Ліхачев 10 лютого 2025

тож і треба виконавець, що зробить таке у нас.

Якщо таке вам потрібно написати чисто для вас, то воно буде коштувати 8000, але не гривень.

І щодо теперішніх правил браузерів, можливо, вже таке і не можливо буде написати.

Тобто, якщо досі яндекс це використовує, значить можно написати.

у мене 7600грн

Можеш зробить Вебвізор за 7600 грн :) Можеш не цінити свій час.

Ievhen Ліхачев 10 лютого 2025

тож і треба виконавець, що зробить таке у нас.

Ievhen Ліхачев 10 лютого 2025

то треба такий виконавець що у нас це зробить.

Если бы вы брались за разработку такой системы самостоятельно, процесс выглядел бы следующим образом:

Основные этапы разработки:

1. Frontend (для пользователей сайта):

   • Разработка клиентской части: Вам нужно будет создать скрипт, который будет отслеживать действия пользователей на сайте, такие как клики, прокрутка страницы, ввод текста, перемещение мыши и другие взаимодействия. Для этого можно использовать JavaScript и его библиотеки, такие как event listeners для различных событий.
   • Запись экрана: Реализация функции записи экрана и действий пользователя. Это может быть сделано с помощью API браузера для захвата экрана или использования готовых решений, например, MediaRecorder API для записи видео.
   • Отправка данных на сервер: Для передачи данных в реальном времени можно использовать WebSocket или долгосрочные HTTP-запросы (например, с использованием fetch или XMLHttpRequest).
   • Оптимизация: Вам нужно будет позаботиться об оптимизации, чтобы скрипт не сильно нагружал систему, а также поддерживал мобильные устройства и различные браузеры.

2. Backend (сервера и хранилище данных):

   • Создание серверной части: Вам нужно будет настроить сервер для приема данных от фронтенда. Это может быть сделано с использованием технологий, таких как Node.js (для работы с WebSocket) или PHP, если вам удобнее работать с ним.
   • Хранение данных: Вам нужно будет реализовать систему хранения полученных данных — это могут быть записи в базу данных или файловое хранилище для видео и изображений. Вы можете использовать облачные хранилища (например, Amazon S3) или локальные серверы.
   • Обработка данных в реальном времени: Сервер должен поддерживать передачу данных в реальном времени (например, через WebSocket), чтобы администраторы могли наблюдать действия пользователей без задержек.
   • Обработка больших объемов данных: Вам предстоит справиться с большими объемами данных, такими как видео и изображения, и обеспечить их хранение и воспроизведение без потерь качества.

3. Реализация пользовательского интерфейса (для администратора):

   • Создание панели управления: Разработать веб-интерфейс для администратора, чтобы он мог просматривать записи действий пользователей, фильтровать их по времени или типу действий. Для этого потребуется интеграция с фронтендом и сервером.
   • Воспроизведение записей: Вам нужно будет реализовать механизм для воспроизведения записи действия пользователя на сайте (например, с помощью видеоплеера или анимации).

4. Интеграция с другими системами (например, аналитика):

   • Интеграция: Возможно, вам нужно будет интегрировать вашу систему с уже существующими инструментами аналитики, чтобы предоставить более глубокий анализ действий пользователей. Например, вы можете интегрировать запись с данными о пользователе из Google Analytics.

Примерный объем работы:

• Frontend: 4–6 недель — создание скриптов для отслеживания действий пользователей и записи экрана.
• Backend: 6–8 недель — настройка серверной части для приема данных, их обработки и хранения.
• UI/UX: 3–4 недели — создание панели управления для просмотра действий пользователей.
• Интеграция: 2–3 недели — интеграция с другими аналитическими системами.
• Тестирование и оптимизация: 2–4 недели — улучшение производительности, исправление багов и тестирование на различных устройствах и браузерах.

Примерная оценка:

• Человеко-часы: 500–700 часов.
• Стоимость:
  • Ваша ставка: если вы работаете как фрилансер или независимый разработчик, и у вас есть опыт, ставки могут варьироваться. Примерная стоимость работы может составить $25,000 — $70,000 в зависимости от вашего опыта и сложности проекта.

Процесс создания такой системы займет значительное количество времени и усилий, но при успешной реализации вы получите мощный инструмент для мониторинга действий пользователей на сайте.

Э схоже вже рішення, але там не рух мишки фіксує а кліки мишкою і створюється карта сторінок.

Можу встановити вам. 

Ievhen Ліхачев 10 лютого 2025

це не тільки яндекс використовує

Microsoft Clarity - можливо вам підійде

ему надо им а не сервис..

Ievhen Ліхачев 10 лютого 2025

можливо, але якщо підключимо по апі їх сервіс щоб можна було для кожного аккаунту який створрений в нашому сервісі окремо підєднати.

в Microsoft Clarity можна "помічати" користувачів, наприклад по їх ід, або по сесії. Але Microsoft Clarity не дозволяє переглядати в реальному часі, в кращому випадку затримка буде близько 30 секунд. також Microsoft Clarity не реалізовує офіційних API для сторонніх ресурсів, Ви може лише під'єднати до Google Analytics для більш детального розбору метрик, або реалізувати кастомні рішення, але це може бути не стабільно, та скоріше буде легше написати власний сервіс.

Чесно посміхнули повідомлення)
Існує два варіанта реалізації, і обидна насправді дуже прості, перший дуже хороший, другий дуже погонний, тут я бачу розглядають лише другий (запис відео на стороні клієнта))

Якшо вам потрібне якісне професійне рішення, то другий варіант ми не розглядаємо. Але й перший має під варіанти що збільшує важкість реалізації, в залежності від ваших вимог та інтеграції в ваш проект.

Варіант з записом відео на стороні клієнта використовуючи API браузера, це дуже поганий варіант бо:
- Клієнт кожен раз має надавати дозвіл браузеру використовувати захват екрану на запис, що не зручно і може злякати користувача. Якщо це маркетинг/аналітичний модуль, то цей варіант очевидно не має місця на існування принципі)
- Підтримка браузерами цього API все ще на низькому рівні, в старих вона відсутня взагалі
- Ми змушуємо клієнта вести повноцінну трансляцію відео, що може бути для нього не можливо або не бажано, іза використання великого трафіку
- Ми навантажуємо свою систему великим трафіком, як мережеві драйвери так і базу даних де будуть зберігатися фрагменти відео, також використання процесора і оперативної пам'яті на обробку таких запитів.  Якщо потрібне якісне та стабільне рішення, то бажано зберігати в потоковому форматі HLS/DASH, бо не можливо гарантувати що у консультанта або клієнта не будуть мережеві затримки, або збоїв, або якщо інший консультант захоче підключитися до потоку в непередбачуваний момент. Це ще більше збільшить трафік, за рахунок ключових кадрів відео та надлишкових мета тегів. Також доведеться на сервері декодувати потоку в HLS/DASH.
Хоча до кожного пунктах існують методи оптимізації, картина в цілому не дуже) за одним винятком. Якщо це наприклад щось типу вебінарну, коли клієнт свідомо вимагає даний функціонал. Тоді ми можемо використати MediaDevices.getDisplayMedia + WebRTC - для передачі відео в реальному часі між пристроями клієнта та консультантів. Такий підхід може бути дуже ефективним та витримувати великі навантаження.

Кращий варіант збирати статичні дані (метрики) дій користувача, положення мишки/тач, кліки, скролл і так далі. І вже на основі цих даних збирати відео на сервері, а краще безпосередньо в браузері консультанта, щоб не навантажувати сервер.
Це ідеальне рішення тому що:
- Можливо реалізувати все те як при прямому запису відео.
- Як для клієнта так і для сервера, це дуже низки навантаження. Треба лише декілька біт в секунду порівняно з відео де мегабайти в секунду, або при максимальної оптимізації кілобайт. Навантаження за годину складе значно менше ніж завантаження самої сторінки.

За детальною консультацією звертайтеся в ЛС. Буду радий бути корисним:)

Взагалі то яндекс і використовує "твій другий варіант".

А "запис відео в реальному часі" це взагалі дно. Тут за таке і не писали ж ) Понятне діло що це тупо буде.

Просто потрібно відслідковувати курсор мишки, скроли і кліки. І також передавати розширення екрану користувача.

Ну наче всі за рекордер писали, хто прямо за MediaRecorder, хто пише за можливу проблему зберігання великих наборів даних, що вже свідчить про те що вирішення пішло не в те русло :) там ще на ставках теж прямо згадували MediaRecorderрдер:)
Ну і Ви теж сказали шо це дуже важка задача. Хоча вона насправді проста, але правда вимагає комплексних розумінь та інтеграції в існуючий проект. Але бюджет думаю достатньо виправданий.

Але Добре, підвищимо рівень складності :) Що робити якщо подія скасована викликом event.stopPropagation() або event.preventDefault() а нам треба реалізувати ізольований модуль який не буде конфліктувати з іншими та не використовувати звісно обгорток на події (хоча варіант цікавий) :)))

Я в js не пишу програми. Так що щодо цих функцій мало що можу сказати.

А по вашому зада ча легка? Просто приймати данні на сервер - легко. А обробити їх? Вивести все по умному, та різні діаграми, графіки.

Відповідь була перехоплювати подію на етапі захвату (подія йде з гори вниз і назад).  Рідкий кейс, але вона може бути перехоплена іншим обробником на етапі захвату та скасована. Тому насправді універсального рішення з коробки не існує :) можна запускати скрипт самим першим (в шапці), як рекомендують Гугл та і яндекс, але все одно ми не можемо в контексті ізольованого модуля гарантувати шо подія досягла цілі.
Тому були дискусії по темі таких яндекс метрик. А політики браузерів, точніше методів JS, по специфікації не можуть бути скасовані. Будь який метод написаний будь-коли буде працювати стабільно завжди. Наприклад навіть кастомний __proto__ який підтримують всі браузери, але не увійшов в офіційну специфікацію все же працює і все ще так само не рекомендований, і мало ймовірно що це колись зміниться:)
Але якщо ми пишімо під конкретний проект,  в цілому це не важко.