MousePlayer যেভাবে কাজ করে
আমাদের ট্র্যাকিংয়ের গঠন, বিভিন্ন ডিভাইসে স্ক্রিনের রেজল্যুশন সামলানো এবং সিস্টেমের সীমা নিয়ে সহজ নির্দেশিকা।
1. আমরা কেন ভিডিও রেকর্ড করি না
সাধারণ একটি ভুল ধারণা হলো দৃশ্যমান বিশ্লেষণের সরঞ্জাম দর্শকের স্ক্রিনের প্রচলিত ভিডিও ফাইল (যেমন MP4 বা WebM) রেকর্ড করে। তা করলে বিপুল ব্যান্ডউইডথ লাগত, আপনার ওয়েবসাইট অনেক ধীর হতো এবং লেখা অস্পষ্ট ও অপাঠ্য হতো।
এর বদলে MousePlayer হালকা একটি প্রযুক্তি ব্যবহার করে, যার নাম DOM স্ন্যাপশট টেলিমেট্রি। মূলত যেভাবে কাজ করে:
কাঠামোর স্ন্যাপশট
দর্শক আপনার পৃষ্ঠা খুললে আমাদের স্ক্রিপ্ট HTML ও স্টাইলের কাঠামোর লেখাভিত্তিক নকশা নেয়। পৃষ্ঠার ছবি বা ভিডিও ফাইল কপি না করে উপাদান কোথায় আছে রেকর্ড করে; রিপ্লের সময় প্লেয়ার ছবি মূল ঠিকানা থেকে লোড করে। ব্যতিক্রম হলো canvas উপাদান, যার বিষয়বস্তু ছবি হিসেবে পাঠানো হয় (নিচে দেখুন)।
স্থানাঙ্কের টেলিমেট্রি
ব্যবহারকারী মিথস্ক্রিয়া করলে আমরা ইভেন্টের ধারা রেকর্ড করি: মাউসের অবস্থান, স্ক্রলের গভীরতা, ক্লিকের লক্ষ্য ও ব্রাউজারের আকার বদল; সঙ্গে পৃষ্ঠার পরিবর্তন এবং সেটিংস অনুযায়ী কনসোল বার্তা, ব্যর্থ বা ধীর রিকোয়েস্ট ও লোডের সময়ের পরিমাপ (Web Vitals)। নড়াচড়া ও ক্লিকের তথ্য ছোট; পৃষ্ঠা অনুযায়ী স্ন্যাপশট ও পরিবর্তনের তথ্য অনেক বড় হতে পারে এবং সংকুচিত করে পাঠানো হয়।
Theatre রিপ্লে
ড্যাশবোর্ডে সেশন দেখার সময় আমাদের প্লেয়ার রেকর্ড করা নকশা দিয়ে পৃষ্ঠা আবার তৈরি করে এবং তার ওপর ভার্চুয়াল পয়েন্টার রিয়েল-টাইমে সরায়, লেখা একেবারে স্পষ্ট রেখে।
হালকা রাখার জন্য তৈরি: স্ক্রিপ্ট অ্যাসিঙ্ক্রোনাসভাবে লোড হয় এবং ভিডিওর বদলে ছোট সংখ্যাভিত্তিক তথ্য পাঠায়, তাই তার নিজের প্রভাব কম থাকে। আপনার Core Web Vitals-এ এর অর্থ কী তা পৃষ্ঠা, হোস্টিং ও দর্শকের নেটওয়ার্কের ওপর নির্ভর করে; তাই আমাদের কোনো সংখ্যা ধরে না নিয়ে নিজের সাইটে মাপুন। নির্দিষ্ট কোনো লোডের গতির নিশ্চয়তা নেই – দেখুন ধারা 20, পরিষেবার শর্তাবলিতে।
2. স্ক্রিনের রেজল্যুশন & মোবাইল ডিভাইস সামলানো
আজ ব্যবহারকারীরা ছোট স্মার্টফোন থেকে অতি প্রশস্ত 4K ডেস্কটপ মনিটর পর্যন্ত সবকিছুতে ব্রাউজ করেন। স্ক্রিনের ভিন্ন প্রস্থে খাপ খাওয়াতে ওয়েবসাইট স্বয়ংক্রিয়ভাবে বিন্যাস সরায়, ভাঁজ করে ও পুনর্বিন্যাস করে — এই ধারণার নাম রেসপনসিভ ওয়েব ডিজাইন।
দর্শকের দৃশ্যমান এলাকা হুবহু মেলাই যেভাবে
রিপ্লে যেন বিকৃত না দেখায়, সে জন্য MousePlayer দর্শকের দৃশ্যমান এলাকার সঠিক মাপ রেকর্ড করে (যেমন 390x844 স্মার্টফোনে অথবা 1920x1080 ডেস্কটপ মনিটরে)। Theatre প্লেয়ার খুললে আমাদের ইঞ্জিন মাপ অনুযায়ী ছোট করা স্যান্ডবক্স তৈরি করে, যা দর্শকের মূল স্ক্রিনের অনুপাত হুবহু মেলায়।
ডেস্কটপ & ল্যাপটপ স্ক্রিন
সাধারণ কম্পিউটারে একই ব্রাউজার সেশনের মধ্যে চলমান মাউসের নড়াচড়া ও একাধিক ট্যাবে যাতায়াত রেকর্ড করি। হোভার করলে খোলা মেনু রিপ্লেতে দেখা যায় যদি পৃষ্ঠা তখন ডকুমেন্ট বদলায়; শুধু CSS-এর হোভার প্রভাব ডকুমেন্টে দেখা যায় না এবং রিপ্লেতে তৈরি হয় না।
স্মার্টফোন & ট্যাবলেট
টাচস্ক্রিনে ভেসে থাকা মাউস পয়েন্টার নেই। MousePlayer স্বয়ংক্রিয়ভাবে ট্যাপ, সোয়াইপ করে স্ক্রল ও দিক বদল (লম্বা বনাম আড়াআড়ি) রেকর্ড করে খাপ খাওয়ায়।
সেশনের মাঝখানে আকার বদলানোর চ্যালেঞ্জ
দর্শক সেশনের মাঝে ট্যাবলেট ঘোরালে বা ডেস্কটপ ব্রাউজার উইন্ডোর আকার বদলালে ওয়েবসাইটের বিন্যাস তাৎক্ষণিকভাবে বদলায়। MousePlayer এই আকার বদলের ইভেন্ট রেকর্ড করে এবং রিপ্লের ক্যানভাস সঙ্গে সঙ্গে নির্বিঘ্নে সামঞ্জস্য করে, যাতে মিথস্ক্রিয়ার প্রেক্ষাপট বজায় থাকে।
3. সিস্টেমের সীমা & প্রযুক্তিগত সীমানা
ব্যবহারকারীর গোপনীয়তা, ব্রাউজারের নিরাপত্তা ও দ্রুত ডেটা প্রক্রিয়াকরণ বজায় রাখতে MousePlayer নির্ধারিত প্রযুক্তিগত সীমার মধ্যে কাজ করে:
| সিস্টেমের সীমা | MousePlayer যেভাবে সামলায় |
|---|---|
| iFrames | আপনার পৃষ্ঠার একই উৎসের iframe-এর বিষয়বস্তু ও ভেতরের মিথস্ক্রিয়াও রেকর্ড হয়। অন্য উৎসের এমবেড করা বিষয়বস্তু (যেমন YouTube প্লেয়ার, Stripe-এর অর্থপ্রদানের ফর্ম) ব্রাউজারের নিরাপত্তা নীতির কারণে ভেতর থেকে রেকর্ড করা যায় না (Same-Origin Policy); রিপ্লেতে জায়গা ধরে রাখা উপাদান হিসেবে দেখায় এবং সেখানে লোড হয় না। |
| সংবেদনশীল ইনপুটের ঘর (PII) | প্রতিটি মাস্কিং স্তরে দর্শকের ডিভাইসেই পাসওয়ার্ড ও অর্থপ্রদানের ঘর মাস্ক হয়, এবং প্রতিটি ওয়েব প্রপার্টিতে সব ফর্ম ইনপুট পুরোপুরি মাস্ক করা ডিফল্ট। টাইপ করা হয়েছে দেখা যায়, কী লেখা হয়েছে তা নয়। দুটি সীমা প্রযোজ্য: দুর্বল দুটি মাস্কিং স্তর শুধু আমাদের লিখিত অনুমতিতে চালু হয়, এবং আপনার পৃষ্ঠা নিজে ডকুমেন্টে যা দেখায় তা মাস্কিংয়ের আওতায় আসে না – ঠিকানা দেখানো নিশ্চিতকরণ পৃষ্ঠা স্ন্যাপশটের অংশ। দুটিই ব্যাখ্যা করা আছে DPA-তে। |
| Canvas & WebGL উপাদান | canvas-এর বিষয়বস্তু ছবি হিসেবে রেকর্ড হয়: প্রথমে পৃষ্ঠার স্ন্যাপশটের সঙ্গে, এরপর বদলালেই, সর্বোচ্চ প্রায় সেকেন্ডে একবার ও আকারের সীমাসহ। তাই মসৃণ অ্যানিমেশন ফ্রেমের ধারা হিসেবে দেখায়। মাস্ক করা এলাকায় বা অন্য উৎসের ছবি থাকা canvas-এ কোনো ছবি পাঠানো হয় না; WebGL বিষয়বস্তু খালি থাকতে পারে। |
| Web Components (Shadow DOM) | খোলা shadow root-এর বিষয়বস্তুও রেকর্ড হয়। বন্ধ shadow root-এ স্ক্রিপ্ট প্রবেশ করতে পারে না; তার বিষয়বস্তু রিপ্লেতে থাকে না। |
| পরিবহন & ব্রাউজার স্টোরেজ | এনক্রিপ্ট করা WebSocket সংযোগে (HTTPS/WSS) ডেটা পাঠানো হয়। সেটি স্থাপন করা না গেলে, যেমন প্রক্সির কারণে, স্ক্রিপ্ট বিকল্প এনক্রিপ্ট করা HTTP পথ ব্যবহার করে; খুব বড় পৃষ্ঠার স্ন্যাপশট আলাদাভাবে HTTPS দিয়ে আপলোড হয়। MousePlayer কুকি বসায় না; আপনার সাইটে ব্রাউজারের local storage ও session storage ব্যবহার করে। |
| নিষ্ক্রিয় AFK সময় | দর্শক ট্যাব খোলা রেখে 20 মিনিট চলে গেলে আমাদের ইঞ্জিন স্বয়ংক্রিয়ভাবে নিষ্ক্রিয়তা শনাক্ত করে রিপ্লেতে ফাঁকা সময় সংকুচিত করে, যাতে স্থির স্ক্রিন দেখে সময় নষ্ট না হয়। |