Analisi per Next.js
Inserisci PulsePanda nella tua app Next.js e acquisisci visualizzazioni di pagina, eventi, registrazione delle sessioni e heatmap su ogni route (App Router o Pages Router) senza collegare un backend né combattere con l'hydration.
Perché è importante
La navigazione lato client in Next.js non attiva un caricamento completo della pagina, quindi le analisi ingenue perdono la maggior parte delle visualizzazioni. PulsePanda si aggancia al router e conta ogni cambio di route.
Traccia eventi personalizzati per registrazioni, upgrade e uso delle funzionalità per vedere cosa viene davvero usato dopo ogni deploy.
La registrazione delle sessioni registra il DOM esatto e gli errori della console, così puoi guardare il render rotto invece di indovinare da uno stack trace.
Configurazione
Aggiungi lo snippet una sola volta nel layout principale. Usa il componente Script di Next.js con afterInteractive così si carica senza bloccare il primo 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>
);
}Usi il Pages Router? Aggiungi invece lo stesso <Script> a pages/_app.tsx. Analisi web, clic acquisiti automaticamente, registrazione delle sessioni e heatmap partono subito.
Flusso di lavoro
Aggiungi lo script una sola volta al tuo progetto Next.js. Analisi web, clic acquisiti automaticamente, registrazione delle sessioni e heatmap iniziano subito a raccogliere dati.
Chiama pulsepanda.track() sulle azioni chiave e pulsepanda.identify() dopo l'accesso per collegare eventi, sessioni e feedback a ogni utente.
Crea funnel, guarda le registrazioni dietro gli abbandoni, leggi le heatmap e raccogli feedback nel prodotto, tutto in un unico workspace.
Cosa ottieni
| Livello di analisi | Visualizzazioni di pagina, eventi personalizzati, funnel di conversione e retention. |
|---|---|
| Livello del comportamento | Registrazione delle sessioni, heatmap di clic e scroll e contesto degli errori. |
| Livello del feedback | Sondaggi incorporati, widget di feedback, moduli e una bacheca di voto delle funzionalità. |
FAQ
Sì. L'SDK ascolta la navigazione tramite History API, quindi ogni transizione dell'App Router o del Pages Router viene contata automaticamente come visualizzazione di pagina, senza bisogno di eventi del router manuali.
No. Lo script è differito e caricato con la strategia afterInteractive, quindi viene eseguito dopo il rendering dei contenuti e non blocca LCP né l'interazione.
Gli eventi personalizzati vengono inviati dal browser con pulsepanda.track(). Chiamalo dai client component o dagli event handler; i server component renderizzano la pagina che carica l'SDK.
Pagine correlate
Installa una volta e collega analisi, registrazione delle sessioni, heatmap, funnel e feedback in pochi minuti.
Inizia gratis