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"
/>
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. alternatively, you can install and use our NPM package that comes with TypeScript support already.
next steps
learn how to track custom events in the custom events documentation.