Запись экрана посетителей сайта

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

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

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

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

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

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

у мене 7600грн

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

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

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 в зависимости от вашего опыта и сложности проекта.

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

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

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

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