Next.js

adding peasy to your Next.js project is straightforward. Simply import next/script and include the peasy.js script in your project. follow the steps below to get started.

basic betup

in your main layout file, add the following code:

import Script from 'next/script'

...

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Script
          src="https://cdn.peasy.so/peasy.js"
          data-website-id="<website_id>"
          strategy="afterInteractive"
        />
        {children}
      </body>
    </html>
  );
}

that's it! once the script is added, peasy will automatically start tracking user interactions. navigate through your app, and events will appear in your dashboard.

TypeScript support

to enable TypeScript support for peasy's script methods, add the following type declarations to your globals.d.ts file:

// globals.d.ts

declare global {
	interface Window {
		peasy?: {
			init: () => void;
			track: (event: string, data: Record<string, any>) => void;
			page: () => void;
			setProfile: (id: string, data: Record<string, unknown>) => void;
			disableTracking: () => void;
		};
	}
}

export {};

with this in place, you can now use the peasy object in your project with full TypeScript type hints.

Next.js

basic betup

TypeScript support

try web analytics you'll actually love.

try web analytics
you'll actually love.