Adding Analytics to AI-Generated Code: Common Pitfalls

AI tools build apps fast. They handle routing, auth, database, and UI without you writing a line of boilerplate. What they almost universally skip: observability.

Here is what to add after your AI coding session ends.

What AI code misses

A standard AI-generated Next.js app typically includes:

Auth (Clerk, NextAuth, or similar)
A database (Supabase, PlanetScale, Prisma)
UI components (shadcn, Tailwind)
API routes
Deployment configuration

What it typically does not include:

Analytics tracking
Error monitoring
Performance monitoring
A/B testing hooks

This is not a flaw — it is a scope choice. Analytics is not required to make a demo work. But it is required to know if your demo becomes something real.

Where to add tracking

The root layout — For Next.js App Router apps, the tracker or SDK component belongs in app/layout.tsx. Add it once and it runs on every page.

Key user flows — Use conversion goals to track the paths that matter: signup completion, checkout, feature activation. Set these up in the Antlytics dashboard, not in code.

Marketing pages — If your AI-built app has a landing page separate from the app itself, make sure the tracker is on the landing page too. Launch traffic hits the landing page first.

SPA navigation gotchas

AI-generated React apps are often single-page applications. SPAs do not reload the page on navigation — they swap content. If your tracker only fires on load, it will miss all navigation after the initial page load.

The Antlytics tracker listens for popstate events, which fires on browser back/forward navigation. For router.push() navigation in Next.js, the SDK handles this automatically. For custom navigation implementations, confirm the popstate event fires on each route change.

If you are using React Router or a custom routing solution, test the analytics by navigating through multiple pages and confirming each navigation fires a separate pageview in your Antlytics dashboard.

Testing your instrumentation

After adding analytics to an AI-generated app:

Open the browser network tab. Navigate to several pages. Confirm a POST request fires to /api/ingest/pageview (or your proxy endpoint) on each navigation.
Check the tracking ID. The request body should contain your actual UUID tracking ID, not a placeholder.
Check for duplicate fires. If the tracker fires twice on a single page load, you may have added it in two places (for example, both in a component and in the layout).
Test in incognito without extensions. Ad-blocker extensions can block the request during development. Use an incognito window without extensions for accurate testing.

Common mistakes

Placeholder tracking ID — AI tools often fill in placeholder text like YOUR_TRACKING_ID. The script does not error, but no data is recorded. Replace with your actual UUID from the Antlytics dashboard.

Wrong file — In Next.js App Router, the layout file is app/layout.tsx. Adding the tracker to app/page.tsx only tracks the homepage.

Duplicate installation — If you add the script tag to the layout AND the SDK component elsewhere, you will get double-counted pageviews.

Missing proxy for production — If you want accurate data in production, set up the first-party proxy before launching. It is much harder to add accurately after data collection starts because you cannot retroactively correct the gaps.

FAQ

Can I ask the AI to add analytics for me? Yes. See prompts for adding analytics via AI tools for ready-to-paste prompt templates.

How do I know if my SPA tracking is working? Navigate to multiple pages in your app and watch for separate POST requests to the ingest endpoint in the browser network tab.

What if the AI generated a Pages Router app instead of App Router? Add the component to pages/_app.tsx instead of app/layout.tsx.