Back to onboarding

Install guide

Install on Next.js

Drop the tracker into your root layout using next/script — works for both App Router and Pages Router.

Snippet

// app/layout.tsx (App Router)
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://api.sourcetrace.xyz/t.js?key=YOUR_API_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Replace YOUR_API_KEY with the key from Settings → Sites.

Steps

  1. 1.Grab your API key from Settings → Sites.
  2. 2.Paste the <Script /> tag into your root layout.tsx (App Router) or pages/_app.tsx (Pages Router).
  3. 3.Use strategy="afterInteractive" to avoid blocking hydration.
  4. 4.Deploy and visit your site to fire the first event.

Screenshots

VS Code with app/layout.tsx showing the Script tag.

Onboarding wizard showing the green Verify install state.

Tracker installed? Verify itSkip to dashboard →