Next.js

Use next/script in your root layout so the tag loads after the page is interactive.

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://replaycat.com/rc.js?site=YOUR_SITE_KEY" strategy="afterInteractive" />
      </body>
    </html>
  );
}

For the Pages Router put the same <Script> in pages/_app.tsx. Client-side navigations are tracked automatically; you do not need to call anything on route change.

To identify logged-in users, call window.rc("identify", user.id, { name: user.name, email: user.email }) from a useEffect once the user is known. The script loads after your page, so add this line before it (in a <Script strategy="beforeInteractive">, or at the top of your layout) and calls made early are queued rather than lost:

window.rc = window.rc || function () { (window.__rcq = window.__rcq || []).push([].slice.call(arguments)); };

Guarding with window.rc?.(...) instead silently skips the call whenever the script is not there yet.