إضافة تحليلات تُقدِّم الخصوصية أولاً إلى تطبيق Next.js
دليل خطوة بخطوة لدمج Monoid في Next.js دون كوكيز أو لافتات موافقة أو متاعب امتثال.
تطبيقات Next.js لها عدة مناهج شائعة للتحليلات، ومعظمها يستلزم إما لافتة كوكيز أو نصاً خارجياً ثقيلاً يُبطئ مؤشرات الويب الأساسية لديك. إليك كيف تُضيف تحليلات فورية تُقدِّم الخصوصية أولاً دون أي منهما.
ما ستحصل عليه
- تتبع مشاهدات الصفحات عند كل تغيير مسار، بما في ذلك التنقل من جانب العميل
- أعداد الزوار، والمُحيلين، والبلدان، وعائلات المتصفحات، وأنواع الأجهزة
- لا كوكيز، ولا بصمات، ولا موافقة GDPR مطلوبة
- وسم نص غير متزامن واحد — لا حزمة npm لصيانتها
الخطوة 1: أنشئ حساب Monoid
سجِّل في monoid.website وأنشئ موقعاً جديداً. ستتلقى site_id — مُعرِّفاً قصيراً أبجدياً رقمياً لخاصيتك.
الخطوة 2: أضف المُتتبِّع إلى تخطيطك
في Next.js 13+ مع App Router، أضف نص المُتتبِّع إلى 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 عادي يُقدَّم من شبكة حافة عالمية.
تُستنبط عائلة المتصفح ونوع الجهاز من جهة الخادم من User-Agent العادي للطلب لأغراض إعداد التقارير الإجمالية. أما سلاسل User-Agent الكاملة وإصدارات المتصفح والكوكيز والمُعرِّفات الدائمة وبصمات الأجهزة فلا تُخزَّن أبداً.
لمعظم مشاريع Next.js، يستغرق ذلك أقل من دقيقتين من التسجيل إلى البيانات الحية.