प्रौद्योगिकी साझेदारी

अग्रभागस्य आँकडासंग्रहणं तथा आँकडानिवेदनम्

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

मूल पता

अन्त्येष्टिस्थानं किम् ?

वैज्ञानिकं नाम इवेण्ट् ट्रैकिंग् इति अस्ति, यत् मुख्यतया उपयोक्तृव्यवहारस्य अथवा व्यावसायिकप्रक्रियाणां कृते सम्बन्धितप्रौद्योगिकीनां, कार्यान्वयनप्रक्रियाणां च ग्रहणं, संसाधनं, प्रेषणं च केन्द्रीक्रियते
बिन्दुं दफनम् इति दत्तांशक्षेत्रे व्यावसायिकपदं, अन्तर्जालक्षेत्रे अपि सामान्यं नाम अस्ति ।

दफनबिन्दवः उत्पाददत्तांशविश्लेषणस्य आधारः भवन्ति तथा च सामान्यतया अनुशंसप्रणाल्याः प्रतिक्रियायै, उपयोक्तृव्यवहारस्य निगरानीयताविश्लेषणाय, नवीनकार्यस्य सांख्यिकीयविश्लेषणाय अथवा परिचालनक्रियाकलापप्रभावानाम् इत्यादीनां कृते उपयुज्यन्ते

एम्बेडिंग् बिन्दुषु द्वौ महत्त्वपूर्णौ अवधारणाौ स्तः : घटना (घटना) विशेषता (param) च ।

  • घटना: अनुप्रयोगे किं भवति, यथा उपयोक्तृक्रियाः, प्रणालीघटनानि, प्रणालीदोषाः वा । यथा, यदि भवान् उत्पादस्य शूटिंग् करोति तर्हि तस्मिन् निम्नलिखितघटनानि सन्ति: enter_page (पृष्ठं प्रविशतु), leave_page (पृष्ठं त्यजतु) ।
  • Param: उपयोक्तृखण्डस्य वर्णनार्थं परिभाषितं विशेषता, यथा भाषाप्राथमिकता अथवा भौगोलिकस्थानं । "Enter after-class exercise" इवेण्ट् उदाहरणरूपेण गृह्यताम् अस्मिन् निम्नलिखित इवेण्ट् एट्रिब्यूट्स् सन्ति: enter_from (कस्मात् पृष्ठात्), class_id (course id), इत्यादयः ।
  • Attribute value (value): एट्रिब्यूट् इत्यस्य आयामः अर्थात् व्यवहारस्य प्रवर्तनस्य समये विशिष्टः आयामः । यथा: enter_from: गृहं (गृहपृष्ठं), प्रणाली (प्रणाली) इत्यादयः ।

मुख्यधारा योजना

ट्रेसलेस दफन (पूर्ण दफन) उपयोक्तुः ब्राउजिंग् पृष्ठस्य, क्लिक् इत्यादीनां व्यवहाराणां निरीक्षणार्थं ब्राउजर् अथवा एपीपी इत्यस्य अन्तःनिर्मितनिरीक्षणपद्धतिं उपयुज्यते
अभावः : १.

  • दत्तांशः कोलाहलपूर्णः भवति, उपयोगी वा न वा इति न कृत्वा सङ्गृह्यते ।
  • दफनबिन्दून् अनुकूलितुं असमर्थः, निर्दिष्टानि घटनानि व्यावसायिकगुणानि च संग्रहीतुं असमर्थः
  • डीए कृते न्यूना सूचना उपलब्धा
    लाभ:
  • सरलप्रवेशः, प्रायः आक्रमणं नास्ति, अतिरिक्तविकासव्ययस्य आवश्यकता नास्ति
  • उपयोक्तृसञ्चालनव्यवहारस्य संग्रहः अतीव पूर्णः अस्ति तथा च प्रायः कोऽपि लोपः न क्रियते

कोड दफनबिन्दवः, अग्रभागविकासकाः कोडमध्ये निरीक्षणं संग्रहणं च अनुकूलितं कुर्वन्ति
अभावः : १.

  • कार्यभारः गुरुः, कोडः आक्रमणकारी, पश्चात् परिपालनं च असुविधाजनकम् ।
    लाभ:
  • बिन्दून् समीचीनतया दफनयितुं शक्नोति तथा च स्पष्टघटनापरिचयः भवति
  • विक्रेतुः गुणाः अतीव समृद्धाः सन्ति
  • दफनबिन्दुप्रवर्तनविधिः लचीलतया परिभाषितुं शक्यते
  • DA अधिकसुलभः सटीकः च अस्ति

दफनबिन्दुः SDK, SDK दफनबिन्दुनिवेदनार्थं अन्तरफलकं उजागरयति, विकासकाः च निगरानीयसंग्रहणप्रक्रियायाः विषये अनभिज्ञाः सन्ति, यथा कम्पनीयाः चायः
हानि : ना
लाभ:

  • व्यावसायिकविकासाय केवलं घटनापरिचयः, व्यावसायिकगुणाः इत्यादिषु ध्यानं दातव्यम्।
  • लेशरहितस्य दफनबिन्दुस्य, कोडदफनबिन्दुस्य च लाभं गृहीत्वा

सामान्यगुप्तगुण

सामान्यतः अग्रभागः पृष्ठपरिमाणानुसारं दफनबिन्दून् गणयति सामान्यघटनाविशेषताः निम्नलिखितरूपेण भवन्ति ।

गुणाःवर्णेतु
उइड्उपयोक्तृ-id, यदि उपयोक्ता प्रवेशं न कृतवान्, तर्हि विशिष्टं परिचय-id प्रत्यागच्छति
urlवर्तमानघटनाप्रवर्तकपृष्ठस्य URL
घटनासमयःयः समयमुद्रिका गुप्तबिन्दुं प्रेरितवान्
localTime इतिगुप्तबिन्दुं प्रेरितवान् उपयोक्तुः स्थानीयसमयः मानक YYYY=MM-DD HH:mm:ss प्रारूपेण व्यक्तः भवति, यत् पश्चात् प्रत्यक्षतारप्रश्नार्थं सुविधाजनकं भवति ।
device Typeवर्तमानकाले उपयोक्त्रा उपयुज्यमानस्य यन्त्रस्य प्रकारः, यथा apple, Samsung, chrome
deviceIdवर्तमानप्रयोक्त्रेण उपयुज्यमानं यन्त्र id
osType इतिसिस्टम् प्रकारः windows, macos, ios, android इत्यत्र प्रविशति
osVersion इतिप्रणाली संस्करणम्
appVersion इतिअनुप्रयोगसंस्करणम्
appIdवर्तमान आवेदन id
अतिरिक्तइष्टदत्तांशः, प्रायः क्रमबद्धताराः, दत्तांशसंरचना च स्थिराः भवेयुः

सामान्यानि दफनानि घटनानि

घटनारिपोर्टिंग् समयःवर्णेतु
पृष्ठं तिष्ठतुयदा वर्तमानपृष्ठं स्विच् भवति अथवा पृष्ठं अवरोहितं भवतिपूर्वपृष्ठस्य ब्राउजिंग् समयं अभिलेखयन्तु
pvपृष्ठं प्रविष्टे सतिपृष्ठभ्रमणस्य संख्या, uv केवलं deviceId इत्यस्य आधारेण फ़िल्टर करणीयम्
अन्तरक्रिया घटनाएँयदा उपयोक्तृ-अन्तर्क्रिया-घटना प्रवर्ततेयथा क्लिक्, दीर्घं प्रेस इत्यादयः।
तार्किक घटनायदा तार्किकशर्ताः पूर्यन्तेयथा प्रवेशः, कूर्दनं पृष्ठम् इत्यादयः।

कार्यप्रदर्शनदत्तांशसंग्रहणसमाधानम्

सम्प्रति अधिकांशः कार्यप्रदर्शनसूचकदत्तांशः window.performance API तः आगच्छति ।

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु
अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

पैरामीटर् नामवर्णेतु
connectEnd इति HTTP (TCP) यदा ब्राउजर्-सर्वरयोः मध्ये संयोजनं स्थापितं तदा समयमुद्रिकां प्रत्यागच्छति । यदि निरन्तरं संयोजनं स्थापितं भवति तर्हि रिटर्न् मूल्यं fetchStart विशेषतायाः मूल्यस्य बराबरं भवति । संयोजनस्थापनं सर्वेषां हस्तप्रहारस्य प्रमाणीकरणप्रक्रियाणां च समाप्तिः इति निर्दिशति ।
connectStart इति डोमेननामप्रश्नस्य अन्ते HTTP (TCP) समयमुद्रिका । यदि निरन्तरं संयोजनं उपयुज्यते, अथवा सूचना संग्रहे अथवा स्थानीयसंसाधने संगृहीता अस्ति, तर्हि एतत् मूल्यं fetchStart इत्यनेन सह सङ्गतं भविष्यति ।
domसम्पूर्णम्वर्तमानदस्तावेजपार्सिंग् सम्पन्नं भवति, अर्थात् यदा Document.readyState 'पूर्णम्' भवति तथा च तत्सम्बद्धं readystatechange प्रवर्तते तदा समयमुद्रिका ।
domContentLoadedEventEnd इतियदा तत्क्षणं निष्पादनीयानि सर्वाणि स्क्रिप्ट्-कार्यं कृतानि (निष्पादनक्रमं न कृत्वा) इति समयमुद्रिका ।
domसामग्रीभारितघटनाप्रारम्भयदा पार्सरः DOMContentLoaded इवेण्ट् प्रेषयति, तदा समयमुद्रिका यदा सर्वाणि स्क्रिप्ट् यत् निष्पादनीयानि सन्ति तदा पार्स् कृताः सन्ति ।
domअन्तर्क्रियाशीलःयदा वर्तमानजालपृष्ठस्य DOM संरचना पार्सिंग् समाप्तं करोति तथा च एम्बेडेड् संसाधनं लोड् कर्तुं आरभते तदा समयमुद्रिका (अर्थात् यदा Document.readyState गुणः "interactive" इति परिवर्तते तथा च तत्सम्बद्धं readystatechange घटना प्रवर्तते)
domLoading इतिवर्तमानजालपृष्ठस्य DOM संरचना यदा विश्लेषणं कर्तुं आरभते (अर्थात् यदा Document.readyState गुणः "loading" इति परिवर्तते तदा तत्सम्बद्धं readystatechange घटना प्रवर्तते) इति समयमुद्रिका
domainLookupEnd इति यदा DNS डोमेननामप्रश्नः सम्पन्नः अभवत् ।यदि स्थानीयं संग्रहणं (अर्थात् कोऽपि DNS प्रश्नाः) अथवा निरन्तरं संयोजनानि उपयुज्यन्ते तर्हि fetchStart मूल्यस्य बराबरम्
domainLookupStart इति DNS UNIX समयमुद्रिका यदा डोमेननामप्रश्ना आरब्धा । यदि निरन्तरं संयोजनं उपयुज्यते, अथवा सूचना संग्रहे अथवा स्थानीयसंसाधने संगृहीता अस्ति, तर्हि एतत् मूल्यं fetchStart इत्यनेन सह सङ्गतं भविष्यति ।
fetchStart इति ब्राउजर् HTTP अनुरोधस्य उपयोगेन दस्तावेजस्य समयमुद्रिकां आनेतुं सज्जः अस्ति । एषः समयः कस्यापि अनुप्रयोगसञ्चयस्य जाँचपूर्वं भविष्यति ।
loadEventEnd इति यदा भारघटना समाप्तं भवति, अर्थात् यदा भारघटना समाप्तं भवति तदा समयमुद्रिका । यदि एषा घटना अद्यापि न प्रेषिता, अथवा अद्यापि न सम्पन्नवती, तर्हि तस्य मूल्यं 0 भविष्यति ।
loadEventStart इति यदा भारघटना प्रेषिता आसीत् तदा समयमुद्रिका । यदि एषा घटना अद्यापि न प्रेषिता तर्हि तस्य मूल्यं 0 भविष्यति ।
navigationStart इति यदा पूर्वपृष्ठं तस्मिन् एव ब्राउजरे अवरोहणं समाप्तं भवति तदा समयमुद्रिका । यदि पूर्वपृष्ठं नास्ति तर्हि एतत् मूल्यं fetchStart इत्यस्य समानं भविष्यति ।
redirectEnd यदा अन्तिमः HTTP पुनर्निर्देशः सम्पन्नः (अर्थात् यदा HTTP प्रतिक्रियायाः अन्तिमः बिट् प्रत्यक्षतया प्राप्तः) तदा समयमुद्रिका । यदि पुनर्निर्देशनं नास्ति, अथवा पुनर्निर्देशनं भिन्नमूलतः अस्ति, तर्हि एतत् मूल्यं 0 प्रत्यागमिष्यति ।
redirectStart इति यदा प्रथमः HTTP पुनर्निर्देशः आरब्धः तदा समयमुद्रिका । यदि पुनर्निर्देशनं नास्ति, अथवा पुनर्निर्देशनं भिन्नमूलतः अस्ति, तर्हि एतत् मूल्यं 0 प्रत्यागमिष्यति ।
अनुरोधप्रारम्भयदा ब्राउजर् सर्वरं प्रति HTTP अनुरोधं कृतवान् (अथवा स्थानीयसञ्चयं पठितुं आरब्धवान्) तदा समयमुद्रिकां प्रत्यागच्छति ।
प्रतिक्रियाअन्तम्यदा ब्राउजर् सर्वरतः अन्तिमं बाइट् प्राप्तवान् (अथवा स्थानीयसञ्चयात् पठितवान्, अथवा स्थानीयसंसाधनात् पठितवान्) (अथवा यदा HTTP संयोजनं बन्दं आसीत् यदि ततः पूर्वं बन्दं आसीत्) तदा समयमुद्रिकां प्रत्यागच्छति
responseStart इति यदा ब्राउजर् सर्वरतः प्रथमं बाइट् प्राप्तवान् (अथवा स्थानीयसञ्चयात् पठितवान्) तदा समयमुद्रिकां प्रत्यागच्छति ।यदि प्रारम्भिक-अनुरोधस्य अनन्तरं परिवहन-स्तरः विफलः भवति तथा च संयोजनं पुनः उद्घाटितं भवति तर्हि एतत् विशेषता नूतन-अनुरोधस्य तत्सम्बद्ध-प्रारम्भ-समयरूपेण गण्यते
secureConnectionStart इति HTTPS तदा समयमुद्रिकां प्रत्यागच्छति यदा ब्राउजर् सर्वरः च सुरक्षितसम्बद्धतायै हस्तप्रहारं आरब्धवन्तौ । यदि वर्तमानजालपृष्ठस्य सुरक्षितसंयोजनस्य आवश्यकता नास्ति तर्हि 0 प्रेषयन्तु ।
unloadEventEnd इति unloadEventStart इत्यस्य अनुरूपं, यदा unload इवेण्ट् प्रोसेसिंग् सम्पन्नं भवति तदा समयमुद्रिका । यदि पूर्वपृष्ठं नास्ति तर्हि एतत् मूल्यं 0 प्रत्यागमिष्यति ।
unloadEventStart इति यदा पूर्वपृष्ठस्य अनलोड् इवेण्ट् क्षिप्तः तदा समयमुद्रिका । यदि पूर्वपृष्ठं नास्ति तर्हि एतत् मूल्यं 0 प्रत्यागमिष्यति ।

सामान्य कार्यप्रदर्शनसूचकाः

सूचकनामवर्णेतु
FPपृष्ठ प्रथम आकृष्ट समय
FCPयदा पृष्ठे प्रथमवारं सामग्री आकृष्टा भवति तदा समयः
FMPपृष्ठस्य प्रथमः प्रभावी रेखाचित्रसमयः FMP>=FCP
TTIपृष्ठ पूर्णतः अन्तरक्रियाशील समय
FIDपृष्ठभारीकरणचरणस्य समये उपयोक्तुः प्रथमपरस्परक्रियायाः विलम्बसमयः
MPFIDपृष्ठभारीकरणपदे, अधिकतमविलम्बसमयः यः उपयोक्तृपरस्परक्रियायाः सम्मुखीभवितुं शक्नोति
भारयदा पृष्ठं पूर्णतया लोड् भवति तदा समयः (भारघटना यदा भवति)

FP

FP (FIrst Paint) सूचकः प्रायः पृष्ठस्य श्वेतपर्दे समयं प्रतिबिम्बयति श्वेतपर्दे समयः वर्तमानस्थितिं प्रतिबिम्बयति यत् उपयोक्ता सामग्रीं प्रतीक्षते यत्किमपि न्यूनं भवति, तदा जालपुटस्य संजालभारप्रदर्शनं भवति अतीव उत्तमम् अस्ति, श्वेतपर्दे यावत् अल्पः समयः भवति, तावत् उपयोक्तुः मथनस्य सम्भावना न्यूना भवति ।

इदं सूचकं preformance.getEntriesByType('paint') पद्धत्या PerformancePaintTming API द्वारा प्रदत्तां बिन्दुसूचनाम् प्राप्तुं शक्नोति first-paint इति नामकं वस्तु अन्वेष्टुम्, तथा च विवरणं FP सूचकदत्तांशः अस्ति:
अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

FCP

FCP (First Contentful Paint) इति समयबिन्दुः यदा प्रथमवारं सामग्रीं प्रतिपादितं भवति, तदा आरभ्य यदा उपयोक्ता जालपुटं FCP प्रति प्रवेशं आरभते तदा आरभ्य सामग्रीरहितः समयः इति गणयितुं शक्यते , FCP >= FP

सूचकाः performance.getEntriesByType('paint') पद्धत्या PerformancePaintTiming API द्वारा प्रदत्तां बिन्दुसूचनाम् प्राप्तुं शक्नुवन्ति first-contentful-paint इति नामकं वस्तु अन्वेष्टुम्, यत् FCP सूचकदत्तांशस्य वर्णनं करोति, यथा निम्नलिखितचित्रे दर्शितम् अस्ति:

FMP

FMP (First Meaningful Paint) इति समयः यदा प्रथमवारं सार्थकसामग्री आकृष्टा भवति यदा सम्पूर्णस्य पृष्ठस्य विन्यासः पाठसामग्री च पूर्णतया प्रतिपादिता भवति तदा सार्थकसामग्रीणां प्रथमं सार्थकं चित्रं सम्पन्नं भवति इति विचारयितुं शक्यते।अतः FMP उपयोक्तृभ्यः जालपुटस्य मुख्यसामग्रीदर्शनार्थं यः समयः भवति तस्य मापनं करोति, तथा च उपयोक्तृअनुभवस्य दृष्ट्या महत्त्वपूर्णः मापनसूचकः अस्ति

FMP गणनायाः एकः विधिः या अधुना अग्रभाग-उद्योगेन ज्ञायते "लोडिंग् तथा रेण्डरिंग् इत्येतयोः समये पृष्ठस्य अधिकतमं विन्यासपरिवर्तनस्य अनन्तरं रेखाङ्कनसमयः पृष्ठस्य प्रत्येकं समग्रं DOM परिवर्तनं निरीक्षितुं, MutationObserver इत्यस्य कॉलबैक् ट्रिगर कर्तुं, तथा च कॉलबैकस्य समये वर्तमानस्य DOM वृक्षस्य परिवर्तनस्कोरस्य गणनां कर्तुं MutationObserver इत्यस्य उपयोगं कर्तुं शक्नोति यदा स्कोरः सर्वाधिकं परिवर्तते सः क्षणः FMP समयबिन्दुः भवति

TTI

TTI (Time To Interactive), यत् पृष्ठस्य लोडिंगस्य आरम्भात् पृष्ठं पूर्णतया अन्तरक्रियाशीलस्थितौ न भवति तावत् यावत् समयः भवति । यदा पृष्ठं पूर्णतया अन्तरक्रियाशीलावस्थायां भवति तदा निम्नलिखितत्रयशर्ताः पूर्यन्ते ।

पृष्ठे पूर्वमेव उपयोगी सामग्री प्रदर्श्यते ।
पृष्ठे दृश्यमानतत्त्वैः सह सम्बद्धं घटनाप्रतिसादकार्यं पञ्जीकृतम् अस्ति ।
इवेण्ट् रिस्पॉन्स फंक्शन् इवेण्ट् घटितस्य अनन्तरं 50ms अन्तः निष्पादनं आरभुं शक्नोति ।

संसाधनभार सूचकः

window.performance.getEntriesByType('resource') वर्तमानपृष्ठे लोड् कृतानां सर्वेषां संसाधनानाम् (js, css, img...) विविधप्रदर्शनसूचकाः प्रत्यागमिष्यति, येषां उपयोगः स्थिरसंसाधनप्रदर्शनदत्तांशसङ्ग्रहाय कर्तुं शक्यते

मुख्यप्रकाराः सन्ति : स्क्रिप्ट्, लिङ्क्, img, css, xmlhttprequest, beacon, fetch, अन्ये ।
PerformanceResourceTiming - जाल एपिआइ | MDN

अन्ये सूचकगणनाविधयः

सूचकनामवर्णेतुगणना
DNS प्रश्नःDNS चरणे समयः भवतिdomainLookupEnd - डोमेनLookupStart
TCP संयोजनTCP चरण समयconnectEnd - connectStart
SSL संयोजनस्थापनम्SSL संयोजनसमयःconnectEnd - सुरक्षितसंयोजनप्रारम्भ
प्रथमं बाइट् संजाल अनुरोधःप्रथमः बाइट् प्रतिक्रियासमयः (ttfb) .responseStart - अनुरोधप्रारम्भ

त्रुटिदत्तांशसङ्ग्रहसमाधानम्

त्रिविधः

  • संसाधनभारदोषाः, addEventListener('error', callback, true) इत्यस्य माध्यमेन कैप्चरचरणस्य संसाधनलोडिंगविफलतादोषाः गृह्णन्ति ।
  • js निष्पादनदोषाः, window.onerror मार्गेण js त्रुटयः गृह्यताम् ।
    • क्रॉस्-डोमेन् स्क्रिप्ट् "Script Error" इति प्रॉम्प्ट् दास्यति, तथा च कोऽपि विशिष्टः त्रुटिसूचना, स्टैक् सूचना च प्राप्तुं न शक्यते । अस्मिन् समये, भवद्भिः स्क्रिप्ट् टैग् मध्ये crossorigin="anonymous" विशेषतां योजयितुं आवश्यकम्, तथा च संसाधन सर्वरेण CORS-सम्बद्धानि विन्यासानि योजयितुं आवश्यकम्, यथा Access-Control-Allow-Origin: *
  • प्रतिज्ञादोषः, addEventListener('unhandledrejection', callback) इत्यस्य माध्यमेन प्रतिज्ञादोषं गृह्यताम्, परन्तु यत्र त्रुटिः अभवत् तत्र पङ्क्तयः स्तम्भानां च संख्या इत्यादीनां सूचना नास्ति, अतः भवान् केवलं प्रासंगिकदोषसूचनाः मैन्युअल् रूपेण क्षिप्तुं शक्नोति
// 在捕获阶段,捕获资源加载失败错误
Element.addEventListener('error', e => {
const target = e.target
    if (target != window) {
        monitor.errors.push({
            type: target.localName,
            url: target.src || target.href,
            msg: (target.src || target.href) + ' is load error',
            time: Date.now()
        })
    }
})

// 监听 js 错误
window.onerror = function(msg, url, row, col, error) {
    monitor.errors.push({
        type: 'javascript',
        row: row,
        col: col,
        msg: error && error.stack? error.stack : msg,
        url: url,
        time: Date.now()
    })
}
// 监听 promise 错误 缺点是获取不到行数数据
addEventListener('unhandledrejection', e => {
    monitor.errors.push({
        type: 'promise',
        msg: (e.reason && e.reason.msg) || e.reason || '',
        time: Date.now()
    })
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

आँकडा रिपोर्टिंग योजना

अस्मिन् परिदृश्ये द्वौ विषयौ विचारणीयौ स्तः- १.

यदि आँकडा-रिपोर्टिंग्-अन्तरफलकं व्यापार-प्रणाली च समानं डोमेन-नाम उपयुञ्जते तर्हि ब्राउजर्-इत्यस्य समवर्ती-अनुरोधानाम् संख्यायाः सीमाः सन्ति, अतः जाल-संसाधनानाम् कृते स्पर्धायाः सम्भावना वर्तते
ब्राउजर्-जनाः प्रायः पृष्ठस्य अवरोहणसमये अतुल्यकालिक-ajax-अनुरोधानाम् अवहेलनां कुर्वन्ति यदि आँकडा-अनुरोधः आवश्यकः भवति, तर्हि पृष्ठस्य अवरोहणं विलम्बयितुं सामान्यतया अनलोड्-इत्यत्र अथवा अनलोड्-पूर्व-घटनायां समकालिकं ajax-अनुरोधः निर्मितः भवति उपयोक्तृदृष्ट्या पृष्ठस्य कूर्दनं मन्दं भवति ।

नेविगेटर.sendBeacon

लाभ:
पृष्ठस्य अवरोहणसमये विश्वसनीयतया दत्तांशं प्रेषयति, पृष्ठस्य बन्दीकरणात् अवरुद्धं विना ।
पृष्ठभूमितः दत्तांशं प्रेषयितुं समर्थनं करोति।

अभावः : १.
केवलं POST अनुरोधाः एव प्रेषयितुं शक्यन्ते, प्रतिक्रियाफलं च प्राप्तुं न शक्यते ।

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु
इन्टरनेट् एक्स्प्लोरर् इत्यस्य अतिरिक्तं वर्तमानस्य मुख्यधारायां आधुनिकब्राउजरेषु बीकन्स् इत्यस्य समर्थनस्य दरः अतीव उच्चः अस्ति । बीकन - एमडीएन दस्तावेजीकरण

Beacon अन्तरफलकस्य उपयोगः Web सर्वरं प्रति अतुल्यकालिक-अ-अवरोधन-अनुरोधानाम् समयनिर्धारणाय भवति ।

  • Beacon अनुरोधाः HTTP POST पद्धतिं उपयुञ्जते तथा च प्रतिक्रियायाः आवश्यकता नास्ति ।
  • बीकन-अनुरोधाः सुनिश्चितं कुर्वन्ति यत् पृष्ठस्य अनलोड्-प्रवर्तनात् पूर्वं आरम्भीकरणं सम्पन्नम् अस्ति ।

सामान्यजनस्य शब्देषु, Beacon सर्वरं प्रति अतुल्यकालिकरूपेण आँकडान् प्रेषयितुं शक्नोति, तथा च पृष्ठस्य अवरोहणस्य समाप्तेः पूर्वं अनुरोधः प्रेषितः इति सुनिश्चितं कर्तुं शक्नोति (ajax पृष्ठस्य अवरोहणं अनुरोधं समाप्तं करिष्यति इति समस्यायाः समाधानं कुर्वन्तु)। तस्य उपयोगः कथं भवति : १.

navigator.sendBeacon(url, data);
  • 1

दत्तांशपैरामीटर् वैकल्पिकं भवति, तस्य प्रकारः च ArrayBufferView, Blob, DOMString अथवा FormData भवितुम् अर्हति । यदि ब्राउजर् प्रेषणीयपङ्क्तौ बीकन् अनुरोधं सफलतया योजयति तर्हि एषा विधिः सत्यं प्रत्यागमिष्यति, अन्यथा मिथ्या प्रत्यागमिष्यति

Beacon इत्यस्य उपयोगं कुर्वन्, बैकएण्ड् इत्यनेन पैरामीटर्स् प्राप्तुं post मेथड् इत्यस्य उपयोगः करणीयः भवति । तस्मिन् एव काले, अनुरोधशीर्षकं CORS-सुरक्षितं अनुरोध-शीर्षकं पूरयितुं अर्हति, यस्मिन् सामग्री-प्रकारः अनुप्रयोग/x-www-form-urlencoded, बहुभागः/रूप-दत्तांशः, अथवा पाठः/सादा भवितुमर्हति

type ContentType = 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';

const serilizeParams = (params: object) => {
    return window.btoa(JSON.stringify(params))
}

function sendBeacon(url: string, params: object) {
  const formData = new FormData()
  formData.append('params', serilizeParams(params))
  navigator.sendBeacon(url, formData)
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

छवि

लाभ:
अस्य उपयोगः सरलः, उत्तमसङ्गतिः अस्ति, डोमेन्-मध्ये च निवेदयितुं शक्यते ।
पृष्ठस्य लोडिंगं बन्दीकरणं च अवरुद्धं न करिष्यति।

अभावः : १.
केवलं GET अनुरोधाः प्रेषयितुं शक्यन्ते, प्रतिक्रियाफलं च प्राप्तुं न शक्यते ।
अतुल्यकालिकक्रियाः समर्थिताः न सन्ति ।

sendBeacon इत्यस्य संगततायाः विषयः अपरिहार्यः अस्ति, परन्तु भवान् तस्य विशेषतायाः पूर्णं उपयोगं कर्तुं शक्नोति यत् अधिकांशः ब्राउजर् पृष्ठस्य अवरोहणात् पूर्वं चित्रस्य लोड् करणं सम्पूर्णं करिष्यति, तथा च पृष्ठे img योजयित्वा दत्तांशं प्रतिवेदयितुं शक्नोति

function sendImage(url: string, params: object) {
  const img = new Image()

  img.style.display = 'none'

  const removeImage = function() {
    img.parentNode.removeChild(img)
  }

  img.onload = removeImage
  img.onerror = removeImage

  img.src = `${url}?params=${serilizeParams(params)}`

  document.body.appendChild(img)
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

यतो हि img इमेज् get अनुरोधः अस्ति, भिन्न-भिन्न-सर्वर्-मध्ये uri-दीर्घतायाः प्रतिबन्धाः सन्ति यदा दीर्घता सीमां अतिक्रमति तदा HTTP 414 त्रुटिः भविष्यति अतः, भवद्भिः अत्यधिकं विशेषतां न्यूनीकर्तुं रिपोर्टिंग्-आवृत्तिषु अपि ध्यानं दातव्यम् एकस्मिन् समये अपलोड् कृतम्।

संगत समाधान

sendBeacon मेथड् प्राधान्यं भवति, Image मेथड् च fallback रूपेण उपयुज्यते ।


function sendLog(url: string, params: object) {
    if(navigator.sendBeacon) {
        sendBeacon(url, params)
    } else {
        sendImage(url, params)
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

वस्तुतः बहवः जनाः बिन्दुं दफनार्थं GIF इत्यस्य उपयोगं कुर्वन्ति?
सर्वरं प्रति दत्तांशस्य प्रतिवेदनं अन्तरफलकस्य अनुरोधेन, साधारणसञ्चिकानां अनुरोधेन, चित्रसंसाधनानाम् अनुरोधेन वा कर्तुं शक्यते । यावत् यावत् दत्तांशः प्रतिवेदयितुं शक्यते, भवेत् तत् GIF सञ्चिकायाः ​​अनुरोधं करोति, js सञ्चिकां अनुरोधयति वा पृष्ठान्तरफलकं आह्वयति वा, सर्वरः वास्तवतः विशिष्टस्य प्रतिवेदनपद्धतेः चिन्तां न करोति अतः सर्वाणि प्रणाल्यानि दत्तांशं प्रतिवेदयितुं GIF चित्राणि अनुरोधयितुं पद्धतिं एकरूपेण किमर्थं उपयुञ्जते?
●पार-डोमेन निवारयन्तु
सामान्यतया बिन्दुयुक्तं डोमेननाम वर्तमानं डोमेननाम नास्ति, अतः सर्वे अन्तरफलक-अनुरोधाः क्रॉस्-डोमेन-अनुरोधाः भविष्यन्ति । अनुचितविन्यासस्य कारणेन च ब्राउजर्-द्वारा क्रॉस्-डोमेन्-अनुरोधाः सहजतया अवरुद्धाः भवितुम् अर्हन्ति, दोषाणां च सूचनां दातुं शक्यन्ते, यत् अस्वीकार्यम् अस्ति । तथापि चित्रस्य src विशेषता डोमेन् न पारयति, अनुरोधाः अपि आरभ्यतुं शक्यन्ते । (अन्तरफलकप्रतिवेदनं बहिष्कृत्य)
●पृष्ठस्य लोडिंग् अवरुद्ध्य उपयोक्तृअनुभवं प्रभावितं कर्तुं निवारयन्तु
सामान्यतया, संसाधननोड् निर्माय, ब्राउजर् वास्तवतः संसाधन अनुरोधं न प्रेषयिष्यति यावत् वस्तु ब्राउजर् DOM वृक्षे न प्रविशति । DOM इत्यस्य पुनः पुनः संचालनेन न केवलं कार्यक्षमतायाः समस्याः उत्पद्यन्ते, परन्तु js/css संसाधनानाम् लोड् करणं पृष्ठप्रतिपादनं अपि अवरुद्धं करिष्यति तथा च उपयोक्तृअनुभवं प्रभावितं करिष्यति ।
अपवादः चित्रानुरोधाः सन्ति । न केवलं चित्रस्य निर्माणकाले DOM मध्ये सम्मिलितस्य आवश्यकता नास्ति, अपितु यावत् नूतनं Image वस्तु js मध्ये निर्मितं भवति तावत् अनुरोधं आरभुं शक्नोति, तथा च js विना ब्राउजर् वातावरणे अवरोधनस्य समस्या नास्ति also be managed normally through the img tag, यत् अन्यः प्रकारः संसाधन अनुरोधः अस्ति किं कर्तुं न शक्यते । (सञ्चिकाविधिं बहिष्कृत्य)
●PNG/JPG इत्यस्य तुलने GIF इत्यस्य आकारः लघुतमः अस्ति
लघुतम BMP सञ्चिकायाः ​​७४ बाइट्, PNG कृते ६७ बाइट्, कानूनी GIF कृते केवलं ४३ बाइट् आवश्यकाः ।
तस्यैव प्रतिक्रियायाः कृते GIF BMP इत्यस्मात् 41% यातायातस्य, PNG इत्यस्मात् 35% यातायातस्य च रक्षणं कर्तुं शक्नोति ।
तथा च तेषु अधिकांशः रिपोर्ट् कर्तुं 1*1 पिक्सेल पारदर्शी GIF इत्यस्य उपयोगं करोति ।
१x१ पिक्सेल लघुतमं कानूनी चित्रम् अस्ति । अपि च, चित्राणां माध्यमेन क्रियते इति कारणतः चित्राणि पारदर्शीनि कर्तुं सर्वोत्तमम्, येन चित्रं पारदर्शकं इति सूचयितुं केवलं द्विचक्रीयबिट् इत्यस्य उपयोगः करणीयः चित्रं पारदर्शकवर्णरूपेण, तथा च वर्णस्थानदत्तांशस्य संग्रहणस्य आवश्यकता नास्ति , यत् आयतनं रक्षितुं शक्नोति ।

XMLHttpRequest或एपीआई आनेतु

लाभ:

अतुल्यकालिक-अनुरोधाः प्रेषयितुं शक्यन्ते तथा च GET तथा POST इत्यादीनि बहुविधाः HTTP-विधयः समर्थिताः सन्ति ।
प्रतिक्रियाफलं प्राप्य अग्रे संसाधितुं शक्यते।
अभावः : १.

अनुरोधस्य प्रतिक्रियायाः च तर्कं हस्तचलितरूपेण नियन्त्रयितुं आवश्यकम् अस्ति ।
क्रॉस्-डोमेन अनुरोधसमस्यानां (यथा CORS स्थापनम्) निबन्धनस्य आवश्यकता अस्ति ।

आँकडानां रिपोर्ट् कर्तुं अतुल्यकालिकं अनुरोधं प्रेषयितुं XMLHttpRequest अथवा Fetch API इत्यस्य उपयोगं कुर्वन्तु । भवान् GET अथवा POST पद्धतिं उपयोक्तुं चयनं कर्तुं शक्नोति तथा च दत्तांशं अनुरोधशरीररूपेण अथवा URL मापदण्डरूपेण प्रेषयितुं शक्नोति ।

WebSocket इति

लाभ:

उत्तमं वास्तविकसमयप्रदर्शनं तथा द्विपक्षीयसञ्चारस्य समर्थनं करोति।
वास्तविकसमयनिरीक्षणाय बृहत्-परिमाणेन आँकडा-रिपोर्टिङ्गाय च उपयुक्तम् ।
अभावः : १.

सर्वरेण WebSocket प्रोटोकॉलस्य समर्थनं करणीयम् ।
अधिकं जटिलं सरलदफनबिन्दुआवश्यकतानां कृते न उपयुक्तम्।

रिपोर्टिंग् मञ्चः

सामान्य-अग्र-अन्त-दत्तांश-दफन-उपकरणेषु Google Analytics, Baidu Statistics, Umeng Statistics इत्यादयः सन्ति अवश्यं, भवान् कम्पनीयाः आन्तरिक-अन्तरफलकस्य अथवा मञ्चस्य उपयोगं रिपोर्टिंग्-कृते अपि कर्तुं शक्नोति

उदाहरणरूपेण Google Analytics इति गृह्यताम् :
गूगल एनालिटिक्स इति जालपुटस्य यातायातस्य निरीक्षणाय, प्रतिवेदनाय च गूगलेन विकसितं जालपुटविश्लेषणसाधनम् अस्ति । एतत् जालस्थलस्वामिनः स्वस्य आगन्तुकानां व्यवहारं ज्ञातुं साहाय्यं करोति, यथा ते के सन्ति, ते कुतः आगच्छन्ति, ते साइट् मध्ये किं कुर्वन्ति, इत्यादीनि च । Google Analytics इत्यस्य माध्यमेन वेबसाइट् स्वामिनः स्वप्रेक्षकान् अधिकतया अवगन्तुं शक्नुवन्ति, वेबसाइट् सामग्रीं विपणन-रणनीतिं च अनुकूलितुं शक्नुवन्ति, तस्मात् वेबसाइट्-प्रदर्शने उपयोक्तृ-अनुभवे च सुधारं कर्तुं शक्नुवन्ति Google Analytics दत्तांशविश्लेषणकार्यस्य धनं प्रदाति, यत्र वास्तविकसमयदत्तांशः, उपयोक्तृव्यवहारविश्लेषणं, रूपान्तरणनिरीक्षणं, यातायातस्रोतविश्लेषणम् इत्यादीनि सन्ति एतत् एकं शक्तिशाली साधनं यत् विभिन्नेषु जालपुटेषु, ऑनलाइन-विपणन-अभियानेषु च बहुधा उपयुज्यते ।

Google Analytics इत्यस्य उपयोगः कथं भवति

यतः वयं Google Analytics इत्यस्य उपयोगं कुर्मः, अतः प्रथमं अस्माकं Google खातं भवितुमर्हति, यत् भवद्भिः स्वयमेव निर्मातव्यम् । द्वितीयं, भवद्भिः Google Analytics इत्यस्य प्रवेशद्वारं ज्ञातव्यम् अत्र प्रयुक्तौ पताद्वयम् अस्ति ।

गूगल टैग प्रबन्धक:tagmanager.google.com/

विश्लेषणात्मकता:विश्लेषणशास्त्र.google.com/

गूगल टैग प्रबन्धक
गूगल-टैग्-प्रबन्धकः (GTM) गूगल-द्वारा विकसिता, प्रदत्ता च टैग्-प्रबन्धन-प्रणाली अस्ति । एतत् वेबसाइट् प्रशासकाः वेबसाइट् कोड् परिवर्तनं विना विविधानि ट्रैकिंग् कोड्, एनालिटिक्स् कोड्, मार्केटिंग् टैग् च प्रबन्धयितुं परिनियोजयितुं च शक्नुवन्ति । GTM इत्यनेन उपयोक्तारः विकासकानां उपरि अवलम्बं विना टैग्-इत्येतत् सहजतया योजयितुं, अद्यतनं कर्तुं, विलोपयितुं च शक्नुवन्ति ।

GTM इत्यस्य मुख्यविशेषताः सन्ति- १.
साधारणे आङ्ग्लभाषायां: अस्य मञ्चस्य उपयोगः अग्रभागेन प्रेरितानां गुप्तघटनानां संग्रहणार्थं भवति, तथा च ट्रिगर-स्थितीनां अनुकूलनं कृत्वा आँकडा-रिपोर्टिंग्-साक्षात्कारं कर्तुं शक्नोति, इवेण्ट्-कॉलबैक्-इत्येतत् च अत्र आँकडानां संग्रहणार्थं गूगल-विश्लेषण-सम्बद्धानां सूचनां दातुं च उपयुज्यते

गूगल एनालिटिक्स
यथा नाम सूचयति, एतत् एकं जालपुटम् अस्ति यस्य उपयोगः दत्तांशसङ्ग्रहाय, द्रष्टुं, प्रदर्शयितुं च भवति