To integrate Crazy Egg with V0 by Vercel, add the Crazy Egg tracking script to your Next.js app's root layout using the Next.js Script component, set your Crazy Egg account number as an environment variable, and deploy to Vercel. Crazy Egg then generates heatmaps, scrollmaps, and click reports from real visitor behavior on your V0-generated pages.
Add Heatmaps and Behavioral Analytics to V0 Apps with Crazy Egg
When you build apps and landing pages with V0, you're making design decisions based on aesthetics and best practices — but you don't know how real visitors actually interact with your pages until you watch them. Crazy Egg fills this gap by recording where visitors click, how far they scroll, and which elements attract or lose attention. Heatmaps show click density as a color gradient over your page, scrollmaps show at what percentage of page length visitors stop reading, and click reports break down clicks by element with exact counts. This behavioral data is invaluable for iterating on V0-generated designs after launch.
For Next.js apps built with V0, the Crazy Egg integration is primarily a script installation task rather than a traditional API integration. Crazy Egg provides a JavaScript snippet that loads their tracking library, which instruments the DOM, captures interaction events, and sends them to Crazy Egg's analytics backend. In Next.js App Router apps, you add this script using the built-in Script component in the root layout.tsx file with the afterInteractive strategy — this defers the script until after the page is interactive, preventing it from blocking the page's initial render and preserving your Core Web Vitals scores.
Beyond basic tracking, Crazy Egg offers A/B testing where you define two or more page variants and Crazy Egg randomly assigns visitors and measures conversion differences. This pairs naturally with V0's ability to quickly generate UI variants — you can prompt V0 for two versions of a hero section or pricing layout, implement both as React components, and use Crazy Egg's A/B testing to determine which performs better with real users before committing to one design direction.
Integration method
Crazy Egg integrates with V0-generated Next.js apps by loading the Crazy Egg tracking script in the app's root layout using Next.js's built-in Script component with the afterInteractive strategy. The script uses your account number to identify your Crazy Egg workspace and automatically begins capturing heatmap data, scroll depth, and click events for all pages. No API routes are needed for basic heatmap tracking — the script handles data collection client-side and sends it to Crazy Egg's servers. For advanced use cases like triggering A/B test variants programmatically or pushing custom events, a lightweight API integration can be added.
Prerequisites
- A Crazy Egg account at crazyegg.com — free trials are available, and paid plans start at $29/month for basic heatmap access
- Your Crazy Egg account number — found in the tracking script snippet at Settings → Tracking Code in your Crazy Egg dashboard (it's the numeric ID in the script URL)
- A V0 account at v0.dev with a Next.js project exported to GitHub and deployed to Vercel
- Your site must be deployed to a live URL (not localhost) for Crazy Egg to capture data — create a snapshot targeting your Vercel deployment URL
Step-by-step guide
Get Your Crazy Egg Tracking Script
Get Your Crazy Egg Tracking Script
Log in to your Crazy Egg account at app.crazyegg.com and navigate to Settings → Tracking Code (or look for 'Install Crazy Egg' in the main menu). Crazy Egg provides a JavaScript snippet that looks like a script tag loading from a URL containing your account number — something like //script.crazyegg.com/pages/scripts/0000/0000.js where the numbers are your unique account identifier. Copy your account number from this snippet — it's the numeric portion of the URL. You'll use this number in your Next.js environment variable rather than hardcoding the full script URL. Your account number is not a secret (it's visible to anyone who views your page source), but storing it as an environment variable makes it easier to manage across development, preview, and production environments without changing code. After installing the script, you'll create a 'snapshot' in Crazy Egg for each page or section you want to track — go to Dashboard → Add New Snapshot, enter your page URL, and Crazy Egg begins collecting data as soon as visitors land on that page with the script loaded. Snapshots need a minimum number of visits (typically 25-100 depending on your plan) before generating meaningful heatmap visualizations.
Pro tip: Create one Crazy Egg snapshot per major page type (home, pricing, signup, etc.) rather than one per URL. This aggregates data from similar pages faster, giving you statistically meaningful heatmaps sooner.
Expected result: You have your Crazy Egg account number (a 4-8 digit numeric ID) and have created at least one snapshot targeting your deployed Vercel URL.
Add the Tracking Script to the Next.js Layout
Add the Tracking Script to the Next.js Layout
In your V0-generated Next.js project, open the root layout file at app/layout.tsx. This is the file that wraps every page in your application, making it the ideal place to add global tracking scripts. Next.js provides a built-in Script component (imported from 'next/script') that handles script loading strategies — this is important because incorrectly loaded scripts can block page rendering and hurt your Core Web Vitals scores, which affects both user experience and SEO. The afterInteractive strategy tells Next.js to load the script after the page becomes interactive, which is the correct choice for analytics scripts like Crazy Egg. It ensures the script doesn't delay your page's Largest Contentful Paint (LCP) or Time to Interactive (TTI) metrics. The Script component also handles deduplication automatically — if your layout renders multiple times in a session, the script is only loaded once. Store the account number in an environment variable as NEXT_PUBLIC_CRAZY_EGG_ACCOUNT — the NEXT_PUBLIC_ prefix is required here because the value needs to be available in the client-side compiled JavaScript where the Script src is interpolated. This is safe because the account number is not a secret and will be visible in your page source anyway.
Update the root layout to include the Crazy Egg tracking script using the Next.js Script component with afterInteractive strategy. The script src should be constructed from the NEXT_PUBLIC_CRAZY_EGG_ACCOUNT environment variable. Only load the script when the variable is set (to prevent errors in local development without the variable configured). Keep the script addition minimal and non-disruptive to the existing layout structure.
Paste this in V0 chat
1// app/layout.tsx2import type { Metadata } from 'next';3import Script from 'next/script';4import './globals.css';56export const metadata: Metadata = {7 title: 'Your App',8 description: 'Your app description',9};1011export default function RootLayout({12 children,13}: {14 children: React.ReactNode;15}) {16 const crazyEggAccount = process.env.NEXT_PUBLIC_CRAZY_EGG_ACCOUNT;1718 return (19 <html lang="en">20 <body>21 {children}22 {crazyEggAccount && (23 <Script24 src={`//script.crazyegg.com/pages/scripts/${crazyEggAccount}.js`}25 strategy="afterInteractive"26 />27 )}28 </body>29 </html>30 );31}Pro tip: Use the afterInteractive strategy (not beforeInteractive or lazyOnload) for Crazy Egg. beforeInteractive blocks the page render; lazyOnload may miss early click events from fast users. afterInteractive is the correct balance for analytics scripts.
Expected result: The Crazy Egg script tag appears in your page source after deployment, and the Crazy Egg tracking library loads after the page becomes interactive. No console errors related to the script should appear in browser DevTools.
Set Environment Variables and Deploy
Set Environment Variables and Deploy
Open the Vercel Dashboard, navigate to your project, and go to Settings → Environment Variables. Add NEXT_PUBLIC_CRAZY_EGG_ACCOUNT with the numeric portion of your Crazy Egg tracking script URL (e.g., if your script URL is //script.crazyegg.com/pages/scripts/1234/5678.js, your account value might be formatted as 1234/5678 — check exactly how the account number appears in the script URL provided by Crazy Egg). Unlike API secrets, this value uses the NEXT_PUBLIC_ prefix because it's needed in the client-side compiled JavaScript. Set this variable for Production, Preview, and Development environments. For local development, create a .env.local file in your project root with NEXT_PUBLIC_CRAZY_EGG_ACCOUNT=your-account-number so Crazy Egg also loads during local testing. After saving the environment variable, trigger a redeployment from Vercel's Deployments tab or push a new commit to your GitHub repository. Once deployed, visit your site and open browser DevTools → Network tab — you should see a request to script.crazyegg.com confirming the script loaded. Then return to Crazy Egg's dashboard, select your snapshot, and within 24-48 hours of receiving your first visits you'll start seeing heatmap data populate. Crazy Egg requires a minimum threshold of visits before the heatmap visualization activates.
Pro tip: After deploying, use Crazy Egg's 'Debug Mode' (append ?ce_debug=1 to any page URL) to verify the tracking script is active and recording on that page without waiting for aggregate data to appear.
Expected result: The NEXT_PUBLIC_CRAZY_EGG_ACCOUNT variable is set in Vercel and the app is redeployed. Visiting the live site shows a network request to script.crazyegg.com in browser DevTools, and Crazy Egg's dashboard begins showing visitor counts for your configured snapshots.
Common use cases
Landing Page Conversion Optimization
After generating a landing page with V0, install Crazy Egg to see exactly where visitors click and how far they scroll. Heatmap data reveals whether your call-to-action button is getting attention, which sections visitors skip entirely, and whether your pricing table is causing confusion. Use this data to prompt V0 for targeted improvements.
Build a SaaS landing page with a hero section featuring a headline, subtitle, and two CTA buttons ('Start Free Trial' and 'Watch Demo'), a three-column features section, a pricing table with three tiers, customer testimonials with avatar photos, and a footer. The page should feel modern and clean with a blue and white color scheme. Wire the CTAs to /api/signup and /api/demo routes.
Copy this prompt to try it in V0
A/B Testing UI Variants
Use V0 to generate two different versions of a key page component (hero section, pricing table, or signup form), then use Crazy Egg's A/B testing to split traffic between variants and measure which drives more conversions. Crazy Egg handles traffic splitting and statistical significance calculation automatically.
Create two hero section variants for A/B testing. Variant A should have a headline-first layout with a large background image and a single CTA button. Variant B should have a product screenshot or mockup on the right side and two CTA buttons ('Free Trial' and 'Request Demo'). Make both components accept a 'variant' prop and export them from the same file for easy toggling.
Copy this prompt to try it in V0
Form Abandonment Analysis
Place heatmap tracking on checkout forms, signup flows, or multi-step forms generated with V0. Scrollmap data shows at what point users abandon the form, and click reports identify which fields users interact with most. This reveals whether your form is too long or has confusing field labels.
Build a multi-step signup form with Step 1 (name and email), Step 2 (company info and role selector), and Step 3 (plan selection and payment info). Show a progress bar at the top indicating current step. Each step has a Next button and Step 1 has an email validation. The final step posts to /api/signup/complete. Include a step summary sidebar on desktop showing what was entered in previous steps.
Copy this prompt to try it in V0
Troubleshooting
Crazy Egg script loads in the browser but no data appears in the dashboard after several days
Cause: The snapshot in Crazy Egg targets a different URL than your actual deployed site, or the snapshot hasn't received enough visits to generate the heatmap visualization (most plans require 25+ visits minimum).
Solution: In the Crazy Egg dashboard, click on your snapshot and verify the URL exactly matches your deployed page URL — including https vs http, trailing slashes, and the full path. If the URL doesn't match, create a new snapshot with the correct URL. Check the visitor count shown on the snapshot — if it's under 25, you need more traffic before heatmaps appear.
The Crazy Egg script isn't loading — no network request to script.crazyegg.com in browser DevTools
Cause: The NEXT_PUBLIC_CRAZY_EGG_ACCOUNT environment variable is not set in Vercel for the current deployment, or the variable was set after the last deployment and the functions haven't been redeployed with the new value.
Solution: Open Vercel Dashboard → your project → Settings → Environment Variables and verify NEXT_PUBLIC_CRAZY_EGG_ACCOUNT is present for the Production environment. After adding or changing environment variables, you must redeploy — go to Deployments tab and click Redeploy. NEXT_PUBLIC_ variables are inlined at build time, so changing them requires a new build to take effect.
The Script component causes a hydration mismatch warning in the browser console
Cause: The Script component's src is dynamically constructed using an environment variable that evaluates differently on the server versus the client, or the conditional rendering (crazyEggAccount && Script) evaluates inconsistently between server and client.
Solution: Ensure process.env.NEXT_PUBLIC_CRAZY_EGG_ACCOUNT is set in both your .env.local file (for local dev) and Vercel environment variables (for deployment). If the variable is missing, the server-rendered HTML omits the script but the client expects it, causing hydration mismatch. Alternatively, move the Script component into a Client Component that renders only after mount.
Best practices
- Use the afterInteractive Script loading strategy for Crazy Egg — it loads after the page is interactive without blocking rendering, preserving your Core Web Vitals scores
- Create separate Crazy Egg snapshots for each distinct page type (home, pricing, checkout, signup) rather than one for the whole site so you can analyze each funnel stage independently
- Run heatmap collection for at least two weeks before making design decisions — short collection windows can be skewed by traffic anomalies, marketing pushes, or weekend vs. weekday behavior differences
- Combine Crazy Egg heatmap data with V0 iteration cycles — use heatmaps to identify problem areas, then prompt V0 for UI improvements, and A/B test the new design before committing
- Set up A/B tests for major layout decisions before finalizing V0-generated designs — comparing two V0 variants with real user data is faster and more reliable than relying on intuition
- Check Crazy Egg's scroll depth reports to determine where your page content should end — if 80% of visitors never scroll past a certain point, content below it has minimal impact
Alternatives
Choose FullStory instead of Crazy Egg if you need complete session replay with user journey analysis and searchable event streams — FullStory records every interaction while Crazy Egg focuses on aggregate heatmaps.
Use Amplitude instead of Crazy Egg if you need event-based product analytics with funnel analysis, cohort tracking, and retention metrics — Amplitude tracks custom events while Crazy Egg focuses on visual heatmaps.
Frequently asked questions
Does Crazy Egg work with Next.js's App Router and Server Components?
Yes — the Crazy Egg tracking script runs entirely in the browser and doesn't interact with Next.js Server Components at all. By adding the Script component in the root layout.tsx with afterInteractive strategy, it loads on every page after React hydration completes. The script instruments the client-side DOM regardless of whether individual components were rendered on the server or client.
Will the Crazy Egg script slow down my V0-generated app?
With the afterInteractive strategy, the Crazy Egg script loads after the page is interactive and doesn't block First Contentful Paint or Time to Interactive. The script itself is small (a few kilobytes) and loads asynchronously. Your Lighthouse performance score should not be meaningfully affected. Run a Lighthouse audit before and after adding the script to verify.
Can Crazy Egg track V0-generated Single Page App navigation?
Crazy Egg's script automatically detects URL changes in SPA routing (including Next.js client-side navigation with the App Router) and creates separate tracking sessions per page. However, you need to create a separate snapshot for each SPA route you want to analyze in the Crazy Egg dashboard — snapshots target specific URLs, not the whole domain.
How does Crazy Egg's A/B testing work with V0-generated components?
Crazy Egg's A/B testing can display different page variants to different visitor segments using JavaScript. You define the variants in Crazy Egg's editor, and it injects CSS or JavaScript changes. Alternatively, for React component-level A/B testing, implement server-side variant assignment (using cookies or a feature flag service) and have V0 generate both variants as separate components that you conditionally render based on the assigned variant.
Is the Crazy Egg account number in the script a secret that needs to be protected?
No — the Crazy Egg account number is not a secret. It's embedded in your page's HTML source and visible to anyone who views your page source code. Using NEXT_PUBLIC_ environment variable is best practice for configuration management but not for security reasons. Crazy Egg's tracking is protected by domain whitelisting in your account settings, not by keeping the account number secret.
What's the minimum traffic needed before heatmaps appear in Crazy Egg?
Crazy Egg requires a minimum number of visits per snapshot before generating heatmap visualizations — typically 25-100 visits depending on your plan and snapshot settings. Check the visitor count shown on each snapshot in your dashboard. For new apps with low traffic, consider running paid traffic campaigns specifically to gather heatmap data faster, then use those insights to optimize before scaling traffic.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation