Adding Privacy-First Analytics to an Astro Site

Astro की View Transitions पूर्ण ब्राउज़र रीलोड के बिना पेज सामग्री को जगह में बदल देती हैं — जिसका अर्थ है कि DOMContentLoaded या load पर निर्भर कोई भी एनालिटिक्स स्क्रिप्ट केवल एक बार, प्रारंभिक विज़िट पर ही चलेगी। हर बाद का क्लाइंट-साइड नेविगेशन अदृश्य है। यह आपकी ओर से कोई कॉन्फ़िगरेशन त्रुटि नहीं है; यह ClientRouter के काम करने के तरीक़े का एक मौलिक परिणाम है।

यही चुपचाप-ट्रैकिंग समस्या SvelteKit 2 और Remix में मौजूद है, लेकिन प्रत्येक फ़्रेमवर्क में समाधान अलग है। Astro में, उत्तर astro:page-load लाइफ़साइकल इवेंट है।

सामान्य स्क्रिप्ट टैग क्यों विफल होता है

जब <ClientRouter /> सक्रिय होता है (Astro 4 में astro:transitions के माध्यम से opt-in, Astro 5 में डिफ़ॉल्ट रूप से सक्षम), नेविगेशन पेज को अनलोड नहीं करते। Astro बैकग्राउंड में अगला पेज प्राप्त करता है, DOM को बदलता है, और URL को अपडेट करता है — सब वर्तमान JavaScript संदर्भ को नष्ट किए बिना।

एक सादे <script> टैग के माध्यम से लोड किया गया ट्रैकर स्क्रिप्ट Astro की बिल्ड पाइपलाइन द्वारा एक bundled module script के रूप में माना जाता है। Bundled module scripts प्रति पेज सत्र में ठीक एक बार निष्पादित होती हैं। ट्रैकर आरंभ होता है, लैंडिंग पेज के लिए एक पेजव्यू फ़ायर करता है, और फिर उपयोगकर्ता द्वारा नेविगेट करते समय कभी नहीं चलता।

प्रत्येक नेविगेशन पर फ़ायर करने के लिए, इनिशियलाइज़ेशन लॉजिक को Astro के नेविगेशन लाइफ़साइकल से जोड़ा जाना चाहिए। सही हुक astro:page-load है, जो नया पेज दिखाई देने और सभी ब्लॉकिंग स्क्रिप्ट लोड होने के बाद फ़ायर होता है — प्रारंभिक लोड पर और हर बाद के ट्रांज़िशन पर दोनों।

सही एकीकरण

ट्रैकर स्क्रिप्ट को अपने रूट लेआउट में एक बार जोड़ें (src/layouts/Layout.astro या समकक्ष), फिर astro:page-load के लिए एक लिसनर संलग्न करें:

---
// Layout.astro
---
<html lang="en">
  <head>
    <!-- your head content -->
  </head>
  <body>
    <slot />

    <script
      is:inline
      src="https://api.monoid.website/tracker.min.js"
      data-site-id="YOUR_SITE_ID"
      async
    ></script>
  </body>
</html>

is:inline निर्देश Astro के बंडलर को बताता है कि इस स्क्रिप्ट को ठीक वैसे ही छोड़ दे। इसके बिना, Astro स्क्रिप्ट को एक मॉड्यूल के रूप में संसाधित करेगा, इसे डुप्लीकेट हटाएगा, और पुनः निष्पादन को दबाएगा। is:inline के साथ, स्क्रिप्ट टैग प्रत्येक पेज के HTML आउटपुट में शब्दशः उत्सर्जित होता है।

View Transitions का उपयोग न करने वाली साइटों के लिए, यह सब आपको चाहिए। ट्रैकर लोड पर एक बार फ़ायर होता है और आप कर चुके हैं।

View Transitions नेविगेशन को संभालना

यदि आपकी साइट <ClientRouter /> का उपयोग करती है, तो ट्रैकर का अंतर्निहित history.pushState हुक प्रत्येक ट्रांज़िशन के बाद सही ढंग से फ़ायर होता है — ट्रैकर आंतरिक रूप से Astro के नेविगेशन इवेंट सुनता है। कोई अतिरिक्त कॉन्फ़िगरेशन की आवश्यकता नहीं है।

सत्यापित करने के लिए, DevTools Network टैब खोलें और collect द्वारा फ़िल्टर करें। दो पेजों के बीच नेविगेट करें। आपको प्रति नेविगेशन एक POST अनुरोध दिखाई देना चाहिए, पहले लोड सहित।

यदि आप ट्रैकर को सशर्त रूप से इंजेक्ट कर रहे हैं और इसे प्रत्येक स्वैप के बाद पुनः आरंभ करने की आवश्यकता है (उदाहरण के लिए, एक डायनामिक आइलैंड माउंट होने के बाद), तो आप मैन्युअल रूप से एक पुनः-रन ट्रिगर कर सकते हैं:

<script data-astro-rerun>
  // This block re-executes after every View Transition.
  // Use sparingly — most tracker logic should not live here.
  if (window.__monoid) {
    window.__monoid.trackPageview();
  }
</script>

data-astro-rerun एट्रिब्यूट इनलाइन स्क्रिप्ट को प्रत्येक ट्रांज़िशन के बाद पुनः निष्पादित करने के लिए बाध्य करता है। ध्यान दें कि यह is:inline को निहित करता है, इसलिए यह केवल ग़ैर-बंडल की गई स्क्रिप्ट पर लागू होता है।

वातावरणों को अलग करना

Astro प्रोजेक्ट्स में आमतौर पर स्थानीय dev, preview, और production वातावरण होते हैं। site_id रखने के लिए और विकास में ट्रैकिंग को दबाने के लिए एक एनवायरनमेंट वैरिएबल का उपयोग करें:

---
const siteId = import.meta.env.PUBLIC_MONOID_SITE_ID
---

{siteId && (
  <script
    is:inline
    src="https://api.monoid.website/tracker.min.js"
    data-site-id={siteId}
    async
  ></script>
)}

PUBLIC_MONOID_SITE_ID को production के लिए .env में सेट करें और स्थानीय रूप से इसे अनसेट छोड़ दें। Astro PUBLIC_ से प्रीफ़िक्स्ड वैरिएबल को क्लाइंट के सामने उजागर करता है; केवल-सर्वर वैरिएबल (प्रीफ़िक्स के बिना) ब्राउज़र में निष्पादित कोड में दिखाई नहीं देते।

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

कोई कुकी सहमति बैनर नहीं। कोई CMP एकीकरण नहीं। कलेक्शन एंडपॉइंट IP एड्रेस, User-Agent, एक सर्वर-साइड रहस्य, और वर्तमान तारीख़ से एक दैनिक विज़िटर हैश की गणना करता है:

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

हैश हर 24 घंटे में रीसेट हो जाता है। विज़िटर के डिवाइस पर कुछ भी संग्रहीत नहीं होता। व्यापक ब्राउज़र परिवार और डिवाइस प्रकार सर्वर-साइड पर अनुरोध User-Agent से एकत्रित रिपोर्टिंग के लिए प्राप्त किए जाते हैं — पूर्ण User-Agent स्ट्रिंग, ब्राउज़र संस्करण, और स्थायी पहचानकर्ता कभी भी संग्रहीत नहीं होते।

Astro साइटें अक्सर पूरी तरह से स्थिर या न्यूनतम JavaScript के साथ एज-रेंडर होती हैं। बिना कुकीज़ और बिना सहमति आवश्यकता के एक सब-2 KB एनालिटिक्स स्क्रिप्ट जोड़ना उस दर्शन में स्वाभाविक रूप से फ़िट बैठता है। बनाए रखने के लिए कोई npm पैकेज नहीं, अपडेट करने के लिए कोई SDK नहीं, और एनालिटिक्स प्रसंस्करण के लिए दस्तावेज़ करने के लिए कोई GDPR क़ानूनी आधार नहीं।