एक Next.js ऐप में गोपनीयता-प्रथम एनालिटिक्स जोड़ना
बिना कुकीज़, सहमति बैनर, या अनुपालन सिरदर्द के Monoid को Next.js में एकीकृत करने के लिए एक चरण-दर-चरण मार्गदर्शिका।
Next.js एप्लिकेशन में कुछ सामान्य एनालिटिक्स दृष्टिकोण हैं, और उनमें से अधिकांश में या तो एक कुकी बैनर या एक भारी तृतीय-पक्ष स्क्रिप्ट शामिल है जो आपके Core Web Vitals को धीमा कर देती है। यहाँ बताया गया है कि बिना दोनों के रियल-टाइम, गोपनीयता-प्रथम एनालिटिक्स कैसे जोड़ें।
आपको क्या मिलेगा
- क्लाइंट-साइड नेविगेशन सहित हर रूट परिवर्तन पर पेजव्यू ट्रैकिंग
- विज़िटर गणना, रेफ़रर, देश, ब्राउज़र परिवार, और डिवाइस प्रकार
- कोई कुकी नहीं, कोई फ़िंगरप्रिंटिंग नहीं, कोई GDPR सहमति आवश्यक नहीं
- एकल async स्क्रिप्ट टैग — बनाए रखने के लिए कोई npm पैकेज नहीं
चरण 1: एक Monoid खाता बनाएँ
monoid.website पर साइन अप करें और एक नई साइट बनाएँ। आपको एक site_id प्राप्त होगा — आपकी प्रॉपर्टी के लिए एक छोटा अल्फ़ान्यूमेरिक पहचानकर्ता।
चरण 2: ट्रैकर को अपने लेआउट में जोड़ें
App Router के साथ Next.js 13+ में, अपने रूट layout.tsx में ट्रैकर स्क्रिप्ट जोड़ें:
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://api.monoid.website/tracker.min.js"
data-site-id="YOUR_SITE_ID"
strategy="afterInteractive"
/>
</body>
</html>
)
}
strategy="afterInteractive" का उपयोग करना पेज के इंटरैक्टिव होने के बाद स्क्रिप्ट को लोड करता है, जिससे आपका Largest Contentful Paint स्कोर अप्रभावित रहता है।
चरण 3: क्लाइंट-साइड नेविगेशन को संभालें
ट्रैकर का अंतर्निहित history.pushState हुक Pages Router और App Router दोनों में हर नेविगेशन इवेंट पर स्वचालित रूप से फ़ायर होता है। आपको कुछ अतिरिक्त जोड़ने की आवश्यकता नहीं है।
यदि आप कस्टम इवेंट भेजना चाहते हैं — उदाहरण के लिए, जब कोई उपयोगकर्ता चेकआउट पूरा करता है या एक विशिष्ट बटन पर क्लिक करता है — तो ग्लोबल हेल्पर को सीधे कॉल करें:
window.monoid('event', 'checkout_complete')
चरण 4: डैशबोर्ड में सत्यापित करें
अपना Monoid डैशबोर्ड खोलें और अपनी साइट पर एक पेज पर नेविगेट करें। आपको कुछ सेकंड के भीतर रियलटाइम फ़ीड में एक लाइव विज़िटर दिखाई देना चाहिए। यदि आपने एक स्टेजिंग वातावरण सेट किया है, तो सुनिश्चित करें कि यह एक अलग site_id का उपयोग करता है ताकि विकास ट्रैफ़िक आपके उत्पादन मेट्रिक्स को प्रदूषित न करे।
क्या आवश्यक नहीं है
आपको एक कुकी सहमति प्रबंधक स्थापित करने की आवश्यकता नहीं है। आपको एनालिटिक्स कुकीज़ का उल्लेख करने के लिए अपनी गोपनीयता नीति को अपडेट करने की आवश्यकता नहीं है (क्योंकि कोई नहीं है)। और आपको एक npm पैकेज की आवश्यकता नहीं है — ट्रैकर एक वैश्विक एज नेटवर्क से सर्व की गई एकल वैनिला JavaScript फ़ाइल है।
ब्राउज़र परिवार और डिवाइस प्रकार सर्वर-साइड पर सामान्य अनुरोध User-Agent से एकत्रित रिपोर्टिंग के लिए प्राप्त किए जाते हैं। पूर्ण User-Agent स्ट्रिंग, ब्राउज़र संस्करण, कुकी, स्थायी पहचानकर्ता, और डिवाइस फ़िंगरप्रिंट कभी भी संग्रहीत नहीं होते।
अधिकांश Next.js प्रोजेक्ट के लिए, साइन-अप से लाइव डेटा तक यह दो मिनट से कम लेता है।