Install in Next.js

App Router and Pages Router, using next/script.

Platform guides

App Router (app/layout.tsx)

The loader is a single external script with no inline init, so it's safe in a Server Component — you do not need to mark the layout "use client".

tsx

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://ingest.deepsync.in/t/YOUR_PROJECT_ID.js" strategy="afterInteractive" />
      </body>
    </html>
  );
}

app/layout.tsx

Pages Router (pages/_app.tsx)

tsx

import Script from "next/script";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script src="https://ingest.deepsync.in/t/YOUR_PROJECT_ID.js" strategy="afterInteractive" />
    </>
  );
}

pages/_app.tsx

Use strategy="afterInteractive", not "beforeInteractive". The loader has no work to do before hydration, and beforeInteractive would block your first paint for no benefit.

If you use a Content Security Policy

Allow the ingest origin in both script-src and connect-src — the first for the loader and SDK bundle, the second for the event batches the SDK posts back.

Install in React (Vite, CRA, SPA)

One tag in index.html — no npm package, no provider, no hooks.

How the DeepSync SDK works

What the tracking script actually does once it's on your page, and what it costs you.

Still have a question?

Support is included on every plan, including Free. Tell us what you're trying to do and we'll point you at the right page — or fix the docs.

Contact support