Analytics

Configurer Plausible, Google Analytics ou PostHog pour le suivi du trafic et l'analyse des événements.

Vue d'ensemble

ScaleRocket prend en charge plusieurs fournisseurs d'analytics. Vous pouvez utiliser Plausible pour des analytics respectueuses de la vie privée, Google Analytics pour un suivi complet, ou PostHog pour l'analyse produit. Tous sont configurés via des variables d'environnement.

Plausible

Plausible est un outil d'analytics léger et respectueux de la vie privée qui ne nécessite pas de bannière de cookies.

Configuration

Créez un compte sur plausible.io et ajoutez votre domaine.
Définissez la variable d'environnement :

NEXT_PUBLIC_PLAUSIBLE_DOMAIN=yoursite.com

Ajoutez le script à votre layout racine :

// src/app/layout.tsx
<head>
  {process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN && (
    <script
      defer
      data-domain={process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN}
      src="https://plausible.io/js/script.js"
    />
  )}
</head>

Suivi des événements

// Track custom events
window.plausible?.("signup", { props: { plan: "pro" } });

Google Analytics

Configuration

Créez une propriété GA4 sur analytics.google.com.
Définissez la variable d'environnement :

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

Ajoutez les scripts à votre layout racine :

// src/app/layout.tsx
<head>
  {process.env.NEXT_PUBLIC_GA_ID && (
    <>
      <script
        async
        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
      />
      <script
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}');
          `,
        }}
      />
    </>
  )}
</head>

Suivi des événements

// Track custom events
gtag("event", "purchase", { value: 99, currency: "USD" });

PostHog

PostHog fournit de l'analyse produit, de l'enregistrement de session et des feature flags.

Configuration

Créez un compte sur posthog.com.
Définissez les variables d'environnement :

NEXT_PUBLIC_POSTHOG_KEY=phc_XXXXXXXXXXXXXXX
NEXT_PUBLIC_POSTHOG_HOST=https://app.posthog.com

Initialisez PostHog dans un composant client :

// src/app/providers.tsx
"use client";

import posthog from "posthog-js";
import { PostHogProvider } from "posthog-js/react";
import { useEffect } from "react";

export function PHProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    if (process.env.NEXT_PUBLIC_POSTHOG_KEY) {
      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
        api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
        capture_pageview: true,
      });
    }
  }, []);

  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
}

Encapsulez votre layout avec le provider :

<PHProvider>{children}</PHProvider>

Suivi des événements

import posthog from "posthog-js";

posthog.capture("button_clicked", { button: "cta_hero" });

Où ajouter le code de suivi

Emplacement	Objectif
`src/app/layout.tsx` `<head>`	Balises script pour Plausible et GA
`src/app/providers.tsx`	Initialisation du provider PostHog
Gestionnaires d'événements des composants	Appels de suivi d'événements personnalisés
Routes API / Edge Functions	Suivi d'événements côté serveur

Modèles de suivi d'événements

Suivre les clics sur les CTA

<button
  onClick={() => {
    window.plausible?.("cta_click", { props: { location: "hero" } });
    // or: gtag("event", "cta_click", { location: "hero" });
    // or: posthog.capture("cta_click", { location: "hero" });
  }}
>
  Get Started
</button>

Suivre les vues de page (SPA)

Pour la navigation côté client, suivez les vues de page lors des changements de route. PostHog gère cela automatiquement avec capture_pageview: true. Pour GA et Plausible, utilisez un écouteur de changement de route ou le hook usePathname de Next.js.

Conseils

Utilisez un seul fournisseur d'analytics pour garder la taille du bundle réduite et éviter le double comptage.
Plausible est le choix le plus simple et évite les exigences de consentement aux cookies du RGPD.
N'envoyez jamais d'informations personnellement identifiables (PII) aux analytics à moins que votre politique de confidentialité ne l'autorise.
Encapsulez les scripts d'analytics dans des vérifications de variables d'environnement pour qu'ils ne se chargent qu'en production.

Fini ? Marquez cette page comme terminée.

Analytics

On this page