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

SvelteKit 2 उन एनालिटिक्स इंटीग्रेशन को तोड़ देता है जो मापन को पेज लाइफ़साइकल पर टिकाते हैं। एक सादा <script> टैग केवल एक बार फायर होता है — दस्तावेज़ के पहले लोड पर — और उसके बाद कभी नहीं, इसलिए उसके आगे का हर क्लाइंट-साइड नेविगेशन अदृश्य रहता है। Monoid ट्रैकर पेज लाइफ़साइकल के बजाय History API को देखकर इससे बचता है।

सादा script टैग क्यों पर्याप्त नहीं है

<svelte:head> में रखा <script> टैग प्रति दस्तावेज़ लोड एक बार चलता है। SvelteKit 2 का राउटर दस्तावेज़ को अनलोड किए बिना सामग्री को यथास्थान बदल देता है, इसलिए कुछ भी उसे दोबारा नहीं चलाता। जिस ट्रैकर का एकमात्र ट्रिगर DOMContentLoaded या load है, वह प्रवेश रूट दर्ज करता है और फिर चुप हो जाता है।

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

उत्तर है नेविगेशन को ही पहचानना, और इसके लिए SvelteKit-विशिष्ट इंटीग्रेशन की आवश्यकता नहीं है। SvelteKit का क्लाइंट-साइड राउटर history.pushState कॉल करके URL अपडेट करता है, इसलिए history.pushState पर पैच लगाने वाला ट्रैकर $app/navigation या किसी फ़्रेमवर्क हुक की सदस्यता लिए बिना हर क्लाइंट-साइड रूट परिवर्तन देख लेता है।

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

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 द्वारा URL अपडेट किए जाने के तुरंत बाद चलता है, इसलिए वह नया location.pathname पढ़ता है और प्रति रूट परिवर्तन एक पेजव्यू भेजता है।

एक ज़रूरी चेतावनी: यह पैच pushState को कवर करता है, popstate को नहीं। बैक और फ़ॉरवर्ड बटन pushState कॉल किए बिना रूट बदल देते हैं, इसलिए फ़िलहाल उनसे नया पेजव्यू दर्ज नहीं होता।

सत्यापित करने के लिए, 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) एनालिटिक्स कलेक्शन को प्रभावित नहीं करता, क्योंकि ट्रैकिंग हाइड्रेशन के बाद पूरी तरह से ब्राउज़र में होती है।

स्रोत

• SvelteKit रूटिंग (svelte.dev)
• SvelteKit $app/navigation (svelte.dev)
• SvelteKit $env/static/public (svelte.dev)
• MDN: History.pushState()