MousePlayer പ്രവർത്തിക്കുന്നത് എങ്ങനെ
ട്രാക്കിംഗ് ആർക്കിടെക്ചർ, ഉപകരണങ്ങളിലുടനീളമുള്ള സ്ക്രീൻ റെസല്യൂഷൻ കൈകാര്യം ചെയ്യൽ, സിസ്റ്റത്തിന്റെ പരിധികൾ എന്നിവയ്ക്കുള്ള ലളിതമായ മാർഗ്ഗനിർദ്ദേശം.
1. വീഡിയോ റെക്കോർഡിംഗ് ഉപയോഗിക്കാത്തതെന്തുകൊണ്ട്
ദൃശ്യ അനലിറ്റിക്സ് ഉപകരണങ്ങൾ സന്ദർശകന്റെ സ്ക്രീനിന്റെ സാധാരണ വീഡിയോ ഫയലുകൾ (MP4 അല്ലെങ്കിൽ WebM പോലുള്ളവ) റെക്കോർഡ് ചെയ്യുന്നു എന്നത് പൊതുവായ തെറ്റിദ്ധാരണയാണ്. അങ്ങനെ ചെയ്യുന്നത് വലിയ ബാൻഡ്‌വിഡ്ത്ത് ഉപയോഗിക്കുകയും സൈറ്റിന്റെ വേഗം ഗണ്യമായി കുറയ്ക്കുകയും മങ്ങിയ, വായിക്കാനാകാത്ത വാചകം സൃഷ്ടിക്കുകയും ചെയ്യും.
പകരം MousePlayer ഉപയോഗിക്കുന്നത് ഭാരം കുറഞ്ഞ സാങ്കേതികവിദ്യയായ DOM സ്നാപ്പ്ഷോട്ട് ടെലിമെട്രിയാണ്. അടിസ്ഥാനതലത്തിൽ പ്രവർത്തിക്കുന്നത് ഇങ്ങനെ:
രൂപരേഖാ സ്നാപ്പ്ഷോട്ട്
സന്ദർശകൻ പേജ് തുറക്കുമ്പോൾ HTML-ന്റെയും സ്റ്റൈലിംഗ് ഘടനയുടെയും വാചകരൂപത്തിലുള്ള “രൂപരേഖ” ഞങ്ങളുടെ സ്ക്രിപ്റ്റ് എടുക്കുന്നു. പേജിലെ ചിത്രങ്ങളോ വീഡിയോ ഫയലുകളോ പകർത്താതെ ഘടകങ്ങളുടെ സ്ഥാനം റെക്കോർഡ് ചെയ്യുന്നു; റീപ്ലേ സമയത്ത് യഥാർത്ഥ വിലാസത്തിൽനിന്ന് പ്ലെയർ ചിത്രങ്ങൾ ലോഡ് ചെയ്യും. കാൻവാസ് ഘടകങ്ങൾ അപവാദമാണ്; അവയുടെ ഉള്ളടക്കം ചിത്രമായി അയയ്ക്കും (താഴെ കാണുക).
കോർഡിനേറ്റ് ടെലിമെട്രി
ഉപയോക്താവ് ഇടപെടുമ്പോൾ ഇവന്റുകളുടെ ഒഴുക്ക് റെക്കോർഡ് ചെയ്യുന്നു: മൗസ് സ്ഥാനങ്ങൾ, സ്ക്രോൾ ആഴം, ക്ലിക്ക് ലക്ഷ്യങ്ങൾ, ബ്രൗസർ വലുപ്പമാറ്റങ്ങൾ, പേജിലെ മാറ്റങ്ങൾ, കൂടാതെ ക്രമീകരണങ്ങൾ അനുസരിച്ച് കൺസോൾ സന്ദേശങ്ങൾ, പരാജയപ്പെട്ടതോ മന്ദമായതോ ആയ അഭ്യർത്ഥനകൾ, ലോഡിംഗ് സമയ അളവുകൾ (Web Vitals). ചലനങ്ങളും ക്ലിക്കുകളും ചെറിയവയാണ്; പേജനുസരിച്ച് സ്നാപ്പ്ഷോട്ടുകളും മാറ്റങ്ങളും ഗണ്യമായി വലുതാകാം; ചുരുക്കിയാണ് അയയ്ക്കുന്നത്.
Theatre റീപ്ലേ
ഡാഷ്ബോർഡിൽ സെഷൻ കാണുമ്പോൾ റെക്കോർഡ് ചെയ്ത രൂപരേഖ ഉപയോഗിച്ച് പ്ലെയർ പേജ് പുനഃസൃഷ്ടിക്കുകയും വിർച്വൽ കഴ്സർ തത്സമയം നീക്കുകയും ചെയ്യുന്നു; വാചകത്തിന്റെ വ്യക്തത നിലനിൽക്കും.
ഭാരം കുറഞ്ഞതായി തുടരാൻ നിർമ്മിച്ചത്: സ്ക്രിപ്റ്റ് അസിങ്ക്രണസായി ലോഡ് ചെയ്ത് വീഡിയോയ്ക്കുപകരം ചെറിയ സംഖ്യാ ഡാറ്റാ പോയിന്റുകൾ അയയ്ക്കുന്നു; സ്വന്തം ഭാരം കുറവായിരിക്കും. Core Web Vitals-നെ ഇത് എങ്ങനെ ബാധിക്കുമെന്നത് പേജുകളും ഹോസ്റ്റിംഗും സന്ദർശകന്റെ നെറ്റ്‌വർക്കും ആശ്രയിക്കുന്നു; അതിനാൽ ഞങ്ങളുടെ കണക്ക് വിശ്വസിക്കുന്നതിനുപകരം സ്വന്തം സൈറ്റിൽ അളക്കുക. പ്രത്യേക ലോഡിംഗ് വേഗം ഉറപ്പുനൽകുന്നില്ല – വകുപ്പ് 20 കാണുക: സേവന നിബന്ധനകൾ.
2. സ്ക്രീൻ റെസല്യൂഷനുകളും & മൊബൈൽ ഉപകരണങ്ങളും
ചെറിയ സ്മാർട്ട്ഫോണുകൾ മുതൽ അതിവിശാലമായ 4K ഡെസ്ക്ടോപ്പ് മോണിറ്ററുകൾ വരെ ഉപയോക്താക്കൾ ഉപയോഗിക്കുന്നു. വ്യത്യസ്ത സ്ക്രീൻ വീതികൾക്ക് അനുയോജ്യമാകാൻ വെബ്സൈറ്റുകൾ ലേഔട്ടുകൾ സ്വയം മാറ്റുകയും മടക്കുകയും പുനഃക്രമീകരിക്കുകയും ചെയ്യുന്നു—ഇതാണ് റെസ്പോൺസീവ് വെബ് ഡിസൈൻ.
സന്ദർശകന്റെ കൃത്യമായ വ്യൂപോർട്ടുമായി പൊരുത്തപ്പെടുത്തുന്നത് എങ്ങനെ
റീപ്ലേ വികലമായി കാണാതിരിക്കാൻ സന്ദർശകന്റെ കൃത്യമായ വ്യൂപോർട്ട് അളവുകൾ MousePlayer റെക്കോർഡ് ചെയ്യുന്നു (ഉദാ., 390x844 സ്മാർട്ട്ഫോണിന്, അല്ലെങ്കിൽ 1920x1080 ഡെസ്ക്ടോപ്പ് മോണിറ്ററിന്). Theatre പ്ലെയർ തുറക്കുമ്പോൾ സന്ദർശകന്റെ യഥാർത്ഥ സ്ക്രീൻ അനുപാതം കൃത്യമായി പ്രതിഫലിപ്പിക്കുന്ന ചുരുക്കിയ സാൻഡ്ബോക്സ് എഞ്ചിൻ സൃഷ്ടിക്കുന്നു.
ഡെസ്ക്ടോപ്പ് & ലാപ്ടോപ്പ് സ്ക്രീനുകൾ
സാധാരണ കമ്പ്യൂട്ടറുകളിൽ ഒരേ ബ്രൗസർ സെഷനിലെ തുടർച്ചയായ മൗസ് ചലനവും നിരവധി ടാബുകളിലെ സഞ്ചാരവും റെക്കോർഡ് ചെയ്യുന്നു. ഹോവറിൽ തുറക്കുന്ന മെനു പേജിന്റെ ഡോക്യുമെന്റ് മാറ്റുന്നുണ്ടെങ്കിൽ റീപ്ലേയിൽ പ്രത്യക്ഷപ്പെടും; CSS ഹോവർ പ്രഭാവം മാത്രം ഡോക്യുമെന്റിൽ ദൃശ്യമല്ലാത്തതിനാൽ റീപ്ലേയിൽ പുനഃസൃഷ്ടിക്കില്ല.
സ്മാർട്ട്ഫോണുകൾ & ടാബ്‌ലെറ്റുകൾ
ടച്ച് സ്ക്രീനുകളിൽ ഹോവർ ചെയ്യുന്ന മൗസ് കഴ്സർ ഇല്ല. ടാപ്പ് ചലനങ്ങളും സ്വൈപ്പ് സ്ക്രോളിംഗും ദിശാമാറ്റങ്ങളും (നേരെ vs. കുറുകെ) റെക്കോർഡ് ചെയ്ത് MousePlayer സ്വയം പൊരുത്തപ്പെടുന്നു.
സെഷനിടയിലെ വലുപ്പമാറ്റത്തിന്റെ വെല്ലുവിളി
സന്ദർശകൻ സെഷനിടെ ടാബ്‌ലെറ്റ് തിരിക്കുകയോ ഡെസ്ക്ടോപ്പ് ബ്രൗസർ ജാലകത്തിന്റെ വലുപ്പം മാറ്റുകയോ ചെയ്താൽ ലേഔട്ട് ചലനാത്മകമായി മാറും. MousePlayer ഈ വലുപ്പമാറ്റ ഇവന്റുകൾ റെക്കോർഡ് ചെയ്ത് പ്ലേബാക്ക് കാൻവാസ് തത്സമയം സുഗമമായി ക്രമീകരിക്കുന്നു; ഇടപെടലിന്റെ സന്ദർഭം നിലനിർത്തുന്നു.
3. സിസ്റ്റം പരിധികളും & സാങ്കേതിക അതിരുകളും
ഉപയോക്തൃ സ്വകാര്യത മാനിക്കാനും ബ്രൗസർ സുരക്ഷ നിലനിർത്താനും ഡാറ്റ പ്രോസസ്സിംഗ് വേഗത്തിൽ തുടരാനും നിശ്ചിത സാങ്കേതിക അതിരുകൾക്കുള്ളിലാണ് MousePlayer പ്രവർത്തിക്കുന്നത്:
| സിസ്റ്റം പരിധി | MousePlayer കൈകാര്യം ചെയ്യുന്നത് |
|---|---|
| iFrames | നിങ്ങളുടെ പേജിന്റെ അതേ ഉറവിടമുള്ള iframe-കൾ അവയുടെ ഉള്ളടക്കത്തോടും അതിലെ ഇടപെടലുകളോടും കൂടി റെക്കോർഡ് ചെയ്യും. മറ്റ് ഉറവിടങ്ങളിലെ ഉൾച്ചേർത്ത ഉള്ളടക്കം (ഉദാ., YouTube പ്ലെയറുകൾ, Stripe പണമടയ്ക്കൽ ഫോമുകൾ) ബ്രൗസർ സുരക്ഷാനയങ്ങൾ (Same-Origin Policy) കാരണം ആന്തരികമായി റെക്കോർഡ് ചെയ്യാനാകില്ല; റീപ്ലേയിൽ പ്ലേസ്ഹോൾഡറായി പ്രത്യക്ഷപ്പെടും, അവിടെ ലോഡ് ചെയ്യില്ല. |
| സംവേദനക്ഷമമായ ഇൻപുട്ട് ഫീൽഡുകൾ (PII) | എല്ലാ മാസ്കിംഗ് നിലയിലും പാസ്‌വേഡ്, പണമടയ്ക്കൽ ഫീൽഡുകൾ സന്ദർശകന്റെ ഉപകരണത്തിൽ മാസ്ക് ചെയ്യും; ഓരോ സൈറ്റിനും എല്ലാ ഫോം ഇൻപുട്ടിന്റെയും പൂർണ്ണ മാസ്കിംഗാണ് സ്വതവേയുള്ളത്. ടൈപ്പ് ചെയ്തുവെന്ന് കാണാം, എന്താണ് ടൈപ്പ് ചെയ്തതെന്ന് കാണില്ല. രണ്ട് പരിധികളുണ്ട്: ദുർബലമായ രണ്ട് മാസ്കിംഗ് നിലകൾ ഞങ്ങളുടെ എഴുത്തുപരമായ അംഗീകാരത്തോടെ മാത്രം പ്രവർത്തനക്ഷമമാക്കും; നിങ്ങളുടെ പേജ് ഡോക്യുമെന്റിൽ അച്ചടിക്കുന്നതിലേക്ക് മാസ്കിംഗ് എത്തില്ല – വിലാസം കാണിക്കുന്ന സ്ഥിരീകരണ പേജ് സ്നാപ്പ്ഷോട്ടിന്റെ ഭാഗമാണ്. രണ്ടും വിശദീകരിച്ചിരിക്കുന്നത്: DPA. |
| കാൻവാസ് & WebGL ഘടകങ്ങൾ | കാൻവാസ് ഉള്ളടക്കം ചിത്രമായി റെക്കോർഡ് ചെയ്യും: പേജ് സ്നാപ്പ്ഷോട്ടിനൊപ്പം ഒരിക്കലും തുടർന്ന് മാറുമ്പോഴെല്ലാമും, പരമാവധി ഏകദേശം സെക്കൻഡിൽ ഒരിക്കൽ, വലുപ്പപരിധിയോടെ. അതിനാൽ സുഗമമായ ആനിമേഷനുകൾ ഫ്രെയിമുകളുടെ പരമ്പരയായി കാണും. മാസ്ക് ചെയ്ത ഭാഗങ്ങളിലും മറ്റ് ഉറവിടങ്ങളിലെ ചിത്രങ്ങൾ ഉൾപ്പെട്ട കാൻവാസ് ഘടകങ്ങൾക്കും ചിത്രം അയയ്ക്കില്ല; WebGL ഉള്ളടക്കം ശൂന്യമായി തുടരാം. |
| വെബ് ഘടകങ്ങൾ (Shadow DOM) | തുറന്ന ഷാഡോ റൂട്ടുകൾ ഉള്ളടക്കത്തോടൊപ്പം റെക്കോർഡ് ചെയ്യും. അടച്ച ഷാഡോ റൂട്ടുകളിൽ സ്ക്രിപ്റ്റുകൾക്ക് പ്രവേശിക്കാനാകില്ല; അവയുടെ ഉള്ളടക്കം റീപ്ലേയിൽ ഉണ്ടാകില്ല. |
| കൈമാറ്റവും & ബ്രൗസർ സംഭരണവും | എൻക്രിപ്റ്റ് ചെയ്ത WebSocket കണക്ഷനിലൂടെ (HTTPS/WSS) ഡാറ്റ അയയ്ക്കുന്നു. ഉദാഹരണത്തിന് പ്രോക്സി കാരണം അത് സ്ഥാപിക്കാനായില്ലെങ്കിൽ സ്ക്രിപ്റ്റ് എൻക്രിപ്റ്റ് ചെയ്ത HTTP വഴിയിലേക്ക് മാറും; വളരെ വലിയ പേജ് സ്നാപ്പ്ഷോട്ടുകൾ HTTPS വഴി വേറിട്ട് അപ്‌ലോഡ് ചെയ്യും. MousePlayer കുക്കികൾ സജ്ജമാക്കുന്നില്ല; നിങ്ങളുടെ സൈറ്റിലെ ബ്രൗസറിന്റെ ലോക്കൽ സ്റ്റോറേജും സെഷൻ സ്റ്റോറേജും ഉപയോഗിക്കുന്നു. |
| നിഷ്ക്രിയ AFK കാലയളവുകൾ | സന്ദർശകൻ ടാബ് തുറന്നുവച്ച് 20 മിനിറ്റ് മാറിനിന്നാൽ എഞ്ചിൻ സ്വയം നിഷ്ക്രിയത്വം തിരിച്ചറിഞ്ഞ് റീപ്ലേയിലെ ആ ഇടവേള ചുരുക്കും; നിശ്ചല സ്ക്രീനുകൾ കണ്ട് സമയം നഷ്ടമാകില്ല. |