Analys för Next.js

Produktanalys för Next.js

Lägg in PulsePanda i din Next.js-app och fånga sidvisningar, events, session replay och heatmaps över alla rutter — App Router eller Pages Router — utan att koppla upp en backend eller kämpa med hydrering.

Kom igång gratis Installationsguide

Varför det spelar roll

Vad Next.js-team äntligen kan se

Ruttändringar spåras inte

Klientsidig navigering i Next.js utlöser inte en fullständig sidladdning, så naiv analys missar de flesta visningar. PulsePanda kopplar in sig i routern och räknar varje ruttändring.

Du släpper funktioner blint

Spåra anpassade events för registreringar, uppgraderingar och funktionsanvändning för att se vad som faktiskt används efter varje driftsättning.

Buggar är svåra att återskapa

Session replay spelar in exakt DOM och konsolfel, så att du kan titta på den trasiga renderingen istället för att gissa utifrån en stack trace.

Installation

Lägg till PulsePanda i Next.js

Lägg till kodavsnittet en gång i din root layout. Använd Next.js Script-komponenten med afterInteractive så att det laddas utan att blockera din första rendering.

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>
  );
}

Använder du Pages Router? Lägg istället till samma <Script> i pages/_app.tsx. Webbanalys, autofångade klick, session replay och heatmaps startar direkt.

Arbetsflöde

Från installation till insikt

Installera kodavsnittet

Lägg till skriptet en gång i ditt Next.js-projekt. Webbanalys, automatiskt fångade klick, session replay och heatmaps börjar samla in data direkt.

Spåra det som betyder något

Anropa pulsepanda.track() vid viktiga händelser och pulsepanda.identify() efter inloggning för att koppla events, sessioner och feedback till varje användare.

Agera på datan

Bygg trattar, se replays bakom avhopp, läs heatmaps och samla in feedback direkt i produkten — allt i en och samma arbetsyta.

Det här får du

Ett kodavsnitt, hela bilden

Ett kodavsnitt, hela bilden
Analyslager	Sidvisningar, custom events, konverteringstrattar och retention.
Beteendelager	Session replay, klick- och scroll-heatmaps samt felkontext.
Feedbacklager	Undersökningar i produkten, feedback-widgetar, formulär och en tavla för funktionsröstning.

Vanliga frågor

Next.js-frågor

Spårar PulsePanda klientsidiga ruttändringar i Next.js?

Ja. SDK:t lyssnar på History API-navigering, så varje övergång i App Router eller Pages Router räknas automatiskt som en sidvisning — inga manuella router-events behövs.

Kommer kodavsnittet att skada mina Core Web Vitals?

Nej. Skriptet är deferred och laddas med afterInteractive-strategin, så det körs efter att ditt innehåll har renderats och blockerar varken LCP eller interaktion.

Kan jag skicka anpassade events från serverkomponenter?

Anpassade events skickas från webbläsaren med pulsepanda.track(). Anropa den från klientkomponenter eller händelsehanterare; serverkomponenter renderar sidan som laddar SDK:t.

Relaterade sidor

Utforska mer

Lägg till analys i din Next.js-app

Installera en gång och koppla samman analys, session replay, heatmaps, trattar och feedback på några minuter.

Kom igång gratis