यदि आप अपनी वेबसाइट पर आने वाले आगंतुकों की संख्या पर नज़र रखना चाहते हैं तो डेटा एनालिटिक्स आवश्यक है। Google Analytics सहित, आप अपने प्रोजेक्ट में विश्लेषिकी जोड़ने के विभिन्न तरीके हैं। यह एक निःशुल्क सेवा है और इसे स्थापित करना अपेक्षाकृत सरल है।
एसईओ-अनुकूल वेबसाइटों के निर्माण के लिए रिएक्ट फ्रेमवर्क, Next.js का उपयोग करके Google Analytics को अपनी साइट पर जोड़ने का तरीका जानें।
Google विश्लेषिकी की स्थापना
Google Analytics अंतर्दृष्टि प्रदान करता है आपकी वेबसाइट पर आने वाले लोगों के व्यवहार में। यह आपको बताता है कि किन पृष्ठों को देखे जाने की संख्या प्राप्त होती है और आपको स्थान, आयु, रुचि और उनके द्वारा उपयोग किए जाने वाले उपकरण जैसे ऑडियंस डेटा प्रदान करता है। यह डेटा आपके व्यवसाय को सफल होने के लिए किस दिशा में ले जाना चाहिए, इसके बारे में निर्णय लेने में मदद कर सकता है।
आरंभ करने के लिए, पर जाएँ विश्लेषिकी डैशबोर्ड और इन चरणों का पालन करके एक नया खाता बनाएँ:
- क्लिक करें खाता बनाएं नया खाता बनाने के लिए व्यवस्थापक टैब में बटन।
- खाता सेटअप अनुभाग के अंतर्गत खाता नाम जोड़ें।
- एक नाम प्रदान करके एनालिटिक्स गुण बनाएँ।
- व्यवसाय विवरण जोड़ें। अपनी वेबसाइट पर लागू होने वाले विकल्पों का चयन करें।
- क्लिक करें बनाएं संपत्ति की स्थापना समाप्त करने के लिए बटन।
- Google Analytics द्वारा ट्रैक की जाने वाली डेटा स्ट्रीम निर्दिष्ट करने के लिए वेब स्ट्रीम पर क्लिक करें।
- अपनी वेबसाइट का URL निर्दिष्ट करें और डेटा स्ट्रीम को एक नाम दें।
- टैगिंग निर्देशों पर क्लिक करें और वह स्क्रिप्ट प्राप्त करें जिसका उपयोग आप अपनी वेबसाइट पर करेंगे।
- बाद में उपयोग करने के लिए माप आईडी (ट्रैकिंग कोड) कॉपी करें।
ट्रैकिंग कोड मिलने के बाद, आप Next.js प्रोजेक्ट सेट अप कर सकते हैं।
नेक्स्ट.जेएस प्रोजेक्ट की स्थापना
यदि आपके पास पहले से कोई Next.js प्रोजेक्ट सेट अप नहीं है, तो देखें Next.js आधिकारिक गाइड प्रारंभ करना।
जब आपने ग्लोबल साइट टैग प्रॉपर्टी बनाई, तो आपको इस तरह की एक स्क्रिप्ट मिली:
<!-- Google टैग (gtag.js) -->
<स्क्रिप्ट async src="https://www.googletagmanager.com/gtag/js? आईडी = जी-XXXXXXX"></script>
<लिखी हुई कहानी>
खिड़की.डाटालेयर = खिड़की.डेटालेयर || [];
समारोहgtag(){डेटालेयर.पुश(बहस);}
जीटैग('जेएस', नयातारीख());
जीटैग('कॉन्फ़िग', 'जी-एनएचवीडब्ल्यूके8एल97डी');
</script>
आपको इस स्क्रिप्ट को अपनी वेबसाइट के हेड टैग में जोड़ना होगा। Next.js में, आप अगले/स्क्रिप्ट से स्क्रिप्ट घटक का उपयोग करते हैं। यह घटक HTML स्क्रिप्ट टैग का विस्तार है। यह आपको अपनी Next.js वेबसाइट में तृतीय-पक्ष स्क्रिप्ट शामिल करने और प्रदर्शन में सुधार करते हुए उनकी लोडिंग रणनीति सेट करने की अनुमति देता है।
नेक्स्ट.जेएस स्क्रिप्ट घटक विभिन्न लोडिंग रणनीतियों की पेशकश करता है। "आफ्टरएक्टिव" रणनीति एक एनालिटिक्स स्क्रिप्ट के लिए उपयुक्त है। इसका मतलब यह है कि पेज इंटरएक्टिव होने के बाद लोड होगा।
आयात लिखी हुई कहानी से "अगला/स्क्रिप्ट"
<स्क्रिप्ट src="" रणनीति ="के बाद इंटरएक्टिव" />
खोलें पेज/_app.js फ़ाइल और शीर्ष पर स्क्रिप्ट घटक आयात करें।
आयात लिखी हुई कहानी से 'अगला/स्क्रिप्ट'
अगला, Google एनालिटिक्स से स्क्रिप्ट टैग को शामिल करने के लिए ऐप घटक के रिटर्न स्टेटमेंट को संशोधित करें।
आयात '../styles/globals.css'
आयात विन्यास से '../घटक/लेआउट/लेआउट'
आयात लिखी हुई कहानी से 'अगला/स्क्रिप्ट'समारोहMyApp({घटक, पेजप्रॉप्स}) {
वापस करना (
<>
<स्क्रिप्ट रणनीति ="के बाद इंटरएक्टिव" स्रोत ="https://www.googletagmanager.com/gtag/js? आईडी = जी-XXXXXXX"/>
<लिखी हुई कहानी
आईडी ='गूगल विश्लेषिकी'
रणनीति ="के बाद इंटरएक्टिव"
खतरनाक रूप से सेट इनर HTML = {{
__html: `
खिड़की.डाटालेयर = खिड़की.डेटालेयर || [];
समारोहgtag(){डेटालेयर.पुश(बहस);}
जीटैग('जेएस', नयातारीख());
जीटैग('कॉन्फ़िग', 'जी-XXXXXXX', {
पेज_पथ: खिड़की।जगह.पथनाम,
});
`,
}}
/>
<विन्यास>
<घटक {...पेजप्रॉप्स} />
</Layout>
</>
)
}
निर्यातगलती करना MyApp
ध्यान दें कि यह टैग Google Analytics द्वारा प्रदान किए गए टैग से थोड़ा अलग है। यह खतरनाक रूप से सेट इनर HTML का उपयोग करता है और इसमें एक लोडिंग रणनीति शामिल है। हालांकि, वे वही काम करते हैं।
G-XXXXXXXXX को अपने ट्रैकिंग कोड से बदलना याद रखें। ट्रैकिंग कोड को गुप्त रखने के लिए इसे .env फ़ाइल में संग्रहीत करने की भी सलाह दी जाती है।
सिंगल पेज एप्लिकेशन में Google Analytics जोड़ना
आप एक नियमित वेबसाइट के लिए उपरोक्त स्क्रिप्ट टैग का उपयोग कर सकते हैं और इसे उसी पर छोड़ सकते हैं। हालांकि, नेक्स्ट.जेएस वेबसाइट जैसे सिंगल-पेज एप्लिकेशन के लिए, आपको कुछ अतिरिक्त कदम उठाने होंगे।
ए एक पेज का आवेदन (एसपीए) एक ऐसी वेबसाइट है जो प्रारंभिक अनुरोध के जवाब में सभी सामग्री को पहले ही लोड कर देती है। जैसे ही उपयोगकर्ता साइट को नेविगेट करने के लिए लिंक पर क्लिक करता है, ब्राउज़र सामग्री को गतिशील रूप से लोड करता है। यह पृष्ठ अनुरोध नहीं करता है, केवल यूआरएल बदलता है।
यह उन Next.js पेजों के लिए अलग है जो getServerSideProps का उपयोग करते हैं क्योंकि ब्राउज़र अनुरोध पर उन्हें प्रस्तुत करता है।
जब कोई नया पेज लोड होता है तो Google टैग पेज व्यू रिकॉर्ड करके काम करता है। इसलिए, एसपीए के लिए, Google टैग केवल एक बार निष्पादित किया जाता है, जब पृष्ठ शुरू में लोड होता है। इसलिए, जब उपयोगकर्ता विभिन्न पृष्ठों पर नेविगेट करता है, तो आपको मैन्युअल रूप से दृश्य रिकॉर्ड करना होगा।
एकल-पृष्ठ माप देखें गूगल विश्लेषिकी गाइड अधिक जानने के लिए।
Gtag स्क्रिप्ट का उपयोग करके Next.js में मैन्युअल रूप से पृष्ठ दृश्य रिकॉर्ड करने के लिए, नामक एक नया फ़ोल्डर बनाएंउदारीकरण और एक नई फ़ाइल जोड़ें, gtag.js.
निर्यातकॉन्स्ट GA_MEASUREMENT_ID = प्रक्रिया.env. GA_MEASUREMENT_ID;निर्यातकॉन्स्ट पृष्ठदृश्य = () => {
विंडो.जीटैग("कॉन्फ़िग", GA_MEASUREMENT_ID, {
पेज_पथ: यूआरएल,
});
};
निर्यातकॉन्स्ट घटना = ({कार्रवाई, श्रेणी, लेबल, मूल्य}) => {
विंडो.जीटैग("आयोजन", कार्य, {
घटना_श्रेणी: श्रेणी,
इवेंट_लेबल: लेबल,
कीमत,
});
};
इसके बाद, इन कार्यों का उपयोग करने के लिए /pages/_app.js को संशोधित करें और useEffect हुक में पेज व्यू को ट्रैक करें।
आयात '../styles/globals.css'
आयात विन्यास से '../घटक/लेआउट/लेआउट'
आयात लिखी हुई कहानी से 'अगला/स्क्रिप्ट'
आयात {यूज़ राउटर} से 'अगला/राउटर';
आयात {उपयोग प्रभाव} से "प्रतिक्रिया";
आयात * जैसा gtag से "../lib/gtag"समारोहMyApp({घटक, पेजप्रॉप्स}: AppProps) {
कॉन्स्ट राउटर = यूज़ राउटर ();उपयोग प्रभाव (() => {
कॉन्स्ट हैंडलरूट चेंज = (यूआरएल) => {
gtag।पृष्ठ का दृश्य(यूआरएल);
};राऊटर.ईवेंट्स.ऑन ("मार्ग परिवर्तन पूर्ण", हैंडलरूट चेंज);
वापस करना () => {
राऊटर.इवेंट्स.ऑफ़ ("मार्ग परिवर्तन पूर्ण", हैंडलरूट चेंज);
};
}, [राउटर.ईवेंट्स]);
वापस करना (
<>
<स्क्रिप्ट रणनीति ="के बाद इंटरएक्टिव" स्रोत ="https://www.googletagmanager.com/gtag/js? आईडी = जी-XXXXXX"></Script>
<लिखी हुई कहानी
आईडी ='गूगल विश्लेषिकी'
रणनीति ="के बाद इंटरएक्टिव"
खतरनाक रूप से सेट इनर HTML = {{
__html: `
खिड़की.डाटालेयर = खिड़की.डेटालेयर || [];
समारोहgtag(){डेटालेयर.पुश(बहस);}
जीटैग('जेएस', नयातारीख());
जीटैग('कॉन्फ़िग', 'जी-XXXXXX', {
पेज_पथ: खिड़की।जगह.पथनाम,
});
`,
}}
/>
<विन्यास>
<घटक {...पेजप्रॉप्स} />
</Layout>
</>
)
}
निर्यातगलती करना MyApp
यह उदाहरण हर बार जब उपयोगकर्ता किसी अन्य पृष्ठ पर नेविगेट करता है, तो एक पृष्ठ दृश्य रिकॉर्ड करने के लिए useRouter और useEffect हुक का उपयोग करता है।
यूज़ राउटर मेथड को नेक्स्ट/राउटर से कॉल करें और इसे राउटर वेरिएबल को असाइन करें। यूज इफेक्ट हुक में, राउटर पर रूट चेंजकंप्लीट इवेंट को सुनें। जब घटना शुरू होती है, तो हैंडलरूट चेंज फ़ंक्शन को कॉल करके एक पृष्ठ दृश्य रिकॉर्ड करें।
useEffect हुक का रिटर्न स्टेटमेंट 'ऑफ़' विधि के साथ RouteChangeComplete ईवेंट से सदस्यता समाप्त करता है।
उपयोगकर्ता डेटा एकत्र करने के लिए Google Analytics का उपयोग करें
डेटा अच्छे निर्णय लेने के लिए बेहद फायदेमंद है, और Google Analytics को अपनी वेबसाइट पर जोड़ना इसे एकत्र करने का एक तरीका है।
जब कोई पृष्ठ क्लाइंट-साइड रूटिंग का उपयोग करता है तब भी आप सभी पृष्ठ दृश्य रिकॉर्ड करना सुनिश्चित करने के लिए हुक का उपयोग करके Google Analytics को Next.js प्रोजेक्ट में जोड़ सकते हैं। अब आप देख सकते हैं कि आपकी साइट को आपके Google Analytics डैशबोर्ड पर कितने व्यू मिले हैं।