How to Tell Your AI Coding Tool to Add Analytics

AI tools are great at installing analytics — if you prompt them correctly. Here are the prompts.

Why prompting matters for analytics setup

AI coding tools follow instructions. If you ask for a Next.js app with authentication and a database, you get authentication and a database. If you do not mention analytics, you do not get analytics.

The challenge: analytics setup involves a few specific details that AI tools sometimes get wrong without guidance. Specifically:

Which package to install (@antlytics/analytics, not a generic snippet or a hand-rolled ingest IIFE)
Where to add the component (root layout.tsx, not a specific page)
What tracking ID format to use (a UUID from your dashboard)
How to handle client-side navigation (the hosted tracker / SDK handles History patches — the prompt should note this)

Providing these details in your prompt prevents the AI from guessing.

Prompt template for Cursor

Use this prompt in Cursor's composer or chat:

Add Antlytics analytics to this project.

Install the @antlytics/analytics package:
  npm install @antlytics/analytics

Add the <Analytics /> component to app/layout.tsx (Next.js App Router):
  import { Analytics } from "@antlytics/analytics/next"
  <Analytics trackingId="REPLACE_WITH_YOUR_UUID" apiHost="https://www.antlytics.com" />

Place it inside the <body> tag. The component loads the hosted tracker.js and handles SPA navigation (History API patches + popstate) automatically — no additional configuration needed.

Do not invent a custom fetch to /api/ingest/pageview. Use the official SDK or hosted tracker only.

The tracking ID UUID comes from the Antlytics dashboard under Settings → Tracking Snippet.

Replace REPLACE_WITH_YOUR_UUID with your actual tracking ID before running the prompt. Docs: Next.js App Router, Quick start.

Prompt template for Claude Code

Claude Code works well with explicit file instructions:

Add Antlytics privacy-first analytics to this Next.js project.

1. Install: npm install @antlytics/analytics

2. Edit app/layout.tsx (or the root layout for this app):
   - Import: import { Analytics } from "@antlytics/analytics/next"
   - Add inside <body>, before the closing tag:
     <Analytics trackingId="YOUR_TRACKING_UUID" apiHost="https://www.antlytics.com" />

3. Do not add any cookie banners or consent logic — Antlytics is cookieless and does not require consent for analytics tracking in most configurations.

4. Do not write a custom IIFE that posts to /api/ingest/pageview. Use @antlytics/analytics/next only.

5. The component loads tracker.js with next/script strategy="afterInteractive" — in typical setups it has negligible impact on page load performance.

Tracking ID is a UUID from https://www.antlytics.com/dashboard → Settings → Tracking Snippet.

Prompt template for Bolt and Lovable

Bolt and Lovable typically generate HTML or React apps. Use this prompt:

Add analytics to this project using the Antlytics hosted tracker in the HTML head.

Add this script to the <head> section of every page (or the main layout template):

<script
  defer
  src="https://www.antlytics.com/tracker.js"
  data-tracking-id="YOUR_TRACKING_UUID"
  data-api-host="https://www.antlytics.com"
></script>

Replace YOUR_TRACKING_UUID with the actual UUID from the Antlytics dashboard.
Do not add cookie banners — this is cookieless analytics.
Do not invent a custom fetch/IIFE to /api/ingest/pageview — use the hosted tracker.js only.

What the AI should do (checklist)

After running your prompt, verify:

@antlytics/analytics is in package.json (for SDK method), or the hosted tracker.js script tag is present
The <Analytics /> component is in the root layout, not a specific page (Next.js)
trackingId / data-tracking-id contains your actual UUID (not a placeholder)
apiHost / data-api-host is set to https://www.antlytics.com (or your proxy domain)
No cookie banner or consent logic was added (it is not needed)
No hand-rolled IIFE posting to /api/ingest/pageview

Verifying the result

Start the dev server.
Open the site in a browser without ad-blocker extensions.
Open the Network tab in browser dev tools.
Navigate to any page.
Look for tracker.js loading and a POST request to /api/ingest/pageview or your proxy endpoint.
Confirm the request succeeds.

If the request does not appear, check that the tracking ID is a real UUID (not YOUR_TRACKING_UUID) and that the component or script is in the root layout / head.

FAQ

Can I just ask the AI to "add analytics"? You can, but you are more likely to get GA4, Mixpanel, or a hallucinated ingest snippet. The prompts above give the AI the specific package name, install command, and hosted tracker structure it needs.

What if the AI adds a cookie banner? It was not asked for and is not needed. Delete the cookie banner — Antlytics is cookieless.

What if the AI invents a custom sessionStorage IIFE? Delete it and replace with @antlytics/analytics/next or the hosted tracker.js snippet above.

Can I add the first-party proxy this way? Yes. Add to your prompt: "Also create app/api/antlytics/pageview/route.ts with the content: export { GET, OPTIONS, POST } from '@antlytics/analytics/proxy' and set apiHost to https://your-domain.com."

Do I need to give the AI my tracking ID? You can replace the placeholder after the AI makes the change, rather than putting your UUID in the prompt. Either approach works.