როგორ მუშაობს 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 |
|---|---|
| iFrame-ები | თქვენი გვერდის იმავე წარმომავლობის iframe-ები შიგთავსითა და შიდა ურთიერთქმედებით იწერება. სხვა წარმომავლობის ჩასმული შიგთავსი (მაგ., YouTube პლეერი ან Stripe-ის გადახდის ფორმა) ბრაუზერის უსაფრთხოების წესების (Same-Origin Policy) გამო შიგნიდან ვერ ჩაიწერება; დაკვრაში ის ადგილის შემავსებლად ჩანს და არ იტვირთება. |
| მგრძნობიარე შეყვანის ველები (PII) | პაროლისა და გადახდის ველები ვიზიტორის მოწყობილობაზე ყველა დონეზე ინიღბება; ყოველი რესურსისთვის ფორმის სრული შენიღბვა ნაგულისხმევია. ხედავთ აკრეფის ფაქტს და არა ტექსტს. ორი შეზღუდვაა: ორი სუსტი დონე მხოლოდ ჩვენი წერილობითი ნებართვით ირთვება, შენიღბვა კი ვერ ეხება იმას, რასაც თქვენი გვერდი თავად დოკუმენტში ბეჭდავს – მისამართის შემცველი დასტურის გვერდი სურათის ნაწილია. ორივე აღწერილია დოკუმენტში DPA. |
| Canvas & WebGL ელემენტები | Canvas-ის შიგთავსი სურათად იწერება: ერთხელ გვერდის სურათთან და შემდეგ ყოველი ცვლილებისას, მაქსიმუმ დაახლოებით წამში ერთხელ და ზომის ლიმიტით. ამიტომ გლუვი ანიმაციები კადრების მიმდევრობად ჩანს. შენიღბულ არეებში ან სხვა წარმომავლობის სურათის შემცველ canvas-ში სურათი არ გადაიცემა; WebGL შეიძლება ცარიელი დარჩეს. |
| ვებკომპონენტები (Shadow DOM) | ღია shadow root-ები შიგთავსთან ერთად იწერება. დახურული shadow root-ები სკრიპტებისთვის მიუწვდომელია; დაკვრაში მათი შიგთავსი აკლია. |
| ტრანსპორტი & ბრაუზერის საცავი | მონაცემები დაშიფრული WebSocket კავშირით (HTTPS/WSS) იგზავნება. თუ ვერ დამყარდა, მაგალითად პროქსის გამო, სკრიპტი დაშიფრულ HTTP გზაზე გადადის; ძალიან დიდი გვერდის სურათები ცალკე HTTPS-ით იტვირთება. MousePlayer ქუქიებს არ ქმნის; ის თქვენს საიტზე ბრაუზერის local storage-სა და session storage-ს იყენებს. |
| უქმი AFK პერიოდები | თუ ვიზიტორი ჩანართს ღიას დატოვებს და 20 წუთით წავა, ძრავა უქმობას ავტომატურად ამოიცნობს და დაკვრისას შესვენებას შეკუმშავს, რათა უძრავ ეკრანებზე დრო არ დაკარგოთ. |