Analytics sans cookies pour Next.js en 2 minutes

L’installation en trois étapes#

1. 1

   Installer le SDK

   npm i @shipabase/js

   NEXT_PUBLIC_SHIPABASE_KEY=SB-EU-xxxxxxxxxx

2. 2

   Appeler init une seule fois, côté client

   1"use client";2 3import { useEffect } from "react";4import { init } from "@shipabase/js";5 6export function Providers({ children }: { children: React.ReactNode }) {7  useEffect(() => {8    init(process.env.NEXT_PUBLIC_SHIPABASE_KEY!);9  }, []);10  return <>{children}</>;11}

   Dans app/layout.tsx, enveloppez {children} avec <Providers>. N’appelez jamais init dans un Server Component.

3. 3

   Suivre ce qui compte

   1import { trackEvent } from "@shipabase/js";2 3trackEvent("project_created", { plan: "pro" });

   • Nommez les événements en snake_case, au format object_verb, au passé : signup_completed, invoice_sent.
   • 5 à 15 événements, c’est l’ordre de grandeur habituel. Suivez des actions, pas chaque clic.
   • Gardez des props anonymes : offre, nombre, variante. Jamais d’e-mails ni d’identifiants utilisateur.

Pour le Pages Router et la référence complète, voir le guide d’installation Next.js.

Pourquoi pas de bandeau cookies ?#

Le SDK ne stocke rien dans le navigateur : ni cookies, ni localStorage. Les visiteurs sont comptés avec un hash anonyme qui change chaque jour. Tous les détails dans comment les visiteurs sont comptés.