אנליטיקה עבור Next.js

אנליטיקת מוצר עבור Next.js

שלבו את PulsePanda באפליקציית ה-Next.js שלכם ולכדו צפיות בעמוד, אירועים, הקלטת סשנים ומפות חום בכל נתיב — App Router או Pages Router — ללא חיווט backend או מאבק ב-hydration.

התחילו בחינם מדריך התקנה

למה זה חשוב

מה צוותי Next.js יכולים סוף סוף לראות

שינויי נתיב אינם נמדדים

ניווט בצד הלקוח ב-Next.js אינו מפעיל טעינת עמוד מלאה, ולכן אנליטיקה נאיבית מפספסת את רוב הצפיות. PulsePanda מתחבר לנתב וסופרת כל שינוי נתיב.

אתם משחררים תכונות בעיוורון

עקבו אחר אירועים מותאמים אישית עבור הרשמות, שדרוגים ושימוש בתכונות כדי לראות מה באמת בשימוש לאחר כל deploy.

באגים קשים לשחזור

הקלטת סשנים מתעדת את ה-DOM המדויק ושגיאות console, כך שתוכלו לצפות ברינדור השבור במקום לנחש מ-stack trace.

הגדרה

הוסיפו את PulsePanda ל-Next.js

הוסיפו את קטע הקוד פעם אחת בתבנית השורש שלכם. השתמשו ברכיב Script של Next.js עם 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 או אינטראקציה.

האם אני יכול לשלוח אירועים מותאמים אישית מ-server components?

אירועים מותאמים אישית נשלחים מהדפדפן באמצעות pulsepanda.track(). קראו לזה מ-client components או ממטפלי אירועים; server components מרנדרים את העמוד שטוען את ה-SDK.

דפים קשורים

גלו עוד

הוסיפו אנליטיקה לאפליקציית ה-Next.js שלכם

התקינו פעם אחת וחברו אנליטיקה, הקלטת סשנים, מפות חום, משפכים ומשוב תוך דקות.

התחילו בחינם