Hark.
← Install guides

Add Hark to a Next.js site

Add the script to your root layout. Navigating with <Link> or router.push is counted as a pageview, with no extra code.

The code below is for example.com. Replace it with your site's domain.

  1. 1

    App Router: add it to app/layout.tsx

    Put the tag in the <head> of your root layout.

    app/layout.tsx

    export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <script defer data-domain="example.com" src="https://harkstats.com/js/script.js"></script>
      </head>
      <body>{children}</body>
    </html>
  )
}
  2. 2

    Pages Router: add it to pages/_document.tsx

    If you use the Pages Router instead, put it in the custom document's <Head>.

    pages/_document.tsx

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

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

    Deploy, then visit your site

    Hark ignores localhost, so check the deployed site. Your site's settings page in Hark shows "Receiving events" when the first pageview arrives.

Custom events

Call window.analytics from your components, for example in a click handler:

window.analytics?.("Signup", { props: { plan: "pro" } })

Not seeing visits?

  • Your site's settings page in Hark says "Receiving events" once the first pageview arrives. It updates by itself, so keep it open while you visit your site.
  • data-domain must be the domain you added to Hark, without https:// or www.
  • Visits from localhost aren't counted. Add a data-local attribute to the tag to test on your machine.
  • Check your published page's source for the tag: caching plugins and CDNs can serve an old copy.
  • Some ad blockers block analytics scripts, including this one; try another browser to rule that out.
  • To leave your own visits out, run localStorage.analytics_ignore = "true" in your browser's console on your site.

No site yet? The trial is free, with no card.

Start your free trial