एक SvelteKit ऐप में गोपनीयता-प्रथम एनालिटिक्स जोड़ना

SvelteKit 2 ने अधिकांश मौजूदा एनालिटिक्स इंटीग्रेशन को चुपचाप तोड़ दिया। एक सादा <script> टैग जो SvelteKit 1 में ठीक काम करता था, SvelteKit 2 में केवल हार्ड रीलोड पर फायर होगा, हर क्लाइंट-साइड नेविगेशन से चूक जाएगा। मानक फिक्स — history.pushState को हुक करना — भी काम नहीं करता, क्योंकि SvelteKit pushState कॉल किए जाने से पहले राउटर स्तर पर नेविगेशन को इंटरसेप्ट करता है। Monoid ट्रैकर इसे बॉक्स से बाहर सही ढंग से संभालता है।

सामान्य दृष्टिकोण क्यों विफल होता है

पारंपरिक एनालिटिक्स स्क्रिप्ट history.pushState और history.replaceState को मंकी-पैच करके रूट परिवर्तनों का पता लगाती हैं। SvelteKit का राउटर अपनी आंतरिक नेविगेशन प्रिमिटिव्स को कॉल करता है और pushState को केवल एक साइड इफेक्ट के रूप में कॉल करता है, जब रूट ट्रांज़िशन पहले से ही प्रगति पर हो। जब तक पैच किया गया pushState फायर होता है, नया रूट पूरी तरह से रेंडर नहीं हुआ हो सकता, और कुछ प्रकार के नेविगेशन (प्रोग्रामेटिक goto() कॉल, प्रीलोडिंग के साथ <a> क्लिक) में टाइमिंग डुप्लिकेट या मिस्ड इवेंट उत्पन्न करती है।

यह व्यापक रूप से रिपोर्ट की गई समस्या का मूल कारण है जहाँ Google Analytics GA4 SvelteKit 2 एप्लिकेशन में आरंभिक लोड पर केवल पहला पेजव्यू रिकॉर्ड करता है।

सही दृष्टिकोण

Monoid ट्रैकर स्क्रिप्ट को <svelte:head> का उपयोग करके अपने रूट +layout.svelte में एक बार जोड़ें:

<svelte:head>
  <script
    async
    src="https://api.monoid.website/tracker.min.js"
    data-site-id="YOUR_SITE_ID"
  ></script>
</svelte:head>

ट्रैकर का बिल्ट-इन DOMContentLoaded लिसनर आरंभिक पेज लोड पर फायर होता है। बाद के क्लाइंट-साइड नेविगेशन के लिए, ट्रैकर का history.pushState हुक SvelteKit के आंतरिक नेविगेशन के रिज़ॉल्व होने के बाद फायर होता है — मतलब हर रूट, पहला सहित, बिना डुप्लिकेट या मिस्ड इवेंट के ठीक एक बार ट्रैक किया जाता है।

सत्यापित करने के लिए, DevTools में Network टैब खोलें और /collect के लिए POST अनुरोधों को देखें। आपको प्रति रूट परिवर्तन एक देखना चाहिए।

स्टेजिंग ट्रैफ़िक को अलग करना

SvelteKit प्रोजेक्ट आमतौर पर डेवलपमेंट के दौरान localhost पर चलते हैं। एक अलग साइट पंजीकृत करें और इसके site_id को एक एनवायरनमेंट वेरिएबल से बाइंड करें ताकि डेवलपमेंट ट्रैफ़िक प्रोडक्शन मेट्रिक्स को कभी प्रदूषित न करे:

<script>
  const siteId = import.meta.env.VITE_MONOID_SITE_ID
</script>

<svelte:head>
  {#if siteId}
    <script
      async
      src="https://api.monoid.website/tracker.min.js"
      data-site-id={siteId}
    ></script>
  {/if}
</svelte:head>

डेवलपमेंट के लिए .env.local में VITE_MONOID_SITE_ID सेट करें (या ट्रैकिंग को दबाने के लिए इसे अनसेट छोड़ दें) और प्रोडक्शन के लिए अपने डिप्लॉयमेंट एनवायरनमेंट में। {#if siteId} ब्लॉक सुनिश्चित करता है कि वेरिएबल सेट न होने पर ट्रैकर कभी इंजेक्ट नहीं किया जाता।

जो आपको नहीं चाहिए

कोई कुकी सहमति बैनर नहीं। कोई कुकी नीति अपडेट नहीं। कोई navigator.cookieEnabled चेक नहीं। कलेक्शन एंडपॉइंट IP एड्रेस, User-Agent, एक सर्वर-साइड सीक्रेट और वर्तमान दिनांक से एक दैनिक विज़िटर हैश प्राप्त करता है:

visitor_hash = SHA-256(IP + UA + SALT_SECRET + YYYY-MM-DD)

हैश हर 24 घंटे में रीसेट होता है और IP या User-Agent को पुनर्प्राप्त करने के लिए इसे रिवर्स नहीं किया जा सकता। विज़िटर के डिवाइस पर कुछ भी संग्रहीत नहीं होता। इसका मतलब है कि इंटीग्रेशन ePrivacy या PECR सहमति आवश्यकताओं को ट्रिगर नहीं करता — सहमति के लिए कुछ भी नहीं है।

डैशबोर्ड में सत्यापन

डिप्लॉय करने के बाद, अपना एनालिटिक्स डैशबोर्ड खोलें और अपनी लाइव साइट पर कई रूट के बीच नेविगेट करें। प्रत्येक नेविगेशन को सही पथ के साथ एक नया पेजव्यू एंट्री उत्पन्न करना चाहिए। यदि आप नेविगेशन के बावजूद केवल एक एंट्री देखते हैं, तो जाँचें कि स्क्रिप्ट रूट लेआउट में लोड है और VITE_MONOID_SITE_ID प्रोडक्शन एनवायरनमेंट में सेट है।

आप जो SvelteKit एडाप्टर उपयोग करते हैं (Cloudflare, Vercel, Node, static) एनालिटिक्स कलेक्शन को प्रभावित नहीं करता, क्योंकि ट्रैकिंग हाइड्रेशन के बाद पूरी तरह से ब्राउज़र में होती है।