Fix duplicate analytics pageviews on Next.js App Router

Start with the Next.js App Router installation

Import Script from next/script in your root layout. Render the DataSag Script once inside body so it persists across child routes. Keep the existing html, body, providers and children in place. Use strategy="afterInteractive" and replace YOUR_PUBLIC_KEY with the public key copied from your DataSag project.

A Script in a page component or nested layout may disappear or be reintroduced as the route tree changes. Put the single shared installation in the root layout. Browser-only event calls belong in client components, never in a Server Component render.

Use the public project key from the DataSag project you are inspecting. A test on a preview domain does not confirm that the production domain has the same code or settings.

Fix duplicate analytics pageviews in Next.js App Router

1. Search app/layout.tsx, route-group layouts, nested layouts, and page components for the tracker source and data-datasag-key. A shared root installation should not also be rendered in an analytics wrapper on each page.
2. Inspect client components that listen to usePathname or useSearchParams. Remove redundant pageview dispatch logic only after confirming the built-in tracker already covers the actual pathname transition you are investigating.
3. Test a production build with a hard load, an internal Link, and Back. Separate null-name pageviews from engagement and click events. Development rendering and effect behavior can create a different request sequence from a published build.

One root script covers the tested routes without a second pageview sender attached to the same navigation.

Complete the collection checks

1. Open Network and filter /api/track. Reload once without clicking or scrolling. Inspect eventName in each payload: null identifies a pageview; scroll, click_heatmap and __datasag_engagement are other records.
2. Count rendered script elements with data-datasag-key. There should be one intended installation for this project. Search your code, site header settings, embeds and tag manager for additional copies.
3. Remove redundant script insertion mechanisms, keeping the site-wide installation. Two copies execute independently even when their browser download is cached.
4. Check for custom router listeners that manually send pageviews. The current tracker handles pushState, replaceState and popstate and ignores a repeated pathname. Do not add a second pageview implementation without a demonstrated gap.
5. Repeat a direct load, a second route and browser Back. Correlate pageview records with actual path changes. A query-only change on the same pathname is not a new pageview in the current tracker.

[...document.querySelectorAll('script[data-datasag-key]')]
  .map(script => ({
    src: script.src,
    key: script.getAttribute('data-datasag-key')
  }));

What a successful check looks like

A single installation and one pageview dispatch for each actual pathname change in the tested sequence. Additional engagement records remain available.

Record the public path you tested, the browser state, the approximate time and the observed request. Check one direct page load and one later navigation so the result covers more than the homepage.

Common mistake

Comparing the total number of events with the number of pageviews produces a false duplicate diagnosis. Keep the event categories separate throughout the check.

Installation snippet for Next.js App Router

The shared installation belongs in app/layout.tsx, inside the root body. Use this as the installation reference while checking the procedure above.

import Script from "next/script";

// Inside the existing root layout body, alongside {children}:
<Script
  id="datasag"
  src="https://www.datasag.com/tracker.js"
  data-datasag-key="YOUR_PUBLIC_KEY"
  strategy="afterInteractive"
/>

Related Next.js App Router guides

• Verify DataSag analytics
• Fix DataSag analytics not working
• Track custom events
• Track UTM campaigns
• Measure AI referral traffic
• Configure CSP for DataSag analytics
• Exclude your own analytics visits
• Load analytics without blocking rendering

Full Next.js App Router setup guide · Search and AI visibility

References

Official Next.js App Router documentation covers the integration point. For DataSag data handling, read the privacy policy. Use support if a request fails after these checks.