Next.js

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.

Overview

Supported Frameworks

Third-Party Integrations

Core Features

📦 Installation Overview

⚙️ App Router (Next.js 13+)

Example: `app/layout.tsx`

📁 Pages Router

Example: `pages/_document.js

🛡 Best Practices

🚀 You’re Ready!

​📦 Installation Overview

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

​Example: app/layout.tsx

​📁 Pages Router

​Example: `pages/_document.js

​🛡 Best Practices

​🚀 You’re Ready!

📦 Installation Overview

⚙️ App Router (Next.js 13+)

Example: `app/layout.tsx`

📁 Pages Router

Example: `pages/_document.js

🛡 Best Practices

🚀 You’re Ready!