Как работи MousePlayer
Просто ръководство за архитектурата ни за проследяване, обработката на екранни резолюции на различни устройства и границите на системата.
1. Защо не използваме видеозапис
Често погрешно се смята, че инструментите за визуален анализ записват стандартни видеофайлове (като MP4 или WebM) от екрана на посетителя. Това би използвало огромен мрежов капацитет, би забавило значително сайта ви и би довело до размазан, нечетим текст.
Вместо това MousePlayer използва лека технология, наречена телеметрия на DOM снимки. Ето как работи в основата си:
Снимката като план
Когато посетител отвори страницата ви, скриптът ни прави текстов „план“ на HTML и стиловата ѝ структура. Записва къде са разположени елементите, без да копира изображенията или видеофайловете на страницата; при възпроизвеждане плейърът зарежда изображенията от оригиналния им адрес. Изключение са canvas елементите, чието съдържание се предава като изображение (вижте по-долу).
Координатна телеметрия
Докато потребителят взаимодейства, записваме поток от събития: позиции на мишката, дълбочина на превъртане, цели на кликванията и промени в размера на браузъра, както и промените по самата страница и според настройките — съобщения от конзолата, неуспешни или бавни заявки и измервания на времето за зареждане (Web Vitals). Движенията и кликванията са малки; снимките и промените по страницата могат да бъдат значително по-големи според страницата и се предават компресирани.
Възпроизвеждане в театрален режим
Когато гледате сесия в таблото си, плейърът пресъздава страницата по записания план и движи виртуален курсор върху нея в реално време, като текстът остава напълно ясен.
Създаден да бъде лек: скриптът се зарежда асинхронно и предава малки числови данни вместо видео, което ограничава собственото му натоварване. Какво означава това за вашите Core Web Vitals зависи от страниците, хостинга и мрежата на посетителя, затова измерете на собствения си сайт, вместо да приемате число от нас. Не се гарантира конкретна скорост на зареждане – вижте раздел 20 от Условията за ползване.
2. Екранни резолюции & мобилни устройства
Днешните потребители разглеждат сайтове на всичко — от компактни смартфони до ултрашироки 4K монитори. Сайтовете автоматично преместват, сгъват и пренареждат оформлението си за различни ширини на екрана — концепция, известна като адаптивен уеб дизайн.
Как възпроизвеждаме точната видима област на посетителя
За да не изглежда възпроизвеждането изкривено, MousePlayer записва точните размери на видимата област на посетителя (напр. 390x844 за смартфон или 1920x1080 за монитор на компютър). Когато отворите плейъра в театрален режим, механизмът ни създава мащабирана изолирана среда, която точно отразява оригиналното съотношение на екрана на посетителя.
Екрани на компютри & лаптопи
На стандартни компютри записваме непрекъснатото движение на мишката и навигацията между раздели в една и съща браузърна сесия. Менютата, които се отварят при посочване, се появяват в записа, когато страницата променя документа си при това; чист CSS ефект при посочване не се вижда в документа и не се възпроизвежда в записа.
Смартфони & таблети
Сензорните екрани нямат курсор на мишка при посочване. MousePlayer се адаптира автоматично, като записва докосвания, превъртане с плъзгане и промени в ориентацията (портретна спрямо пейзажна).
Предизвикателството при преоразмеряване по време на сесия
Ако посетител завърти таблета си или промени размера на прозореца на браузъра на компютър по време на сесия, оформлението на сайта се променя динамично. MousePlayer улавя тези промени в размера на прозореца и плавно адаптира областта на възпроизвеждане в движение, за да запази контекста на взаимодействието.
3. Ограничения на системата & технически граници
За да зачита поверителността на потребителите, да запазва сигурността на браузъра и да обработва бързо данните, MousePlayer работи в определени технически граници:
| Граница на системата | Как MousePlayer я обработва |
|---|---|
| iFrames | iframe елементите със същия произход като страницата ви се записват заедно със съдържанието и взаимодействията в тях. Вградено съдържание от друг произход (напр. плейъри на YouTube, платежни формуляри на Stripe) не може да се записва отвътре заради правилата за сигурност на браузъра (политика за един и същ произход); в записа се показва като заместител и не се зарежда там. |
| Чувствителни полета за въвеждане (лични данни) | Полетата за пароли и плащане се маскират на устройството на посетителя при всяко ниво на маскиране, а пълното маскиране на всички въведени във формуляри данни е стандартно за всеки сайт. Виждате, че е имало писане, а не какво е написано. Има две ограничения: двете по-слаби нива на маскиране се разрешават само с писменото ни одобрение и маскирането никога не обхваща това, което собствената ви страница изписва в документа – страница за потвърждение с адрес е част от снимката. И двете са описани в Споразумението за обработване на данни. |
| Canvas & WebGL елементи | Съдържанието на canvas се записва като изображение: веднъж със снимката на страницата и отново при всяка промяна, най-много около веднъж в секунда и с ограничение на размера. Затова плавните анимации се показват като поредица от кадри. Не се предава изображение в маскирани области или за canvas елементи, съдържащи изображения от друг произход; WebGL съдържанието може да остане празно. |
| Уеб компоненти (Shadow DOM) | Отворените shadow корени се записват заедно със съдържанието им. Затворените shadow корени са недостъпни за скриптове; съдържанието им липсва в записа. |
| Пренос & хранилище на браузъра | Данните се изпращат по шифрована WebSocket връзка (HTTPS/WSS). Ако тя не може да бъде установена, например заради прокси, скриптът преминава към шифрован HTTP маршрут; много големите снимки на страници се качват отделно по HTTPS. MousePlayer не задава бисквитки; използва локалното хранилище и хранилището на сесията на браузъра във вашия сайт. |
| Периоди на AFK неактивност | Ако посетител остави раздела си отворен и се отдалечи за 20 минути, механизмът ни автоматично открива неактивността и съкращава неактивния промеждутък при възпроизвеждане, за да не губите време в гледане на неподвижни екрани. |