Démarrage rapide

Ce guide utilise l’adaptateur React / Next.js (@jichio/react), le connecteur recommandé pour la V1. Pour d’autres environnements, voir la vue d’ensemble des SDK.

Installer le package

pnpm add @jichio/react

@jichio/react dépend de @jichio/core — vous pouvez ajouter les deux explicitement si votre gestionnaire de paquets ne remonte pas les dépendances transitives.

Configurer les variables d'environnement

.env.local

NEXT_PUBLIC_ANALYTICS_KEY=<votre-clé-projet>
NEXT_PUBLIC_ANALYTICS_ENDPOINT=https://ingest.example.com

La clé API identifie votre projet côté ingestion. Côté web elle est nécessairement exposée au client : elle n’autorise que l’écriture d’événements, jamais la lecture du dashboard. Voir Sécurité.

Brancher le provider

Enveloppez votre application avec AnalyticsProvider, au plus haut niveau (root layout en App Router).

app/layout.tsx

import { AnalyticsProvider } from "@jichio/react";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="fr">
      <body>
        <AnalyticsProvider
          apiKey={process.env.NEXT_PUBLIC_ANALYTICS_KEY!}
          endpoint={process.env.NEXT_PUBLIC_ANALYTICS_ENDPOINT!}
        >
          {children}
        </AnalyticsProvider>
      </body>
    </html>
  );
}

Le provider crée une instance createAnalytics({ source: "sdk-react" }), monte le suivi des pageviews SPA et délègue l’auto-capture (pageview initial + clics) au core.

Tracker un événement custom

components/SignupButton.tsx

"use client";
import { useAnalytics } from "@jichio/react";

export function SignupButton() {
  const analytics = useAnalytics();
  return (
    <button
      onClick={() => analytics.track("signup_completed", { plan: "pro" })}
    >
      Créer mon compte
    </button>
  );
}

Vérifier l'envoi

Ouvrez l’onglet Network de votre navigateur et cherchez la requête POST {endpoint}/v1/events. Une réponse 200 avec { "accepted": n } confirme l’ingestion.

Les événements sont envoyés en batch (toutes les 5 s ou dès 10 événements). Un flush est aussi déclenché quand l’onglet passe en arrière-plan.

Et ensuite ?

Identifier les utilisateurs

Associez les événements suivants à un utilisateur authentifié.

Événements custom

Bonnes pratiques de nommage et de propriétés pour track().

Intégration Next.js

Détails App Router, pageviews SPA et proxy same-origin en dev.

Dépannage

CORS, proxy, redémarrage dev, comportement d’identify.

Prise en main

SDK

Concepts

Guides

Démarrage rapide

Et ensuite ?

Identifier les utilisateurs

Événements custom

Intégration Next.js

Dépannage

​Et ensuite ?

Identifier les utilisateurs

Événements custom

Intégration Next.js

Dépannage

Et ensuite ?