Guías de instalación

Instalar en Next.js

Añada el script una vez en su diseño raíz o en su documento. Las navegaciones del lado del cliente se cuentan sin código adicional.

App Router

Añada el script a su diseño raíz con next/script. Con afterInteractive se carga cuando la página ya es interactiva y sigue cargado durante las navegaciones del lado del cliente.

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

Añada la etiqueta al <Head> de su documento personalizado. El documento se renderiza en el servidor para cada página, así que la etiqueta está en todas.

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>
  );
}

Cambios de ruta

Las navegaciones con next/link y el router pasan por la API History, que el rastreador sigue, así que cada una cuenta como una página vista. No hay nada que conectar.

Con el paquete npm

Si prefiere una importación, inicie el rastreador desde un componente de cliente y renderícelo una vez en su diseño raíz. init() no hace nada en el servidor.

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;
}

Verificación

Despliegue, o ejecute next dev, abra una página y luego abra el resumen. Las solicitudes desde localhost se aceptan mientras Aceptar eventos de localhost esté activado en la configuración del proyecto. Un proyecto aparte para las pruebas locales mantiene ese tráfico fuera de sus informes. Si no llega nada, consulte solución de problemas.