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 মাধ্যমে অপ্ট-ইন, Astro 5-এ ডিফল্টভাবে সক্রিয়), নেভিগেশনগুলো পেজ আনলোড করে না। Astro ব্যাকগ্রাউন্ডে পরবর্তী পেজ ফেচ করে, DOM অদলবদল করে এবং URL আপডেট করে — সবই বর্তমান JavaScript কনটেক্সট ধ্বংস না করেই।

একটি সাধারণ <script> ট্যাগের মাধ্যমে লোড করা ট্র্যাকার স্ক্রিপ্ট Astro-র বিল্ড পাইপলাইন দ্বারা একটি bundled module script হিসেবে বিবেচিত হয়। Bundled module স্ক্রিপ্টগুলো প্রতি পেজ সেশনে ঠিক একবার এক্সিকিউট হয়। ট্র্যাকার ইনিশিয়ালাইজ হয়, ল্যান্ডিং পেজের জন্য একটি পেজভিউ ট্রিগার করে এবং তারপর ব্যবহারকারী নেভিগেট করার সময় আর কখনো চলে না।

প্রতিটি নেভিগেশনে ট্রিগার করতে, ইনিশিয়ালাইজেশন লজিককে 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 প্রকল্পগুলোতে সাধারণত লোকাল ডেভ, প্রিভিউ এবং প্রোডাকশন পরিবেশ থাকে। 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>
)}

প্রোডাকশনের জন্য .env-এ PUBLIC_MONOID_SITE_ID সেট করুন এবং লোকালি অসেট রেখে দিন। Astro PUBLIC_ দিয়ে শুরু হওয়া ভ্যারিয়েবলগুলোকে ক্লায়েন্টের কাছে প্রকাশ করে; সার্ভার-ওনলি ভ্যারিয়েবলগুলো (প্রিফিক্স ছাড়া) ব্রাউজার-এক্সিকিউটেড কোডে দৃশ্যমান নয়।

আপনার যা প্রয়োজন নেই

কোনো কুকি কনসেন্ট ব্যানার নেই। কোনো CMP ইন্টিগ্রেশন নেই। কালেকশন এন্ডপয়েন্ট IP অ্যাড্রেস, User-Agent, একটি সার্ভার-সাইড সিক্রেট এবং বর্তমান তারিখ থেকে একটি দৈনিক ভিজিটর হ্যাশ গণনা করে:

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

হ্যাশ প্রতি 24 ঘণ্টায় রিসেট হয়। দর্শনার্থীর ডিভাইসে কিছুই সংরক্ষণ করা হয় না। বিস্তৃত ব্রাউজার পরিবার এবং ডিভাইস টাইপ সমষ্টিগত রিপোর্টিংয়ের জন্য অনুরোধের User-Agent থেকে সার্ভার-সাইডে নির্ধারিত হয় — সম্পূর্ণ User-Agent স্ট্রিং, ব্রাউজার সংস্করণ এবং স্থায়ী শনাক্তকারী কখনো সংরক্ষণ করা হয় না।

Astro সাইটগুলো প্রায়ই সম্পূর্ণ স্ট্যাটিক বা ন্যূনতম JavaScript সহ edge-rendered হয়। কোনো কুকি ছাড়াই এবং কোনো কনসেন্টের প্রয়োজন ছাড়াই একটি sub-2 KB অ্যানালিটিক্স স্ক্রিপ্ট যোগ করা সেই দর্শনের সাথে স্বাভাবিকভাবে খাপ খায়। কোনো npm প্যাকেজ রক্ষণাবেক্ষণ করতে হবে না, কোনো SDK আপডেট করতে হবে না এবং অ্যানালিটিক্স প্রসেসিংয়ের জন্য কোনো GDPR আইনি ভিত্তি ডকুমেন্ট করতে হবে না।