Statsdot in Next.js installieren

App Router

Fügen Sie das Skript in Ihr Root-Layout app/layout.tsx ein:

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://statsdot.com/js/script.js"
          data-domain="yoursite.com"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pages Router

Fügen Sie in pages/_document.tsx ein einfaches Script-Tag ein:

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

export default function Document() {
  return (
    <Html>
      <Head>
        <script defer data-domain="yoursite.com" src="https://statsdot.com/js/script.js" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Routenwechsel

Next.js wechselt Seiten über die History-API des Browsers, und Statsdot hört darauf. Jeder Routenwechsel zählt deshalb als Seitenaufruf. Sie müssen keine Router-Events verdrahten.

Eigene Ereignisse

<button onClick={() => window.statsdot?.track('Signup')}>Create account</button>

In TypeScript deklarieren Sie das globale Objekt einmal:

declare global {
  interface Window { statsdot?: { track: (name: string, label?: string) => void } }
}

Entwicklung

Besuche von localhost werden ignoriert, Ihre lokale Entwicklung fließt also nicht in Ihre Zahlen ein.