Analytics pour Next.js

Analytics produit 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.

Commencer gratuitement Guide d'installation

Pourquoi c'est important

Ce que les équipes Next.js peuvent enfin voir

Les changements de route ne sont pas suivis

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.

Vous livrez des fonctionnalités à l'aveugle

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.

Les bugs sont difficiles à reproduire

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

Ajouter PulsePanda à Next.js

Ajoutez l'extrait une seule fois dans votre layout racine. Utilisez le composant Script composant 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

De l'installation à l'insight

Installez l'extrait

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.

Suivez ce qui compte

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.

Agissez sur les données

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

Un extrait, la vue d'ensemble complète

Couche analytiquePages vues, événements personnalisés, funnels de conversion et rétention.

Couche comportementaleSession replay, heatmaps de clic et de défilement, et contexte d'erreur.

Couche de retoursSondages dans le produit, widgets de retour, formulaires et un tableau de vote sur les fonctionnalités.

FAQ

Questions Next.js

PulsePanda suit-il les changements de route côté client dans Next.js ?

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.

L'extrait nuira-t-il à mes Core Web Vitals ?

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.

Puis-je envoyer des événements personnalisés depuis des composants serveur ?

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

En savoir plus

Ajoutez l'analytics à votre application Next.js

Installez une seule fois et connectez l'analytics, le session replay, les heatmaps, les funnels et les retours en quelques minutes.

Commencer gratuitement