Installation guides
v0 by Vercel
Add ProductLense to a Next.js app generated by v0 with one prompt, loading the script from the root layout with next/script.
v0 generates Next.js apps, so ProductLense is loaded from the root layout with next/script. Paste the prompt below, or make the change yourself with the Next.js guide.
Replace SITE_ID in the prompt with the id from Settings → Sites in the ProductLense dashboard before you send it.
The prompt
Add ProductLense analytics to this Next.js app. In app/layout.tsx, import Script from "next/script" and add these two components inside <body>, after {children}:
<Script id="productlense-stub" strategy="beforeInteractive">{`window.productlense=window.productlense||function(){(window.productlense.q=window.productlense.q||[]).push(arguments)}`}</Script>
<Script src="https://api.productlense.app/a.js" data-site="SITE_ID" strategy="afterInteractive" />
Keep data-site and the src exactly as written. Do not install any package. When a user signs in, call window.productlense?.('identify', user.id) once in a client component.The result
This is what app/layout.tsx should contain afterwards:
import Script from 'next/script';
import type { ReactNode } from 'react';
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script id="productlense-stub" strategy="beforeInteractive">
{`window.productlense=window.productlense||function(){(window.productlense.q=window.productlense.q||[]).push(arguments)}`}
</Script>
<Script src="https://api.productlense.app/a.js" data-site="SITE_ID" strategy="afterInteractive" />
</body>
</html>
);
}Check that data-site holds your real site id and the src is unchanged. When you deploy to Vercel, add the production domain to the site's hostnames in the ProductLense dashboard; preview deployments on vercel.app are rejected unless you add them too.
Verify your installation
- Deploy, then open the production URL in a normal browser window.
- Open the Live page in the ProductLense dashboard. Your visit appears within a few seconds.
- In the browser's developer tools, the Network tab shows a
POSTtohttps://api.productlense.app/api/ewith status204. Navigate to another page: a second pageview follows.
If the visit does not appear, follow Verify your installation.