تحليلات لـ Next.js

تحليلات المنتج لـ Next.js

أدرج PulsePanda في تطبيق Next.js والتقط مشاهدات الصفحات والأحداث وإعادة تشغيل الجلسات والخرائط الحرارية عبر كل مسار — App Router أو Pages Router — دون إعداد خلفية أو معاناة مع الترطيب.

ابدأ مجانًا دليل التثبيت

لماذا يهم ذلك

ما الذي يمكن لفرق Next.js رؤيته أخيرًا

تظل تغييرات المسار غير متتبَّعة

لا يطلق التنقل من جانب العميل في Next.js تحميلًا كاملًا للصفحة، لذا تفوّت التحليلات الساذجة معظم المشاهدات. تربط PulsePanda الموجّه وتحسب كل تغيير في المسار.

تشحن الميزات بشكل أعمى

تتبّع أحداثًا مخصصة للتسجيلات والترقيات واستخدام الميزات لترى ما الذي يُستخدم فعلًا بعد كل نشر.

يصعب إعادة إنتاج الأخطاء

تسجّل إعادة تشغيل الجلسات DOM وأخطاء الكونسول بدقة، لتشاهد التصيير المعطّل بدلاً من التخمين من تتبّع المكدس.

الإعداد

أضف PulsePanda إلى Next.js

أضف المقتطف مرة واحدة في التخطيط الجذري. استخدم Next.js Script المكوّن مع afterInteractive بحيث يُحمّل دون حجب رسمتك الأولى.

App Router — app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://pulsepanda.dev/sdk.js"
          data-project="YOUR_PROJECT_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

تستخدم Pages Router؟ أضف الـ <Script> إلى pages/_app.tsx بدلاً من ذلك. تبدأ تحليلات الويب والنقرات المُلتقطة تلقائيًا وإعادة تشغيل الجلسات والخرائط الحرارية فورًا.

سير العمل

من التثبيت إلى الرؤية

ثبّت المقتطف

أضف السكربت مرة واحدة إلى مشروع Next.js الخاص بك. تبدأ تحليلات الويب والنقرات المُلتقطة تلقائيًا وإعادة تشغيل الجلسات والخرائط الحرارية في الجمع فورًا.

تتبّع ما يهم

استدعِ pulsepanda.track() على الإجراءات الرئيسية و pulsepanda.identify() بعد تسجيل الدخول لربط الأحداث والجلسات والملاحظات بكل مستخدم.

اتخذ قرارات بناءً على البيانات

أنشئ المسارات، وشاهد عمليات إعادة التشغيل وراء حالات التسرّب، واقرأ الخرائط الحرارية، واجمع الملاحظات داخل المنتج — كل ذلك في مساحة عمل واحدة.

ما تحصل عليه

مقتطف واحد، الصورة الكاملة

طبقة التحليلاتمشاهدات الصفحات والأحداث المخصصة ومسارات التحويل والاحتفاظ.

طبقة السلوكإعادة تشغيل الجلسات وخرائط النقر والتمرير الحرارية وسياق الأخطاء.

طبقة الملاحظاتاستبيانات داخل المنتج وأدوات الملاحظات والنماذج ولوحة تصويت على الميزات.

الأسئلة الشائعة

أسئلة Next.js

هل تتعقب PulsePanda تغييرات المسار من جانب العميل في Next.js؟

نعم. يستمع SDK لتنقل History API، لذا يُحسب كل انتقال في App Router أو Pages Router كمشاهدة صفحة تلقائيًا — دون الحاجة إلى أحداث موجّه يدوية.

هل سيضر المقتطف بـ Core Web Vitals؟

لا. السكربت مؤجّل ويُحمّل باستراتيجية afterInteractive، لذا يعمل بعد رسم محتواك ولا يحجب LCP أو التفاعل.

هل يمكنني إرسال أحداث مخصصة من مكونات الخادم؟

تُرسل الأحداث المخصصة من المتصفح باستخدام pulsepanda.track(). استدعِها من مكونات العميل أو معالجات الأحداث؛ تعرض مكونات الخادم الصفحة التي تحمّل SDK.

صفحات ذات صلة

استكشف المزيد

أضف التحليلات إلى تطبيق Next.js

ثبّت مرة واحدة واربط التحليلات وإعادة تشغيل الجلسات والخرائط الحرارية والمسارات والملاحظات في دقائق.

ابدأ مجانًا