Ինչպես է աշխատում MousePlayer-ը

Պարզ ուղեցույց մեր հետևման ճարտարապետության, տարբեր սարքերում էկրանի լուծաչափերի մշակման և համակարգի սահմանների մասին։

1. Ինչու չենք օգտագործում տեսագրում

Տարածված թյուր կարծիք է, թե տեսողական վերլուծության գործիքները գրանցում են այցելուի էկրանի սովորական տեսանյութեր՝ MP4 կամ WebM ֆայլեր։ Դա կծախսեր հսկայական թողունակություն, խիստ կդանդաղեցներ ձեր կայքը և տեքստը կդարձներ աղոտ ու անընթեռնելի։

Փոխարենը MousePlayer-ն օգտագործում է թեթև տեխնոլոգիա՝ DOM պատկերների հեռաչափություն։ Ահա դրա հիմնական աշխատանքը՝

Կառուցվածքի պատկերը

Երբ այցելուն բացում է ձեր էջը, մեր սկրիպտը ստեղծում է HTML-ի և ոճավորման կառուցվածքի տեքստային «նախագիծը»։ Այն գրանցում է տարրերի տեղերը՝ առանց էջի պատկերներն ու տեսանյութերը պատճենելու. դիտման ընթացքում նվագարկիչը պատկերները բեռնում է սկզբնական հասցեից։ Բացառությունը canvas տարրերն են, որոնց բովանդակությունը փոխանցվում է որպես պատկեր՝ տես ստորև։

Կոորդինատների հեռաչափություն

Օգտատիրոջ փոխազդեցության ընթացքում գրանցում ենք իրադարձությունների հոսք՝ մկնիկի դիրքեր, ոլորման խորություն, սեղմման թիրախներ ու դիտարկիչի չափափոխում, ինչպես նաև էջի փոփոխություններ և, ըստ կարգավորումների, վահանակի հաղորդագրություններ, ձախողված կամ դանդաղ հարցումներ ու բեռնման ժամանակի չափումներ՝ Web Vitals։ Շարժումներն ու սեղմումները փոքր են. էջի պատկերներն ու փոփոխությունները, ըստ էջի, կարող են շատ ավելի ծավալուն լինել և փոխանցվում են սեղմված։

Դիտում Թատրոնի ռեժիմում

Երբ վահանակում դիտում եք աշխատաշրջանը, մեր նվագարկիչը գրանցված կառուցվածքով վերաստեղծում է էջը և դրա վրայով իրական ժամանակում շարժում վիրտուալ կուրսորը՝ տեքստը պահելով հստակ։

Նախագծված է թեթև մնալու համար՝ սկրիպտը բեռնվում է ասինխրոն և տեսանյութի փոխարեն փոխանցում փոքր թվային կետեր՝ իր ազդեցությունը փոքր պահելով։ Ձեր Core Web Vitals-ի վրա ազդեցությունը կախված է էջերից, հոսթինգից ու այցելուի ցանցից, ուստի չափեք այն ձեր կայքում՝ մեր թվին վստահելու փոխարեն։ Բեռնման որոշակի արագություն չի երաշխավորվում – տես Օգտագործման պայմանների20-րդ բաժինը։

2. Էկրանի լուծաչափերի & շարժական սարքերի մշակում

Այսօրվա օգտատերերը կայքերը դիտում են թե՛ փոքր սմարթֆոններով, թե՛ գերլայն 4K մոնիտորներով։ Կայքերն ինքնաբերաբար տեղաշարժում, ծալում ու վերադասավորում են դասավորությունը՝ էկրանի տարբեր լայնություններին հարմարվելու համար. սա կոչվում է հարմարվող վեբ դիզայն։

Ինչպես ենք վերարտադրում այցելուի ճշգրիտ տեսադաշտը

Որպեսզի ձայնագրությունը խեղաթյուրված չերևա, MousePlayer-ը գրանցում է այցելուի տեսադաշտի ճշգրիտ չափերը, օրինակ՝ 390x844 սմարթֆոնի համար կամ 1920x1080 համակարգչի մոնիտորի համար։ Երբ բացում եք Թատրոնի նվագարկիչը, մեր շարժիչը ստեղծում է մասշտաբավորված մեկուսացված միջավայր՝ ճշգրիտ պահպանելով այցելուի սկզբնական էկրանի համամասնությունը։

Սեղանի համակարգիչներ & նոութբուքեր

Սովորական համակարգիչներում գրանցում ենք մկնիկի շարունակական շարժումն ու միևնույն դիտարկիչի աշխատաշրջանի բազմակի ներդիրների նավարկումը։ Մկնիկը պահելիս բացվող ընտրացանկերը դիտման մեջ երևում են, եթե էջն այդ ընթացքում փոխում է փաստաթուղթը. միայն CSS-ով hover ազդեցությունը փաստաթղթում տեսանելի չէ և դիտման մեջ չի վերարտադրվում։

Սմարթֆոններ & պլանշետներ

Սենսորային էկրանները կախված մկնիկի կուրսոր չունեն։ MousePlayer-ն ինքնաբերաբար հարմարվում է՝ գրանցելով հպումները, սահեցմամբ ոլորումն ու ուղղության փոփոխությունները՝ ուղղահայաց կամ հորիզոնական։

Աշխատաշրջանի ընթացքում չափափոխման խնդիրը

Եթե այցելուն աշխատաշրջանի ընթացքում պտտում է պլանշետը կամ չափափոխում համակարգչի դիտարկիչի պատուհանը, կայքի դասավորությունը դինամիկ փոխվում է։ MousePlayer-ը գրանցում է պատուհանի չափափոխման իրադարձությունները և տեղում սահուն հարմարեցնում դիտման մակերեսը՝ պահպանելով փոխազդեցության համատեքստը։

3. Համակարգի սահմանափակումներ & տեխնիկական սահմաններ

Օգտատերերի գաղտնիությունը, դիտարկիչի անվտանգությունն ու տվյալների արագ մշակումը պահպանելու համար MousePlayer-ն աշխատում է սահմանված տեխնիկական սահմաններում՝

Համակարգի սահմանը Ինչպես է MousePlayer-ը մշակում այն
iFrames Ձեր էջի հետ նույն ծագմամբ iframe-ները գրանցվում են իրենց բովանդակությամբ և ներքին փոխազդեցությամբ։ Այլ ծագմամբ ներդրված բովանդակությունը, օրինակ՝ YouTube նվագարկիչները կամ Stripe վճարման ձևերը, չի կարող ներքին գրանցվել դիտարկիչի անվտանգության կանոնների՝ Same-Origin Policy-ի պատճառով. այն դիտման մեջ երևում է որպես տեղապահ և այնտեղ չի բեռնվում։
Զգայուն մուտքագրման դաշտեր (PII) Գաղտնաբառի ու վճարման դաշտերը քողարկվում են այցելուի սարքում՝ քողարկման յուրաքանչյուր մակարդակում, իսկ բոլոր ձևերի մուտքագրումների ամբողջական քողարկումը յուրաքանչյուր կայքի լռելյայն կարգավորումն է։ Տեսնում եք, որ մուտքագրում է եղել, բայց ոչ դրա բովանդակությունը։ Երկու սահման կա. ավելի թույլ երկու մակարդակները միացվում են միայն մեր գրավոր հաստատմամբ, իսկ քողարկումը երբեք չի ընդգրկում այն, ինչ ձեր էջն ինքն է տպում փաստաթղթում – հասցե ցուցադրող հաստատման էջը պատկերի մաս է։ Երկուսն էլ նկարագրված են Տվյալների մշակման համաձայնագրում։
Canvas & WebGL տարրեր Canvas-ի բովանդակությունը գրանցվում է որպես պատկեր՝ մեկ անգամ էջի պատկերի հետ, ապա ամեն փոփոխության ժամանակ, առավելագույնը մոտ մեկ անգամ վայրկյանում և չափի սահմանափակմամբ։ Ուստի սահուն անիմացիաները երևում են որպես կադրերի հաջորդականություն։ Քողարկված հատվածներում կամ այլ ծագմամբ պատկերներ պարունակող canvas տարրերի համար պատկեր չի փոխանցվում. WebGL բովանդակությունը կարող է դատարկ մնալ։
Web Components (Shadow DOM) Բաց shadow root-երը գրանցվում են իրենց բովանդակությամբ։ Փակ shadow root-երը սկրիպտներին հասանելի չեն. դրանց բովանդակությունը դիտման մեջ բացակայում է։
Փոխանցում & դիտարկիչի պահոց Տվյալներն ուղարկվում են գաղտնագրված WebSocket կապով՝ HTTPS/WSS։ Եթե այն չի հաստատվում, օրինակ՝ պրոքսիի պատճառով, սկրիպտն անցնում է գաղտնագրված HTTP ուղու. շատ մեծ էջերի պատկերներն առանձին են վերբեռնվում HTTPS-ով։ MousePlayer-ը cookie-ներ չի տեղադրում. այն օգտագործում է դիտարկիչի տեղային և աշխատաշրջանի պահոցը ձեր կայքում։
AFK պարապուրդի ժամանակահատվածներ Եթե այցելուն ներդիրը բաց է թողնում և հեռանում 20 րոպեով, մեր շարժիչն ինքնաբերաբար հայտնաբերում է անգործությունը և դիտման ընթացքում սեղմում պարապուրդը՝ ստատիկ էկրաններ դիտելու վրա ձեր ժամանակը չվատնելու համար։