Како работи 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) не може да се снима внатрешно поради безбедносните правила на прелистувачот (Same-Origin Policy); се појавува како резервирано место во репродукцијата и таму не се вчитува. |
| Чувствителни полиња за внес (лични податоци) | Полињата за лозинки и плаќање се маскираат на уредот на посетителот на секое ниво на маскирање, а целосното маскирање на сите внесови во формулари е стандардно за секоја веб-локација. Гледате дека се пишувало, а не што е напишано. Важат две ограничувања: двете послаби нивоа на маскирање се овозможуваат само со наше писмено одобрение, а маскирањето никогаш не го опфаќа она што самата страница го печати во документот – страница за потврда што покажува адреса е дел од моменталната снимка. Двете се наведени во DPA. |
| Елементи Canvas & WebGL | Содржината на canvas се снима како слика: еднаш со моменталната снимка на страницата и повторно при секоја измена, најмногу околу еднаш во секунда и со ограничување на големината. Затоа мазните анимации се појавуваат како низа од кадри. Не се пренесува слика во маскирани области или за canvas-елементи што содржат слики од друго потекло; содржината на WebGL може да остане празна. |
| Веб-компоненти (Shadow DOM) | Отворените shadow roots се снимаат заедно со содржината. Затворените shadow roots не се достапни за скрипти; нивната содржина недостасува во репродукцијата. |
| Пренос & складиште на прелистувачот | Податоците се испраќаат преку шифрирана WebSocket-врска (HTTPS/WSS). Ако не може да се воспостави, на пример поради прокси, скриптата преминува на шифрирана HTTP-врска; многу големите моментални снимки на страницата се поставуваат одделно преку HTTPS. MousePlayer не поставува колачиња; ги користи локалното складиште и складиштето на сесијата на прелистувачот на вашата веб-локација. |
| Неактивни периоди AFK | Ако посетителот ја остави картичката отворена и замине на 20 минути, нашиот механизам автоматски ја открива неактивноста и го компресира неактивниот интервал при репродукцијата за да не губите време гледајќи неподвижни екрани. |