Analytics pour Next.js
Intégrez PulsePanda à votre application Next.js et capturez les pages vues, les événements, le session replay et les heatmaps sur chaque route — App Router ou Pages Router — sans configurer de backend ni vous battre avec l'hydratation.
Pourquoi c'est important
La navigation côté client dans Next.js ne déclenche pas un chargement complet de page, donc une analytics naïve manque la plupart des vues. PulsePanda s'accroche au router et compte chaque changement de route.
Suivez des événements personnalisés pour les inscriptions, les mises à niveau et l'usage des fonctionnalités afin de voir ce qui est réellement utilisé après chaque déploiement.
Le session replay enregistre le DOM exact et les erreurs de la console, pour que vous puissiez regarder le rendu cassé au lieu de deviner à partir d'une stack trace.
Installation
Ajoutez l'extrait une seule fois dans votre layout racine. Utilisez le composant Script de Next.js avec afterInteractive pour qu'il se charge sans bloquer votre premier affichage.
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>
);
}Vous utilisez le Pages Router ? Ajoutez le même <Script> à pages/_app.tsx à la place. L'analytics web, la capture automatique des clics, le session replay et les heatmaps commencent immédiatement.
Flux de travail
Ajoutez le script une seule fois à votre projet Next.js. L'analytics web, la capture automatique des clics, le session replay et les heatmaps commencent à collecter immédiatement.
Appelez pulsepanda.track() sur les actions clés et pulsepanda.identify() après la connexion pour relier les événements, les sessions et les retours à chaque utilisateur.
Créez des funnels, regardez les replays derrière les abandons, lisez les heatmaps et recueillez des retours dans le produit — le tout dans un seul espace de travail.
Ce que vous obtenez
| Couche analytique | Pages vues, événements personnalisés, funnels de conversion et rétention. |
|---|---|
| Couche comportementale | Session replay, heatmaps de clic et de défilement, et contexte d'erreur. |
| Couche de retours | Sondages dans le produit, widgets de retour, formulaires et un tableau de vote sur les fonctionnalités. |
FAQ
Oui. Le SDK écoute la navigation de la History API, donc chaque transition App Router ou Pages Router est comptée automatiquement comme une page vue — aucun événement de router manuel nécessaire.
Non. Le script est différé et chargé avec la stratégie afterInteractive, il s'exécute donc après l'affichage de votre contenu et ne bloque ni le LCP ni l'interaction.
Les événements personnalisés sont envoyés depuis le navigateur avec pulsepanda.track(). Appelez-le depuis des composants client ou des gestionnaires d'événements ; les composants serveur rendent la page qui charge le SDK.
Pages associées
Installez une seule fois et connectez l'analytics, le session replay, les heatmaps, les funnels et les retours en quelques minutes.
Commencer gratuitement