Websites and builders

v0

v0 by Vercel analytics with Stickybeak tracks deployed routes, campaigns and conversion goals from the Next.js root layout. Add the script and deploy in about five minutes.

#Add the script

1. #Open app/layout.tsx

   Ask v0 to add the tag to the head in app/layout.tsx, keeping every attribute, or edit the synced GitHub project.

2. #Add the tag inside <head>

   <script
     defer
     data-site="YOUR_SITE_ID"
     data-domain="example.com"
     src="https://app.usestickybeak.com/_cfw/s.js"
   ></script>

3. #Deploy

   Click Publish, or merge the change in a connected GitHub project.

#Check it's working

Use the deployed custom or .vercel.app domain, not v0's preview. Then follow Verify your install.

#Track goals

Add data-goal to a component, or call Stickybeak from a client component with this typed queue helper:

const stickybeak = ((window as any).stickybeak ||= (...args: unknown[]) => {
  (((window as any).stickybeak.q ||= []) as unknown[][]).push(args);
});
stickybeak("signup");

See Custom goals.

#Track purchases

From a client confirmation page, initialise the typed queue and send completed-order values:

const stickybeak = ((window as any).stickybeak ||= (...args: unknown[]) => {
  (((window as any).stickybeak.q ||= []) as unknown[][]).push(args);
});
stickybeak("purchase", { revenue, currency, order_id });

See Revenue.

#Page changes

Stickybeak records Next.js client-side route changes automatically.

#If it isn't working

• Confirm the tag is in the root layout without replacing existing metadata, fonts or providers.
• Deploy after editing and check the configured domain.

See Troubleshooting.