React et autres frameworks

Le hook

"use client";
import { useSarutobi } from "@sarutobi/react";

export function ContactButton() {
  const { capture } = useSarutobi();

  return (
    <button onClick={() => capture("contact_started", { placement: "header" })}>
      Nous contacter
    </button>
  );
}

useSarutobi() renvoie { capture, track, identify, reset, setConsent, pageview, setContext, flush }.

Hors composant

Depuis un store, un gestionnaire d'événement ou n'importe quel module, importez l'objet directement. Il est aussi réexporté par @sarutobi/react.

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

sarutobi.capture("contact_started", { placement: "footer" });

Vue, Svelte, vanilla

@sarutobi/js n'a aucune dépendance et ne suppose aucun framework. Appelez initune fois, au démarrage de l'application.

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

sarutobi.init({ projectToken: "st_live_8f3a1c9d2e4b6071" });

Applications à page unique

Rien à faire. history.pushState et replaceState sont enveloppés, popstate est écouté, et chaque changement de chemin déclenche un pageleavede l'ancienne page puis un pageview de la nouvelle.

Rendu côté serveur

Tous les accès à window, document et navigator sont gardés. Importer le package dans un Server Component ou un script Node ne casse rien et ne fait rien.