Як працуе 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); у прайграванні замест яго заглушка, яно не загружаецца. |
| Адчувальныя палі ўводу (PII) | Паролі і плацежныя палі маскіруюцца на прыладзе наведвальніка пры кожным узроўні, а поўнае маскіраванне ўсяго ўводу — стандарт для кожнага рэсурсу. Вы бачыце факт уводу, а не тэкст. Ёсць дзве мяжы: слабейшыя ўзроўні ўключаюцца толькі з нашым пісьмовым дазволам, і маскіраванне не ахоплівае тое, што сама старонка выводзіць у дакумент – адрас на старонцы пацвярджэння ўваходзіць у здымак. Абедзве мяжы апісаны ў DPA. |
| Элементы Canvas & WebGL | Змесціва canvas запісваецца выявай: разам са здымкам старонкі, а затым пры зменах, прыкладна не часцей за раз у секунду і з лімітам памеру. Таму плаўная анімацыя выглядае як паслядоўнасць кадраў. У замаскіраваных абласцях або canvas з выявамі іншага паходжання выявы не перадаюцца; WebGL можа застацца пустым. |
| Вэб-кампаненты (Shadow DOM) | Адкрытыя shadow roots запісваюцца разам са змесцівам. Закрытыя недаступныя скрыптам; іх змесціва адсутнічае ў прайграванні. |
| Перадача & сховішча браўзера | Даныя адпраўляюцца праз шыфраванае злучэнне WebSocket (HTTPS/WSS). Калі яно немагчыма, напрыклад праз проксі, скрыпт пераходзіць на шыфраваны HTTP-маршрут; вельмі вялікія здымкі загружаюцца асобна праз HTTPS. MousePlayer не ўсталёўвае cookies; ён выкарыстоўвае лакальнае і сеансавае сховішча браўзера на вашым сайце. |
| Перыяды бяздзейнасці AFK | Калі наведвальнік пакідае ўкладку адкрытай і адыходзіць на 20 хвілін, рухавік аўтаматычна вызначае бяздзейнасць і сціскае паўзу пры прайграванні, каб вы не марнавалі час на нерухомыя экраны. |