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

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

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

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

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

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

इस पेज पर यह माना गया है कि आपके पास पहले से ही ये चीज़ें मौजूद हैं:

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

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

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

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

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

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

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

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

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

अहम जानकारी: अगर Google Tag Manager का इस्तेमाल करके टैग कॉन्फ़िगर किए जाते हैं, तो GA4 में इतिहास को अपने-आप ट्रैक करने की सुविधा चालू न करें. ऐसा करने से, पेज व्यू की गिनती दो बार हो सकती है. इसके बजाय, Google Tag Manager की मदद से सिंगल-पेज ऐप्लिकेशन मेज़र करना

ट्यूटोरियल देखें.

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) की सुविधा काम नहीं कर रही है, तो इससे यह पता चल सकता है कि आपका एसपीए, डीओएम को कैसे अपडेट करता है.

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

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

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

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

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

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

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