Install Tidemark on Next.js

Add the script once, in your root layout, with Next's Script component.

Your site's Settings → Tracking tab shows this same code with your domain and script already filled in, under Install on → Next.js. Each site has its own script file name (a short code such as 3fa91c0b2e.js), so copy the code from there rather than typing it.

Steps (App Router)#

Open app/layout.tsx and add a Script inside <body>:

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script defer data-domain="example.com" src="https://YOUR-TIDEMARK/js/YOUR-SCRIPT.js" strategy="afterInteractive" />
      </body>
    </html>
  );
}

Replace example.com with the domain you added in Tidemark. afterInteractive is Next's default, so you can leave it out.

Pages Router#

Put the same Script in pages/_app.tsx, next to your <Component />.

Pageviews are recorded on load and on every route change, so you don't need extra code for client-side navigation.

Record your own events#

Call window.plausible('Signup') to record a custom event, with optional properties: window.plausible('Signup', { props: { plan: 'pro' } }). Call it in the browser, in response to something the visitor does, such as a click or a form submit, rather than while the page renders on the server. Create a matching goal in your site's settings to see it under Behaviors.

Check that it works#

Open your site in a private window, then look at your Tidemark dashboard. Visits from localhost are ignored, so test on a real address.

If nothing shows up:

• Make sure the domain in the snippet matches the domain you added in Tidemark.
• Turn off any ad blocker for your own test, and check the browser console for a blocked request.
• Make sure the script address in the snippet is reachable from the visitor's browser.