एक पेज के ऐप्लिकेशन मेज़र करना

यह दस्तावेज़ उन डेवलपर के लिए है जो Google Analytics का इस्तेमाल करके, अपने सिंगल-पेज ऐप्लिकेशन पर पेज व्यू मेज़र करना चाहते हैं.

सिंगल-पेज ऐप्लिकेशन (एसपीए) ऐसी वेबसाइटें होती हैं जो एचटीएमएल दस्तावेज़ को एक बार लोड करती हैं. साथ ही, JavaScript एपीआई का इस्तेमाल करके कोई भी अतिरिक्त कॉन्टेंट फ़ेच करती हैं.

उदाहरण: मान लें कि आपके पास कुछ लीड पाने के लिए एक फ़ॉर्म है. फ़ॉर्म में तीन स्क्रीन हैं: > * पहली स्क्रीन पर ग्राहक की जानकारी कैप्चर की जाती है. * दूसरी स्क्रीन, जहां ग्राहक कुछ सेवाओं में अपनी दिलचस्पी दिखाते हैं. * तीसरी स्क्रीन पेज, जिस पर ग्राहक की दिलचस्पी के हिसाब से वेबिनार के लिए साइन अप किया जा सकता है.

एसपीए से मिले पेज व्यू को सही तरीके से मेज़र करने के लिए, यह ज़रूरी है कि उपयोगकर्ता जिस भी स्क्रीन से इंटरैक्ट करे उसके पेज व्यू को गिना जाए. साथ ही, पेज के रेफ़रर की जानकारी सही हो, ताकि उपयोगकर्ता के सफ़र को सही तरीके से ट्रैक किया जा सके.

शुरू करने से पहले

इस पेज पर यह माना गया है कि आपके पास पहले से ही:

• आपकी वेबसाइट के लिए Google Analytics खाता और प्रॉपर्टी. Google Analytics सेट अप करने का तरीका जानें.

• आपकी वेबसाइट पर लागू किया गया Google टैग, जो पेज के शुरू में लोड होने पर ट्रिगर होता है. Google टैग सेट अप करने का तरीका जानें.

सिंगल-पेज ऐप्लिकेशन के मेज़रमेंट को लागू करना

एसपीए को सटीक तरीके से मेज़र करने के लिए, इनमें से किसी एक तरीके का इस्तेमाल करके नया वर्चुअल पेज व्यू ट्रिगर करें:

• ब्राउज़र के इतिहास में बदलाव (सुझाया गया): अगर आपका एसपीए, स्क्रीन अपडेट करने के लिए History API का इस्तेमाल करता है, तो इस विकल्प का इस्तेमाल करें. खास तौर पर, pushState() और replaceState() तरीके का इस्तेमाल करने पर ऐसा करें.

• कस्टम इवेंट: अगर आपकी वेबसाइट, अलग-अलग स्क्रीन रेंडर करने के लिए DocumentFragment ऑब्जेक्ट का इस्तेमाल करती है, तो इस विकल्प का इस्तेमाल करें.

ब्राउज़र के इतिहास में बदलाव करने की सुविधा लागू करना

अगर आपका एसपीए, History API का इस्तेमाल करता है, तो Google Analytics में बेहतर मेज़रमेंट की सुविधा चालू की जा सकती है. इससे ब्राउज़िंग इतिहास के इवेंट के आधार पर, पेज व्यू को अपने-आप ट्रैक किया जा सकेगा.

Google Analytics में बेहतर मेज़रमेंट की सुविधा चालू करना

ब्राउज़िंग इतिहास के आधार पर, page_views को अपने-आप मेज़र करने के लिए:

1. Google Analytics खोलें

2. एडमिन पेज पर, डेटा कलेक्शन और डेटा में बदलाव में जाकर, डेटा स्ट्रीम > वेब पर क्लिक करें.

3. बेहतर मेज़रमेंट की सुविधा के बगल में मौजूद स्विच को चालू पर सेट करें. इससे मेज़रमेंट के सभी विकल्प चालू हो जाएंगे.

4. अलग-अलग विकल्पों में बदलाव करने के लिए क्लिक करें. पेज व्यू में जाकर, बेहतर सेटिंग दिखाएं पर क्लिक करें. पक्का करें कि आपने पेज लोड और ब्राउज़िंग इतिहास के इवेंट के आधार पर पेज में बदलाव, दोनों को चालू किया हो.

   

5. बदलावों को सेव करें.

मेज़रमेंट सेटअप की पुष्टि करना

यह पुष्टि करने के लिए कि आपका सिंगल-पेज ऐप्लिकेशन, पेज व्यू को सही तरीके से मेज़र करता है:

1. एसपीए मेज़रमेंट सेटअप में मौजूद हर टैग के लिए डीबग मोड चालू करें. DebugView में इवेंट मॉनिटर करने का तरीका जानें.

2. अपने सिंगल-पेज ऐप्लिकेशन पर क्लिक करें. नई वर्चुअल स्क्रीन पर क्लिक करने पर, आपको DebugView में नया page_view इवेंट दिखना चाहिए. page_view इवेंट पैरामीटर की तुलना, पिछले page_view इवेंट से करें. इससे यह पता चलेगा कि पेज रेफ़रर और पेज की जगह की जानकारी को सही तरीके से अपडेट किया गया है या नहीं.

एसपीए के लिए अन्य बातें

page_view इवेंट भेजने के अलावा, Google Analytics के साथ एसपीए को बेहतर तरीके से इंटिग्रेट करने और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, इन बातों का ध्यान रखें:

स्क्रोल करने की पोज़िशन मैनेज करना

जब उपयोगकर्ता किसी एसपीए में एक व्यू से दूसरे व्यू पर जाता है, तो ब्राउज़र आम तौर पर स्क्रोल करने की मौजूदा जगह को बनाए रखता है. इसका मतलब यह हो सकता है कि लोगों को नए वर्चुअल पेज का सबसे ऊपर वाला हिस्सा न दिखे. साथ ही, इससे स्क्रोल डेप्थ ट्रैकिंग पर भी असर पड़ सकता है.

सुझाव: हर वर्चुअल पेज ट्रांज़िशन के बाद, स्क्रोल की पोज़िशन को प्रोग्राम के हिसाब से पेज या मुख्य कॉन्टेंट कंटेनर के सबसे ऊपर रीसेट करें.

// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);

// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);

इस बदलाव के बाद, उपयोगकर्ता नए कॉन्टेंट की शुरुआत से पढ़ना शुरू करेंगे. इससे Google Analytics को नए वर्चुअल पेज पर यूज़र ऐक्टिविटी को सटीक तरीके से मेज़र करने में मदद मिलेगी.

पक्का करें कि ब्राउज़र की सुविधाओं के लिए कॉन्टेंट ऐक्सेस किया जा सके

अगर उपयोगकर्ता, ब्राउज़र की सुविधाओं से जुड़ी समस्याओं की शिकायत करते हैं, जैसे कि वर्चुअल पेज लोड होने के बाद, पेज पर खोज करने की सुविधा (Ctrl+F) काम नहीं कर रही है, तो इससे पता चल सकता है कि आपका एसपीए, डीओएम को कैसे अपडेट करता है.

सुझाव: पक्का करें कि आपका एसपीए फ़्रेमवर्क और रूटिंग लॉजिक, नए पेज के कॉन्टेंट के साथ DOM के ज़रूरी हिस्सों को पूरी तरह और एक साथ अपडेट करता हो. ऐसा हो सकता है कि मुख्य डीओएम ट्री से छिपा हुआ कॉन्टेंट या रेंडर होने में समय लगने वाला कॉन्टेंट, ब्राउज़र की खोज सुविधा के ज़रिए तुरंत इंडेक्स न किया जा सके. कॉन्टेंट ऐक्सेस किया जा सकता है या नहीं, इसकी पुष्टि करने के लिए वर्चुअल नेविगेशन के बाद, पेज पर मौजूद खोज बार की जांच करें.

अपने-आप होने वाले इवेंट पर असर

अगर आपने अपने एसपीए में वर्चुअल पेज व्यू मेज़रमेंट को सही तरीके से लागू किया है, तो Google Analytics, अपने-आप होने वाले अन्य इवेंट को सही तरीके से हैंडल करेगा. अगर स्क्रीन में होने वाले बदलावों के लिए वर्चुअल पेज व्यू रिकॉर्ड नहीं किए जाते हैं, तो Google Analytics, एसपीए को एक पेज के तौर पर मानता है. इससे मेट्रिक में गड़बड़ी हो सकती है.

उदाहरण के लिए, user_engagement इवेंट से यह पता चलता है कि कोई उपयोगकर्ता किसी पेज पर कितनी देर तक सक्रिय रहा. वर्चुअल पेज व्यू के बिना, दर्शकों के जुड़ाव के पूरे समय को पेज लोड होने के शुरुआती समय के लिए एट्रिब्यूट किया जाता है. इससे, अलग-अलग स्क्रीन पर बिताए गए समय का विश्लेषण करना मुमकिन नहीं होता.

वर्चुअल पेज व्यू मेज़रमेंट को सही तरीके से लागू करने पर:

• जब उपयोगकर्ता एक वर्चुअल पेज से दूसरे वर्चुअल पेज पर जाता है, तब user_engagement इवेंट भेजा जाता है.
• पिछले वर्चुअल पेज के लिए, दर्शकों के जुड़ाव के समय का हिसाब लगाया जाता है और उसे user_engagement इवेंट के साथ भेजा जाता है. आम तौर पर, ऐसा नए वर्चुअल पेज के page_view इवेंट को प्रोसेस करने से ठीक पहले किया जाता है.
• क्लिक या स्क्रोल जैसे अन्य इवेंट, वर्चुअल पेज के page_location से जुड़े होते हैं. यह वर्चुअल पेज, उपयोगकर्ता को अभी दिख रहा होता है.

इससे आपको अपने एसपीए में मौजूद अलग-अलग स्क्रीन या सेक्शन के लिए, उपयोगकर्ता की दिलचस्पी और अन्य मेट्रिक का विश्लेषण करने में मदद मिलती है. इससे उपयोगकर्ता के सफ़र को ज़्यादा सटीक तरीके से समझा जा सकता है.