Adding ZapDigits Tracking Script to a Next.js App
If you want to integrate ZapDigits tracking into your Next.js application, the best way is to use the built-in next/script component. This ensures scripts are optimized and loaded properly.
✅ Option 1: Add Globally (All Pages)
If you want the tracking script on every page:
App Router (app/layout.tsx )
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://www.zapdigits.com/script/track.js"
data-site-id="{replace_with_your_site_id}"
strategy="afterInteractive"
/>
</body>
</html>
);
}
Pages Router (pages/_app.tsx )
import Script from "next/script";
import type { AppProps } from "next/app";
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<Script
src="https://www.zapdigits.com/script/track.js"
data-site-id="{replace_with_your_site_id}"
strategy="afterInteractive"
/>
</>
);
}
✅ Option 2: Add Only on Specific Pages
If you only need tracking on certain pages:
import Script from "next/script";
export default function Dashboard() {
return (
<>
<h1>Dashboard</h1>
<Script
src="https://www.zapdigits.com/script/track.js"
data-site-id="{replace_with_your_site_id}"
strategy="afterInteractive"
/>
</>
);
}
🚀 Summary
- Use
next/scriptinstead of raw<script>tags. - Replace
{replace_with_your_site_id}with your actual site ID from ZapDigits. - Choose between global (all pages) or per-page installation based on your needs.