SarutobiDocumentation

Next.js

Le provider est un Client Component qui ne rend que ses enfants : il n'introduit aucune frontière de rendu supplémentaire et n'empêche pas ses enfants d'être des Server Components.

App Router

app/layout.tsx
import { SarutobiProvider } from "@sarutobi/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        <SarutobiProvider
          projectToken={process.env.NEXT_PUBLIC_SARUTOBI_PROJECT_TOKEN!}
          excludePaths={["/admin/**"]}
        >
          {children}
        </SarutobiProvider>
      </body>
    </html>
  );
}

Pages Router

Rien de particulier, et pas d'import différent : le routeur des Pages Router appelle history.pushState en interne, donc le même provider capte ses navigations. Placez-le dans _app.tsx.

pages/_app.tsx
import { SarutobiProvider } from "@sarutobi/react";

export default function App({ Component, pageProps }) {
  return (
    <SarutobiProvider projectToken={process.env.NEXT_PUBLIC_SARUTOBI_PROJECT_TOKEN!}>
      <Component {...pageProps} />
    </SarutobiProvider>
  );
}

Couper la collecte selon l'état applicatif

disabledest réévalué à chaque rendu, contrairement aux autres options : un état d'authentification arrive rarement dès le premier. Tant qu'il vaut true, rien n'est initialisé — un utilisateur écarté dès le montage ne génère même pas le pageview d'entrée.

<SarutobiProvider
  projectToken={projectToken}
  disabled={user?.role === "admin"}
>

Content Security Policy

Si votre site a une CSP, ajoutez le domaine de collecte :

connect-src  https://sarutobi.ascencia.re;

script-src n'est nécessaire que si vous utilisez la balise <script> plutôt que le package npm — avec npm, le code est dans votre propre bundle.

Variables d'environnement

.env.local
NEXT_PUBLIC_SARUTOBI_PROJECT_TOKEN=st_live_8f3a1c9d2e4b6071

Le préfixe NEXT_PUBLIC_est volontaire : cette valeur doit atteindre le navigateur, et elle n'est pas un secret.