একটি SvelteKit অ্যাপে গোপনীয়তা-প্রথম অ্যানালিটিক্স যোগ করা

SvelteKit 2 সেই অ্যানালিটিক্স ইন্টিগ্রেশনগুলো ভেঙে দেয় যারা পরিমাপকে পেজ লাইফসাইকেলের সঙ্গে বেঁধে রাখে। একটি সাধারণ <script> ট্যাগ কেবল একবারই ট্রিগার হয় — ডকুমেন্টের প্রথম লোডে — এবং তারপর আর কখনও নয়, তাই এর পরের প্রতিটি ক্লায়েন্ট-সাইড নেভিগেশন অদৃশ্য থেকে যায়। Monoid ট্র্যাকার পেজ লাইফসাইকেলের বদলে History API পর্যবেক্ষণ করে এটি এড়ায়।

কেন সাধারণ script ট্যাগ যথেষ্ট নয়

<svelte:head>-এ থাকা একটি <script> ট্যাগ প্রতি ডকুমেন্ট লোডে একবার চলে। SvelteKit 2-এর রাউটার ডকুমেন্ট আনলোড না করেই কনটেন্ট জায়গামতো বদলে দেয়, তাই কিছুই সেটিকে পুনরায় চালায় না। যে ট্র্যাকারের একমাত্র ট্রিগার DOMContentLoaded বা load, সেটি প্রবেশ রুটটি জানিয়ে তারপর চুপ হয়ে যায়।

এটি SvelteKit 2 অ্যাপ্লিকেশনগুলোতে Google Analytics GA4 প্রাথমিক লোডে শুধু প্রথম পেজভিউ রেকর্ড করে এমন ব্যাপকভাবে রিপোর্ট করা সমস্যার মূল কারণ।

উত্তর হলো নেভিগেশনটিকেই শনাক্ত করা, আর এর জন্য SvelteKit-নির্দিষ্ট কোনো ইন্টিগ্রেশন লাগে না। SvelteKit-এর ক্লায়েন্ট-সাইড রাউটার history.pushState কল করেই URL হালনাগাদ করে, তাই history.pushState-এ প্যাচ বসানো ট্র্যাকার $app/navigation বা ফ্রেমওয়ার্কের কোনো হুকে সাবস্ক্রাইব না করেই প্রতিটি ক্লায়েন্ট-সাইড রুট পরিবর্তন দেখতে পায়।

সঠিক পদ্ধতি

আপনার রুট +layout.svelte-এ <svelte:head> ব্যবহার করে একবার Monoid ট্র্যাকার স্ক্রিপ্ট যোগ করুন:

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

ট্র্যাকারের DOMContentLoaded লিসেনার প্রাথমিক পেজ লোড কভার করে। পরবর্তী ক্লায়েন্ট-সাইড নেভিগেশনের জন্য, SvelteKit URL হালনাগাদ করার সঙ্গে সঙ্গেই তার history.pushState প্যাচ চলে, ফলে এটি নতুন 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()