Skip to main content
Trakg works seamlessly with both App Router and Pages Router in Next.js. It captures user interactions on any form built with standard HTML elements, and gives you real-time insights — with zero backend config.

​
📦 Installation Overview

All you need is to embed the Trakg tracking script. We recommend using Next.js’s built-in <Script /> component for better performance. 🔁 Replace YOUR_ID_GIVEN with your actual Site ID found in your Trakg dashboard.

​
⚙️ App Router (Next.js 13+)

If you’re using the App Router (/app directory), you can add the script inside your layout.tsx or layout.js file — which wraps all routes.

​
Example: app/layout.tsx

import Script from "next/script";

export default function RootLayout({children}: {children: React.ReactNode}) {
	return (
		<html lang='en'>
			<body>
				{children}

				{/* ✅ Trakg Script */}
				<Script
					defer
					src='https://cdn.trakg.com/api/v1/tracker.min.js?id=YOUR_ID_GIVEN'
					strategy='afterInteractive'
				/>
			</body>
		</html>
	);
}

​
📁 Pages Router

If you’re using the traditional Pages Router (/pages directory), include the Trakg script in your custom _document.js.

​
Example: `pages/_document.js

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

export default function Document() {
	return (
		<Html lang='en'>
			<Head />
			<body>
				<Main />
				<NextScript />

				{/* ✅ Trakg Script */}
				<script
					defer
					src='https://cdn.trakg.com/api/v1/tracker.min.js?id=YOUR_ID_GIVEN'
				></script>
			</body>
		</Html>
	);
}

​
🛡 Best Practices

⚠️ You must use a standard <script defer /> here — since Next.js does not support <Script /> from next/script inside _document.js.
Recommendations
  • Always use the defer attribute — ensures the script loads after the HTML is parsed.
  • For App Router, prefer <Script strategy="afterInteractive" /> from next/script.
  • Keep the script at the end of <body> for non-blocking performance.
  • No need to modify your forms — Trakg supports native <form>, <input>, <textarea>, and <select> elements.
  • Works with any form library or custom UI inputs — as long as native HTML form elements are rendered in the DOM.

​
🚀 You’re Ready!

Once the script is added, Trakg will automatically:
  • 🔍 Track user interactions on your forms
  • 📝 Capture partially filled form data
  • ✅ Log completed submissions
  • 📊 Display real-time analytics in your dashboard
  • 🔁 Help you recover abandoned leads
Need help? Contact Support or View Dashboard to explore your captured data.