Installer sur Next.js

App Router

Ajoutez le script à votre layout racine, app/layout.tsx :

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        {children}
        <Script defer src="https://bearingstats.com/s.js" data-site="YOUR_SITE_ID" strategy="afterInteractive" />
      </body>
    </html>
  );
}

Pages Router

Ajoutez le même Script dans pages/_app.tsx, à côté de votre Component.

Événements personnalisés

Envoyez vos événements par une seule petite fonction. Un événement envoyé à l'affichage d'une page (dans un useEffect) arrive souvent avant que s.js soit chargé : cette fonction le garde dans une file d'attente au lieu de le perdre, et déclare window.bearing pour TypeScript. Créez lib/analytics.ts :

// lib/analytics.ts : une seule porte pour vos événements
type Props = Record<string, string | number | boolean>;
type Bearing = ((name: string, options?: { props?: Props }) => void) & { q?: unknown[][] };

declare global {
  interface Window {
    bearing?: Bearing;
  }
}

/** Envoie un événement à Bearing. Les appels faits avant le chargement de s.js attendent dans une file. */
export function track(name: string, props?: Props) {
  if (typeof window === "undefined") return;
  if (!window.bearing) {
    const queue: Bearing = (...args) => {
      (queue.q ??= []).push(args);
    };
    window.bearing = queue;
  }
  window.bearing(name, props ? { props } : undefined);
}

Puis appelez-la depuis n'importe quel composant client :

"use client";
import { useEffect } from "react";
import { track } from "@/lib/analytics";

export function Pricing() {
  useEffect(() => track("pricing_view"), []);
  return <button onClick={() => track("signup", { plan: "pro" })}>…</button>;
}

Bon à savoir

• Les navigations côté client (Link, router.push) comptent comme des pages vues, sans code en plus.
• Événements personnalisés : utilisez track() ci-dessus. Ce que vous pouvez envoyer est dans Événements personnalisés.
• En développement sur localhost, rien n'est compté sauf si vous ajoutez data-allow-localhost.