React et autres frameworks

Le hook

"use client";
import { useSarutobi } from "@ascencia/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, optOut, optIn, isOptedOut } — la même surface pour @ascencia/sarutobi-vue et @ascencia/sarutobi-svelte. Les groupes et les flags n'y sont pas : ils se lisent sur l'objet importé, parce qu'une lecture de flag arrive aussi hors composant, dans un chargeur de route ou un store.

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 @ascencia/sarutobi-react.

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

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

Vue, Svelte, vanilla

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

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

sarutobi.init({ siteId: "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 pageleave de 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.