Analytics

1. Créer le site dans Plausible

Aller dans Plausible > "Add Website"

2. Ajouter votre domaine

• Indiquez votre domaine (ex: example.com).
• Pour un développement local, conservez votre domaine de prod; l'application est configurée pour traquer en local.
• Continuer avec l'installation de Plausible via next-plausible.

3. Pour l'installation de next-plausible, renseigner la variable d'environnement

Foundation Builder lit le domaine public depuis NEXT_PUBLIC_BASE_DOMAIN pour initialiser Plausible.

NEXT_PUBLIC_BASE_DOMAIN=example.com

4. Intégration côté application

L'intégration de Plausible est déjà en place dans le layout racine via next-plausible. Documentation next-plausible

// app/layout.tsx (extrait)
<PlausibleProvider
  domain={process.env.NEXT_PUBLIC_BASE_DOMAIN || ""}
  trackOutboundLinks={true}
  taggedEvents={true}
  trackLocalhost={true}
/>

Options activées:

• trackOutboundLinks: suivi des clics vers des liens externes
• taggedEvents: support des événements via attributs HTML
• trackLocalhost: suivi activé en local (utile pour vérifier l'intégration)

5. Suivre des événements personnalisés

Créer des événements personnalisés depuis l'interface de Plausible:

Deux approches sont supportées:

a) Hook usePlausible

// Exemple dans un Client Component
import { usePlausible } from "next-plausible";

export function CtaButton() {
  const plausible = usePlausible();
  return (
    <button
      onClick={() => {
        plausible("Signup Start", { props: { plan: "pro" } });
      }}
    >
      Commencer
    </button>
  );
}

b) Attributs d'événements balisés

// Tout élément peut porter un nom d'événement
<button className="plausible-event-name=Signup+Start">Commencer</button>

Un exemple est déjà présent dans le bloc Hero:

// blocks/landing-page/hero/index.tsx (extrait)
const plausible = usePlausible();
plausible("Best Test");