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 /> का उपयोग करती है, तो कोई अतिरिक्त कॉन्फ़िगरेशन आवश्यक नहीं है — लेकिन इसका कारण ठीक-ठीक समझना उपयोगी है, क्योंकि प्रचलित व्याख्या ग़लत है।

ट्रैकर astro:page-load या Astro के किसी अन्य लाइफ़साइकल इवेंट को नहीं सुनता। लोड होते समय यह history.pushState पर पैच लगाता है। Astro का राउटर उसी History API कॉल के ज़रिए URL अपडेट करता है, इसलिए पैच किया गया फ़ंक्शन हर ट्रांज़िशन पर चलता है और एक पेजव्यू भेजता है। यह हुक Astro की इवेंट परत को सुनने के बजाय उसके नीचे बैठता है।

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

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

ट्रैकर पेजव्यू भेजने का कोई मैन्युअल मेथड उपलब्ध नहीं कराता। ग्लोबल केवल कस्टम इवेंट स्वीकार करता है:

<script>
  // केवल कस्टम इवेंट — trackPageview() जैसा कोई कॉल मौजूद नहीं है।
  // नाम [a-z0-9_][a-z0-9_-]{0,63} से मेल खाना चाहिए।
  window.monoid('event', 'signup_started');
</script>

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

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 क़ानूनी आधार नहीं।

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

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

सही एकीकरण

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

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

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

स्रोत

Comments

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

सही एकीकरण

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

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

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

स्रोत

Related posts

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

User-Agent Client Hints माइग्रेशन: पूरी UA स्ट्रिंग के बिना डिवाइस मापना

आपका एनालिटिक्स स्क्रिप्ट शायद बैक/फॉरवर्ड कैश को डिसेबल कर रहा है

Comments