একটি Next.js অ্যাপে গোপনীয়তা-প্রথম অ্যানালিটিক্স যোগ করা
কুকি, কনসেন্ট ব্যানার বা সম্মতি জটিলতা ছাড়াই Next.js-এ Monoid ইন্টিগ্রেট করার ধাপে ধাপে গাইড।
Next.js অ্যাপ্লিকেশনগুলোর কয়েকটি সাধারণ অ্যানালিটিক্স পদ্ধতি রয়েছে এবং তাদের বেশিরভাগই হয় একটি কুকি ব্যানার বা একটি ভারী থার্ড-পার্টি স্ক্রিপ্ট জড়িত যা আপনার Core Web Vitals ধীর করে দেয়। দুটোর কোনোটি ছাড়াই কীভাবে রিয়েল-টাইম, গোপনীয়তা-প্রথম অ্যানালিটিক্স যোগ করবেন তা এখানে দেওয়া হলো।
আপনি কী পাবেন
- প্রতিটি রুট পরিবর্তনে পেজভিউ ট্র্যাকিং, ক্লায়েন্ট-সাইড নেভিগেশন সহ
- দর্শনার্থী গণনা, রেফারার, দেশ, ব্রাউজার পরিবার এবং ডিভাইস টাইপ
- কোনো কুকি, কোনো ফিঙ্গারপ্রিন্টিং, কোনো GDPR কনসেন্ট প্রয়োজন নেই
- একক async স্ক্রিপ্ট ট্যাগ — কোনো npm প্যাকেজ রক্ষণাবেক্ষণ করতে হবে না
ধাপ 1: একটি Monoid অ্যাকাউন্ট তৈরি করুন
monoid.website-এ সাইন আপ করুন এবং একটি নতুন সাইট তৈরি করুন। আপনি একটি site_id পাবেন — আপনার প্রোপার্টির জন্য একটি সংক্ষিপ্ত আলফানিউমেরিক শনাক্তকারী।
ধাপ 2: আপনার লেআউটে ট্র্যাকার যোগ করুন
App Router সহ Next.js 13+-এ, আপনার রুট layout.tsx-এ ট্র্যাকার স্ক্রিপ্ট যোগ করুন:
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://api.monoid.website/tracker.min.js"
data-site-id="YOUR_SITE_ID"
strategy="afterInteractive"
/>
</body>
</html>
)
}
strategy="afterInteractive" ব্যবহার করা পেজটি ইন্টার্যাক্টিভ হওয়ার পরে স্ক্রিপ্ট লোড করে, আপনার Largest Contentful Paint স্কোরকে অপ্রভাবিত রাখে।
ধাপ 3: ক্লায়েন্ট-সাইড নেভিগেশন পরিচালনা করুন
ট্র্যাকারের বিল্ট-ইন history.pushState হুক Pages Router এবং App Router উভয়ের প্রতিটি নেভিগেশন ইভেন্টে স্বয়ংক্রিয়ভাবে ট্রিগার হয়। আপনাকে অতিরিক্ত কিছু যোগ করতে হবে না।
আপনি যদি কাস্টম ইভেন্ট পাঠাতে চান — উদাহরণস্বরূপ, যখন একজন ব্যবহারকারী একটি চেকআউট সম্পূর্ণ করেন বা একটি নির্দিষ্ট বাটনে ক্লিক করেন — সরাসরি গ্লোবাল হেল্পার কল করুন:
window.monoid('event', 'checkout_complete')
ধাপ 4: ড্যাশবোর্ডে যাচাই করুন
আপনার Monoid ড্যাশবোর্ড খুলুন এবং আপনার সাইটে একটি পেজে নেভিগেট করুন। কয়েক সেকেন্ডের মধ্যে রিয়েলটাইম ফিডে একজন লাইভ দর্শনার্থী উপস্থিত হওয়া দেখা উচিত। আপনি যদি একটি স্টেজিং পরিবেশ সেটআপ করেন, নিশ্চিত করুন এটি একটি পৃথক site_id ব্যবহার করে যাতে ডেভেলপমেন্ট ট্রাফিক আপনার প্রোডাকশন মেট্রিকগুলোকে দূষিত না করে।
যা প্রয়োজন নেই
আপনার একটি কুকি কনসেন্ট ম্যানেজার ইনস্টল করার প্রয়োজন নেই। অ্যানালিটিক্স কুকি উল্লেখ করতে আপনার গোপনীয়তা নীতি আপডেট করার প্রয়োজন নেই (কারণ কোনোটি নেই)। এবং আপনার একটি npm প্যাকেজের প্রয়োজন নেই — ট্র্যাকারটি একটি একক ভ্যানিলা JavaScript ফাইল যা একটি গ্লোবাল edge নেটওয়ার্ক থেকে পরিবেশিত হয়।
ব্রাউজার পরিবার এবং ডিভাইস টাইপ সমষ্টিগত রিপোর্টিংয়ের জন্য সাধারণ অনুরোধের User-Agent থেকে সার্ভার-সাইডে উদ্ভূত। সম্পূর্ণ User-Agent স্ট্রিং, ব্রাউজার সংস্করণ, কুকি, স্থায়ী শনাক্তকারী এবং ডিভাইস ফিঙ্গারপ্রিন্ট কখনো সংরক্ষণ করা হয় না।
বেশিরভাগ Next.js প্রকল্পের জন্য, এটি সাইন-আপ থেকে লাইভ ডেটা পর্যন্ত দুই মিনিটের কম সময় নেয়।