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

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

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

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

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

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

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

• आपकी वेबसाइट के लिए 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 के ज़रूरी हिस्सों को पूरी तरह और एक साथ अपडेट करता हो. रेंडरिंग में देरी होने या मुख्य DOM ट्री से कॉन्टेंट छिपा होने की वजह से, हो सकता है कि ब्राउज़र की खोज सुविधा से तुरंत इंडेक्स न किया जा सके. कॉन्टेंट ऐक्सेस किया जा सकता है या नहीं, इसकी पुष्टि करने के लिए वर्चुअल नेविगेशन के बाद, पेज पर मौजूद खोज सुविधा की जाँच करें.

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

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

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

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

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

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