Instalación en Next.js

Next.js dispone de un componente <Script> optimizado para cargar scripts externos sin ralentizar la página. Es el método que recomendamos.

#App Router (Next 13+)

En app/layout.tsx:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="es">
      <body>
        {children}
        <Script
          id="snorklee"
          src="https://snorklee.com/w.js"
          data-site="misitio.com"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

#Pages Router (Next 12 y anteriores)

En pages/_document.tsx o pages/_app.tsx:

import Script from 'next/script';

// en el componente raíz, después de los otros scripts
<Script
  id="snorklee"
  src="https://snorklee.com/w.js"
  data-site="misitio.com"
  strategy="afterInteractive"
/>;

#Notas

• Estrategia afterInteractive: el código se carga cuando la página ya es interactiva, sin bloquear la primera visualización.
• Next.js pide el atributo id para no colocar el código dos veces.
• Para las rutas dinámicas, colocas el código una sola vez (en el layout). Los cambios de página del lado del navegador (<Link>, router.push, el botón Atrás — todo lo que pasa por la History API del navegador) se cuentan de forma automática, sin nada que configurar: en cada cambio de ruta, la página que se abandona se envía con su duración y su profundidad de desplazamiento, y luego empieza una nueva página vista.
• Solo se envía la ruta de la dirección: nunca los parámetros que siguen a ?, nunca el fragmento que sigue a #. Un cambio que solo afecte a esas partes no cuenta, por tanto, como una nueva página.
• El sitio de procedencia solo se aplica a la página de llegada, igual que en una navegación clásica.
• Lo mismo vale para los demás sitios de una sola página (Nuxt, React Router, SvelteKit…): una sola instalación, y cada cambio de ruta se cuenta.