Next.js

Add the Dupes tracker to your Next.js site. Replace dps_your_site_idand the domain with your own — find them on your site's Install page.

Steps

1Open your root layout — app/layout.tsx (App Router) or pages/_document.tsx.
2Add the <Script> tag inside <head> as shown.
3Deploy. Visits appear in your dashboard within seconds.

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        {/* Buffers window.dupes() calls made before the tracker loads. */}
        <Script id="dupes-stub" strategy="beforeInteractive">
          {`window.dupes=window.dupes||function(){(window.dupes.q=window.dupes.q||[]).push(arguments)}`}
        </Script>
        <Script
          src="https://usedupes.com/js/script.js"
          data-dupes-id="dps_your_site_id"
          data-dupes-domain="yourdomain.com"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

💡 Works the same in the Pages Router — put <Script> in _document.tsx.

Install with an AI agent✦ prompt

Copies a ready-made prompt — paste it into Cursor, Claude Code, GitHub Copilot or any AI coding tool and let it do the edit for you.

Track a goal

Record conversions like submit_form anywhere on the page:

<!-- No code: fires when clicked, or activated by keyboard -->
<button data-dupes-goal="signup">Sign up</button>

<!-- Optional detail, as data-dupes-goal-<name> -->
<button data-dupes-goal="purchase" data-dupes-goal-plan="pro">Buy</button>

<!-- In code: fire from anywhere, e.g. once a payment succeeds -->
<script>
  window.dupes("purchase", { plan: "pro" });
</script>

← Getting started AI Visibility →