Next.js

1. 1

   Add the Script component from next/script to your root layout. The script reads its settings from its own tag, and next/script keeps the data- attributes.

2. 2

   Deploy. Client-side navigations between pages are tracked automatically.

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://trakily.com/js/script.js"
          data-website-id="pls_…"
          data-domain="example.com"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

On the Pages Router, put the same component in pages/_app.tsx so it loads on every page:

// pages/_app.tsx
import type { AppProps } from "next/app";
import Script from "next/script";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        src="https://trakily.com/js/script.js"
        data-website-id="pls_…"
        data-domain="example.com"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}

You don't need any router integration. The script listens to history.pushState, history.replaceState and the popstate event, and records a pageview whenever the path or query string changes. Hash-only changes (#section) are not counted as new pages.

When the visitor moves on, the time they spent on the previous page is sent as a page-leave event, which powers session time and bounce rate.

Because the cookies are first-party, your route handlers and server actions can read _trakily_vid and pass it to your payment provider at checkout. That gives the strongest revenue attribution. See Revenue attribution.

Open your live site in a normal browser window, then go to Settings → Tracking in Trakily. The status line switches from Waiting for the first event… to Receiving events within a few seconds of your visit.

Still waiting? Add data-debug="true" to the script tag and open the browser console: every event is logged with a [trakily] prefix, and if tracking is disabled the log says why (missing attributes, localhost, iframe, bot or trakily_ignore). The Quickstart lists the common causes.