Guides d’installation

Installer sur Next.js

Ajoutez le script une seule fois dans votre mise en page racine ou votre document. Les navigations côté client sont comptées sans code supplémentaire.

App Router

Ajoutez le script à votre mise en page racine avec next/script. Avec afterInteractive, il se charge une fois la page interactive et reste chargé pendant les navigations côté client.

app/layout.tsxTSX

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn-stg.webmetric.io/v1/b.js"
          data-key="wm_w_your_write_key"
          data-host="https://in-stg.webmetric.io"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router

Ajoutez la balise dans le <Head> de votre document personnalisé. Le document est rendu sur le serveur pour chaque page : la balise est donc présente partout.

pages/_document.tsxTSX

import { Head, Html, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <script
          defer
          src="https://cdn-stg.webmetric.io/v1/b.js"
          data-key="wm_w_your_write_key"
          data-host="https://in-stg.webmetric.io"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Changements de route

Les navigations avec next/link et le routeur passent par l’API History, que le traceur suit : chacune compte comme une page vue. Il n’y a rien à brancher.

Avec le paquet npm

Si vous préférez un import, démarrez le traceur depuis un composant client et affichez-le une fois dans votre mise en page racine. init() ne fait rien sur le serveur.

app/analytics.tsxTSX

"use client";

import { init } from "@webmetric/sdk";
import { useEffect } from "react";

export function Analytics() {
  useEffect(() => {
    init({
      key: "wm_w_your_write_key",
      host: "https://in-stg.webmetric.io",
      assetOrigin: "https://cdn-stg.webmetric.io/v1",
    });
  }, []);
  return null;
}

Vérification

Déployez, ou lancez next dev, ouvrez une page, puis ouvrez la vue d’ensemble. Les requêtes depuis localhost sont acceptées tant que l’option Accepter les événements de localhost est activée dans les paramètres du projet. Un projet distinct pour vos tests locaux garde ce trafic hors de vos rapports. Si rien n’arrive, consultez le dépannage.