How to Integrate Amplitude with V0

The Amplitude Browser SDK (@amplitude/analytics-browser) is the primary package for tracking events from React components in your V0 app. It initializes with your API key and provides track(), identify(), and setUserId() functions that send events to Amplitude's ingestion endpoint. In your V0 project, you need to add the package to your dependencies. If you are editing the project in V0's built-in editor, you can ask V0 to add the import and the initialization code. If you have pulled the project locally via GitHub, run npm install @amplitude/analytics-browser in your terminal and commit the updated package.json. Initializing Amplitude needs to happen once at the app level, before any tracking calls are made. In a Next.js App Router project, the right place for SDK initialization is a client component that wraps your app layout — typically a provider component that uses 'use client' at the top. You initialize Amplitude with init(apiKey, userId?, options?) where the API key comes from process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY. A critical V0-specific consideration: V0 generates Server Components by default, and the Amplitude Browser SDK can only run in the browser. Do not import or initialize Amplitude in server components, server actions, or any file without 'use client'. If you accidentally import the browser SDK in a server context, you will see errors like 'window is not defined' during the build. The solution is to always import Amplitude functions inside 'use client' components or use dynamic imports with ssr: false. Amplitude's init() function is safe to call multiple times — it checks for existing initialization and skips re-initialization automatically. This makes it suitable for placement in React components without worrying about accidental double-initialization.

1'use client';
2
3import { useEffect } from 'react';
4import * as amplitude from '@amplitude/analytics-browser';
5
6interface AmplitudeProviderProps {
7  children: React.ReactNode;
8}
9
10export function AmplitudeProvider({ children }: AmplitudeProviderProps) {
11  useEffect(() => {
12    if (process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY) {
13      amplitude.init(process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY, {
14        defaultTracking: {
15          pageViews: true,
16          sessions: true,
17          formInteractions: false, // Enable if you want form tracking
18          fileDownloads: false,
19        },
20        logLevel: process.env.NODE_ENV === 'development' ? 3 : 0, // Debug in dev
21      });
22    }
23  }, []);
24
25  return <>{children}</>;
26}

With Amplitude initialized, you can now add event tracking to any 'use client' component in your V0 app. Import the track function from @amplitude/analytics-browser and call it when users interact with important features. The event name and properties you choose here directly determine what you can analyze in Amplitude's dashboards later. Good event naming is the most important design decision in your analytics setup. Amplitude recommends an [Object] [Action] naming convention in past tense: 'report_exported', 'subscription_upgraded', 'onboarding_completed', 'feature_used'. Avoid generic names like 'clicked' or 'submitted' without context — they are useless in charts. Include specific, filterable properties with each event: the name of the feature, the user's plan tier, the count of items, or any other dimension that would be useful for filtering in Amplitude. Properties should be primitives (strings, numbers, booleans) rather than nested objects. Amplitude flattens event properties in its data model, and nested objects can cause issues with filtering and grouping in charts. If you have nested data, flatten it to top-level properties before passing to track(). For V0-specific workflows: V0 sometimes generates components with inline onClick handlers. When adding Amplitude tracking, you may need to convert inline handlers to named functions so you can add the track() call. Ask V0 to refactor the handler if needed — for example, 'Convert the inline onClick on the export button to a named handleExport function and add an Amplitude track call inside it.' Amplitude batches events client-side and sends them in bulk to reduce network requests. Events are stored locally and flushed on a timer (default: 10 seconds) or when the user navigates away. This means events may not appear in Amplitude's real-time view instantly — use the Amplitude Debugger browser extension to see events as they are fired during development.

1'use client';
2
3import * as amplitude from '@amplitude/analytics-browser';
4
5interface ExportButtonProps {
6  reportName: string;
7  rowCount: number;
8  onExport: () => void;
9}
10
11export function ExportButton({ reportName, rowCount, onExport }: ExportButtonProps) {
12  const handleExport = () => {
13    // Track the event before executing the action
14    amplitude.track('report_exported', {
15      export_format: 'csv',
16      report_name: reportName,
17      row_count: rowCount,
18      timestamp: new Date().toISOString(),
19    });
20
21    // Execute the actual export
22    onExport();
23  };
24
25  return (
26    <button
27      onClick={handleExport}
28      className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
29    >
30      Export CSV
31    </button>
32  );
33}

Raw anonymous event tracking is useful, but the real power of Amplitude comes from connecting events to known users. After a user signs in, you should call Amplitude's setUserId() and identify() functions to tie all future events to their user ID and attach user properties like plan tier, role, or account creation date. User identification should happen in the authentication callback — right after sign-in is confirmed. In a Next.js App Router app with Clerk or Auth.js, this is typically in the component that renders after the auth callback redirects back to your app, or in a useEffect that runs when the session data becomes available. The setUserId() function tells Amplitude which user is currently active. All subsequent track() calls will be associated with this user ID. The identify() function attaches properties to the user profile in Amplitude — not to individual events, but to the user record itself. These user properties persist across sessions and can be used to segment any chart in Amplitude by user attributes. Amplitude distinguishes between event properties (attached to individual events) and user properties (attached to the user). Use event properties for context specific to that action (which report was exported, which feature was clicked). Use user properties for persistent attributes (plan tier, company size, geographic region). This distinction matters for Amplitude's cohort and retention analysis features. When a user logs out, call amplitude.reset() to clear the user ID and start a new anonymous session. Without this, events from a subsequent user on the same device would be incorrectly attributed to the previous user — a critical correctness issue if you have shared devices or if users share accounts.

1'use client';
2
3import { useEffect } from 'react';
4import * as amplitude from '@amplitude/analytics-browser';
5import { Identify } from '@amplitude/analytics-browser';
6
7interface UserTrackerProps {
8  userId: string | null;
9  userEmail: string | null;
10  planTier: string | null;
11  createdAt: string | null;
12}
13
14export function UserTracker({ userId, userEmail, planTier, createdAt }: UserTrackerProps) {
15  useEffect(() => {
16    if (userId) {
17      // Set the user ID — ties all future events to this user
18      amplitude.setUserId(userId);
19
20      // Set persistent user properties
21      const identifyEvent = new Identify();
22      if (userEmail) identifyEvent.set('email', userEmail);
23      if (planTier) identifyEvent.set('plan_tier', planTier);
24      if (createdAt) identifyEvent.set('created_at', createdAt);
25
26      amplitude.identify(identifyEvent);
27
28      // Track the login event itself
29      amplitude.track('user_signed_in');
30    } else {
31      // User logged out — reset to anonymous session
32      amplitude.track('user_signed_out');
33      amplitude.reset();
34    }
35  }, [userId]);
36
37  return null; // This component renders nothing visible
38}

The Amplitude Browser SDK requires your API key to be available as a client-side environment variable. Unlike most API keys that should stay server-only, the Amplitude API key is designed to be public — it is a project identifier, not an authentication secret. Amplitude's security model is based on CORS origin restrictions and server-side secret keys for administrative operations, not on keeping the API key hidden. Go to your Vercel Dashboard and open your project. Click Settings → Environment Variables. Add the following variable: NEXT_PUBLIC_AMPLITUDE_API_KEY with your Amplitude project's API key as the value. Your API key is found in Amplitude → Settings → Projects → select your project → General. It is a long alphanumeric string (not the secret key, which has different permissions). The NEXT_PUBLIC_ prefix is correct and required here. This makes the API key available in your client-side React components, which is necessary for the Amplitude Browser SDK to initialize in the browser. Amplitude is designed to work this way — the API key is safe to expose publicly. If you also need to use Amplitude's Chart API or HTTP API from your Next.js API routes (for pulling analytics data into your app), you will additionally need AMPLITUDE_SECRET_KEY stored without the NEXT_PUBLIC_ prefix. This secret key has permissions to read Amplitude data and should never be exposed to the browser. Set both variables for Production, Preview, and Development environments. For local development, add NEXT_PUBLIC_AMPLITUDE_API_KEY=your_key_here to your .env.local file. After adding the variables, trigger a new deployment by pushing to GitHub. The NEXT_PUBLIC_ variable requires a rebuild to take effect since it is inlined at build time.

After deploying your V0 app with Amplitude tracking, verify that events are flowing correctly and set up the core Amplitude charts that will give you the most valuable product insights. First, verify event delivery. Open your deployed V0 app, interact with the features you have tracked, and then go to Amplitude → Data → Events. You should see your events appearing in the event stream within a minute. If you installed the Amplitude Debugger browser extension, it shows events in real time as they fire. The three Amplitude chart types that provide the most value for a V0 app are: Funnel Analysis (Amplitude → Charts → Funnel Analysis) — create a funnel from your sign-up event through your key activation milestone to see your onboarding conversion rate. Retention Analysis (Amplitude → Charts → Retention Analysis) — set your starting event to 'user_signed_in' and your return event to any meaningful engagement action to see what percentage of users return after day 1, day 7, and day 30. User Journeys (Amplitude → Charts → Pathfinder) — explore what users actually do after signing up, which reveals unexpected usage patterns that you might not have anticipated when designing the app. For naming consistency in Amplitude, go to Data → Events and add display names or descriptions to your events. This makes it easier for team members to understand what each event represents without reading the raw event name. You can also mark events as verified to indicate they are part of your official tracking plan. For teams building production apps with complex analytics requirements — including custom event taxonomies, automated funnel monitoring, and Amplitude cohort sync with other marketing tools — RapidDev can help design and implement a complete analytics architecture for your V0 app.