SarutobiDocumentation
Retour

Démarrage rapide

Sarutobi relie les événements d'un produit à des personnes et des sessions pour analyser adoption, conversion et rétention. Choisissez la stratégie de consentement adaptée à votre projet avant l'installation — les options sont détaillées dans Vie privée et RGPD.

1. Récupérer la clé du site

Créez le site depuis le dashboard, puis copiez la clé du site sur la page Installation — c'est la valeur que le SDK attend sous le nom siteId. Elle ressemble à st_live_8f3a1c9d2e4b6071.

2. Installer

terminal
bun add @ascencia/sarutobi-react@next     # React, Next.js
bun add @ascencia/sarutobi-js@next        # vanilla, Vue, Svelte…

3. Brancher

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        <SarutobiProvider siteId={process.env.NEXT_PUBLIC_SARUTOBI_SITE_ID!}>
          {children}
        </SarutobiProvider>
      </body>
    </html>
  );
}

C'est tout. Les pages vues, les visites, les referrers, les UTM, le pays, l'appareil, les Core Web Vitals et les erreurs JavaScript sont collectés sans autre instrumentation.

4. Vérifier

Rechargez une page de votre site, puis ouvrez la page Installation du dashboard : l'indicateur passe au vert dès le premier event reçu. Si rien n'arrive, la page Dépannage couvre les trois causes qui expliquent presque tous les cas.

Un event métier

import { sarutobi } from "@ascencia/sarutobi-js";

sarutobi.capture("cta_clicked", { placement: "hero", variant: "primary" });

Les conventions de nommage sont importantes pour que le dashboard reste lisible dans six mois — elles tiennent en quatre règles, sur la page Nommer ses events.