Aller au contenu

Connexion Essai gratuit 14 jours

Trafic IA Analytics Tarifs Manifeste Documentation Contact Connexion Essai gratuit 14 jours

Next.js install

Next.js ships a <Script> component built to load external scripts without slowing the page down. That's the method we recommend.

App Router (Next 13+)

In app/layout.tsx:

import Script from 'next/script';

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

Pages Router (Next 12 and earlier)

In pages/_document.tsx or pages/_app.tsx:

import Script from 'next/script';

// inside the root component, after other scripts
<Script
  id="snorklee"
  src="https://snorklee.com/w.js"
  data-site="yoursite.com"
  strategy="afterInteractive"
/>;

Notes

afterInteractive strategy: the code loads once the page is interactive, without blocking the first paint.
Next.js asks for the id attribute so the code isn't added twice.
For dynamic routes, you add the code just once (in the layout); page changes on the client side are counted automatically, with nothing to configure.