How to Integrate Bolt.new with Amplitude

1// lib/analytics.ts
2import * as amplitude from '@amplitude/analytics-browser';
3
4let initialized = false;
5
6export function initAmplitude() {
7  const apiKey = import.meta.env.VITE_AMPLITUDE_API_KEY;
8  if (!apiKey || initialized) return;
9
10  amplitude.init(apiKey, undefined, {
11    defaultTracking: {
12      pageViews: true,      // auto-track page views
13      sessions: true,        // auto-track session start/end
14      formInteractions: false, // disable noisy form field tracking
15      fileDownloads: false,
16    },
17    logLevel: import.meta.env.DEV
18      ? amplitude.Types.LogLevel.Debug
19      : amplitude.Types.LogLevel.None,
20  });
21
22  initialized = true;
23}
24
25export function track(
26  eventName: string,
27  properties?: Record<string, unknown>
28) {
29  amplitude.track(eventName, properties);
30}
31
32export function identify(
33  userId: string,
34  userProperties?: Record<string, unknown>
35) {
36  amplitude.setUserId(userId);
37
38  if (userProperties) {
39    const identifyEvent = new amplitude.Identify();
40    Object.entries(userProperties).forEach(([key, value]) => {
41      identifyEvent.set(key, value as amplitude.Types.ValidPropertyType);
42    });
43    amplitude.identify(identifyEvent);
44  }
45}
46
47export function reset() {
48  amplitude.reset(); // clears userId and deviceId on logout
49}

1// main.tsx (Vite) or app/layout.tsx (Next.js)
2// Vite: main.tsx
3import React from 'react';
4import ReactDOM from 'react-dom/client';
5import App from './App';
6import { initAmplitude } from './lib/analytics';
7import './index.css';
8
9initAmplitude(); // Initialize before mounting
10
11ReactDOM.createRoot(document.getElementById('root')!).render(
12  <React.StrictMode>
13    <App />
14  </React.StrictMode>
15);
16
17// Example component with event tracking:
18// components/Dashboard.tsx
19import { useEffect } from 'react';
20import { track } from '@/lib/analytics';
21
22export function Dashboard() {
23  useEffect(() => {
24    track('dashboard_viewed', {
25      timestamp: new Date().toISOString(),
26    });
27  }, []);
28
29  const handleGenerateReport = (reportType: string) => {
30    track('report_generated', {
31      report_type: reportType,
32      generated_at: new Date().toISOString(),
33    });
34    // actual report generation logic...
35  };
36
37  return (
38    <div>
39      <h1>Dashboard</h1>
40      <button onClick={() => handleGenerateReport('monthly')}>
41        Generate Monthly Report
42      </button>
43    </div>
44  );
45}

1// hooks/useAmplitudeIdentify.ts
2import { useEffect } from 'react';
3import { identify, reset } from '@/lib/analytics';
4
5interface UserProfile {
6  id: string;
7  email: string;
8  plan: 'free' | 'pro' | 'enterprise';
9  createdAt: string;
10  companyName?: string;
11}
12
13export function useAmplitudeIdentify(user: UserProfile | null) {
14  useEffect(() => {
15    if (user) {
16      identify(user.id, {
17        email: user.email,
18        plan: user.plan,
19        created_at: user.createdAt,
20        company_name: user.companyName ?? '',
21      });
22    } else {
23      reset(); // Clear identity on logout
24    }
25  }, [user?.id, user?.plan]); // Re-identify if plan changes
26}
27
28// Usage in your root authenticated component:
29// const { user } = useAuth();
30// useAmplitudeIdentify(user);

1// lib/amplitude-server.ts
2const AMPLITUDE_HTTP_API = 'https://api2.amplitude.com/2/httpapi';
3
4export async function trackServerEvent(
5  eventType: string,
6  userId: string,
7  properties?: Record<string, unknown>
8): Promise<void> {
9  const apiKey = process.env.AMPLITUDE_API_KEY;
10  if (!apiKey) {
11    console.warn('AMPLITUDE_API_KEY not configured — skipping server event');
12    return;
13  }
14
15  try {
16    await fetch(AMPLITUDE_HTTP_API, {
17      method: 'POST',
18      headers: { 'Content-Type': 'application/json' },
19      body: JSON.stringify({
20        api_key: apiKey,
21        events: [
22          {
23            event_type: eventType,
24            user_id: userId,
25            time: Date.now(),
26            event_properties: properties ?? {},
27            insert_id: `${userId}-${eventType}-${Date.now()}`, // dedup key
28          },
29        ],
30      }),
31    });
32  } catch (error) {
33    // Non-blocking — analytics failure shouldn't break core flows
34    console.error('Amplitude server tracking failed:', error);
35  }
36}
37
38// Usage in Stripe webhook route:
39// await trackServerEvent('payment_completed', userId, {
40//   plan: 'pro',
41//   amount: 2900,
42//   currency: 'usd',
43// });