यह दस्तावेज़ उन डेवलपर के लिए है जो Google Analytics का इस्तेमाल करके, अपने सिंगल-पेज ऐप्लिकेशन पर पेज व्यू मेज़र करना चाहते हैं.
सिंगल-पेज ऐप्लिकेशन (एसपीए) ऐसी वेबसाइटें होती हैं जो एचटीएमएल दस्तावेज़ को एक बार लोड करती हैं. इसके बाद, JavaScript एपीआई का इस्तेमाल करके, अतिरिक्त कॉन्टेंट फ़ेच करती हैं.
उदाहरण के लिए, मान लें कि आपके पास कुछ लीड हासिल करने के लिए एक फ़ॉर्म है. इस फ़ॉर्म में तीन स्क्रीन हैं:
- पहली स्क्रीन, ग्राहक की जानकारी कैप्चर करने के लिए.
- दूसरी स्क्रीन, जहां ग्राहक कुछ सेवाओं में अपनी दिलचस्पी दिखाते हैं.
- तीसरी स्क्रीन, ग्राहक की दिलचस्पी से जुड़े वेबिनार के लिए साइन अप करने के लिए.
एसपीए से पेज व्यू को सही तरीके से मेज़र करने के लिए, यह ज़रूरी है कि उपयोगकर्ता जिस स्क्रीन से इंटरैक्ट करे उसके लिए पेज व्यू की गिनती की जाए. साथ ही, पेज रेफ़रर की जानकारी सही मिले, ताकि उपयोगकर्ता के सफ़र को सही तरीके से ट्रैक किया जा सके.
शुरू करने से पहले
इस पेज पर यह मान लिया गया है कि आपके पास पहले से ही ये चीज़ें मौजूद हैं:
आपकी वेबसाइट के लिए Google Analytics खाता और प्रॉपर्टी. Google Analytics सेट अप करने का तरीका जानें .
आपकी वेबसाइट पर Google टैग लागू किया गया है, जो पेज के पहली बार लोड होने पर ट्रिगर होता है. Google टैग सेट अप करने का तरीका जानें.
सिंगल-पेज ऐप्लिकेशन के लिए मेज़रमेंट लागू करना
एसपीए के लिए सटीक मेज़रमेंट लागू करने के लिए, नया वर्चुअल पेज व्यू ट्रिगर करने के लिए इनमें से कोई एक तरीका इस्तेमाल करें:
ब्राउज़र इतिहास में बदलाव (सुझाया गया): अगर आपका एसपीए, History API का इस्तेमाल करता है, खास तौर पर स्क्रीन अपडेट करने के लिए
pushState()औरreplaceState()तरीके का इस्तेमाल करता है, तो यह विकल्प इस्तेमाल करें.कस्टम इवेंट: अगर आपकी वेबसाइट, अलग-अलग स्क्रीन रेंडर करने के लिए
DocumentFragmentऑब्जेक्ट का इस्तेमाल करती है, तो यह विकल्प इस्तेमाल करें.
ब्राउज़र इतिहास में बदलाव के हिसाब से लागू करना
अगर आपका एसपीए, History API का इस्तेमाल करता है, तो Google Analytics में बेहतर मेज़रमेंट की सुविधा चालू की जा सकती है. इससे, ब्राउज़र इतिहास के इवेंट के आधार पर पेज व्यू अपने-आप ट्रैक हो जाएंगे.
GA4 में बेहतर मेज़रमेंट की सुविधा चालू करना
ब्राउज़र इतिहास के आधार पर, page_views को अपने-आप मेज़र करने के लिए:
Google Analytics खोलें
एडमिन पेज पर, _डेटा कलेक्शन और डेटा में बदलाव_ सेक्शन में जाकर, **डेटा स्ट्रीम > वेब** पर **क्लिक करें**.
_बेहतर मेज़रमेंट की सुविधा_ में जाकर, स्विच को **चालू** पर स्लाइड करें. इससे मेज़रमेंट के सभी विकल्प चालू हो जाएंगे.
अलग-अलग विकल्पों में बदलाव करने के लिए, पर क्लिक करें. पेज व्यू में जाकर, ऐडवांस सेटिंग दिखाएं पर क्लिक करें. पक्का करें कि पेज लोड और ब्राउज़र इतिहास के इवेंट के मुताबिक पेज में बदलाव दोनों चालू हों.
बदलाव सेव करें.
ध्यान दें: "ब्राउज़र इतिहास के इवेंट के मुताबिक पेज में बदलाव" के लिए, बेहतर मेज़रमेंट की सुविधा चालू होने पर, Google Analytics इतिहास के इवेंट (जैसे कि एसपीए में इस्तेमाल होने वाले इवेंट) को अपने-आप सुनता है और page_view इवेंट भेजता है. GA4 को पेज व्यू भेजने के लिए, आपको Google Tag Manager में इतिहास के खास वैरिएबल या ट्रिगर कॉन्फ़िगर करने की ज़रूरत नहीं है.
इतिहास के इवेंट के लिए Google Tag Manager के ट्रिगर इस्तेमाल करना
अगर आपको Google Tag Manager में, ब्राउज़र इतिहास में होने वाले बदलावों के आधार पर दूसरे तरह के टैग सक्रिय करने हैं, जैसे कि अन्य मार्केटिंग प्लैटफ़ॉर्म पर डेटा भेजना है, तो "इतिहास में बदलाव" ट्रिगर टाइप का इस्तेमाल किया जा सकता है.
इतिहास में बदलाव वाले ट्रिगर के साथ काम करने के लिए, टैग या वैरिएबल कॉन्फ़िगर करते समय, पक्का करें कि Google Tag Manager के दिए गए सही बिल्ट-इन वैरिएबल का इस्तेमाल किया जाए:
History New URL Fragment: इतिहास के इवेंट के बाद, यूआरएल का फ़्रैगमेंट.History Old URL Fragment: इतिहास के इवेंट से पहले, यूआरएल का फ़्रैगमेंट.History New State: इतिहास की नई स्थिति का ऑब्जेक्ट.History Old State: इतिहास की पुरानी स्थिति का ऑब्जेक्ट.History Source: इतिहास के इवेंट का सोर्स (जैसे किpopstate,pushState,replaceState).
इन बिल्ट-इन वैरिएबल को Google Tag Manager में पहले वैरिएबल > कॉन्फ़िगर करें में जाकर चालू करना पड़ सकता है.
इस ट्रिगर के बारे में ज़्यादा जानकारी के लिए, इतिहास में बदलाव वाला ट्रिगर देखें.
अपने मेज़रमेंट सेटअप की पुष्टि करना
यह पुष्टि करने के लिए कि आपका सिंगल-पेज ऐप्लिकेशन, पेज व्यू को सही तरीके से मेज़र करता है या नहीं:
एसपीए के मेज़रमेंट सेटअप में मौजूद हर टैग के लिए, डीबग मोड चालू करें. DebugView में इवेंट की निगरानी करने का तरीका जानें .
अपने सिंगल-पेज ऐप्लिकेशन पर क्लिक करें. जब आप किसी नई वर्चुअल स्क्रीन पर क्लिक करते हैं, तो आपको 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से जुड़े होते हैं जिसे उपयोगकर्ता फ़िलहाल देख रहा है.
इससे, आपके एसपीए में अलग-अलग स्क्रीन या सेक्शन के लिए, उपयोगकर्ता के इंटरैक्शन और अन्य मेट्रिक का विश्लेषण किया जा सकता है. इससे, उपयोगकर्ता के सफ़र को ज़्यादा सटीक तरीके से समझा जा सकता है.