How to Integrate Lovable with Mixpanel

Before writing any code, gather the right credentials from Mixpanel and store them securely in Lovable. Log in to your Mixpanel account at mixpanel.com. In the top-right corner, click your project name to access project settings. Navigate to Settings → Project Settings. You will see your Project Token — a 32-character alphanumeric string like 'abc123def456...' — listed under the project details. This is your public project token, safe to use in client-side JavaScript code. Copy it. For server-side integration (the Edge Function approach), you also need a Service Account: go to Settings → Service Accounts, click 'Add Service Account', give it a name like 'lovable-backend', and copy the generated username and secret. Now store the credentials in Lovable. Open your Lovable project in the browser editor. Click the + icon next to the Preview button to open the Cloud tab. Click 'Secrets' in the Cloud tab panel. Click 'Add secret'. Add a secret named MIXPANEL_PROJECT_TOKEN and paste the project token value. If you are using server-side integration, add MIXPANEL_SERVICE_ACCOUNT_USERNAME and MIXPANEL_SERVICE_ACCOUNT_SECRET as additional secrets. Click Save for each secret. The secrets are now encrypted and available to Edge Functions via Deno.env.get(). For client-side use, you also need to expose the public project token to the frontend: add VITE_MIXPANEL_TOKEN to your .env file (and to Lovable's environment configuration) with the same project token value — the VITE_ prefix makes it available in React code.

The most reliable way to add Mixpanel to the Lovable project is to use the mixpanel-browser npm package and create a centralized analytics utility that all components import. Open Lovable's chat interface and ask Lovable to install the package and create the utility file. The analytics utility should handle three core Mixpanel patterns that product analytics teams rely on: first, initialization using your project token with production-appropriate settings (disabling debug mode in production, setting the persistence method to localStorage, and enabling automatic pageview tracking if desired); second, user identification — calling mixpanel.identify() when a user logs in with their Supabase user ID as the distinct_id, and mixpanel.people.set() to store user properties like email, plan, and signup date on the Mixpanel person profile; third, event tracking — a simple track() wrapper function that adds common properties to every event (current URL, user plan, timestamp) before sending them to Mixpanel. Create the utility as a singleton module so it initializes once and all imports reference the same Mixpanel instance. The utility should handle the case where the VITE_MIXPANEL_TOKEN environment variable is not set (development environments without analytics configured) by checking for the token before initializing.

1import mixpanel from 'mixpanel-browser';
2
3const token = import.meta.env.VITE_MIXPANEL_TOKEN;
4
5let initialized = false;
6
7export function initMixpanel() {
8  if (!token) {
9    console.warn('Mixpanel token not configured. Analytics disabled.');
10    return;
11  }
12  mixpanel.init(token, {
13    debug: import.meta.env.DEV,
14    persistence: 'localStorage',
15    track_pageview: true,
16  });
17  initialized = true;
18}
19
20export function identify(userId: string, properties?: Record<string, unknown>) {
21  if (!initialized) return;
22  mixpanel.identify(userId);
23  if (properties) {
24    mixpanel.people.set(properties);
25  }
26}
27
28export function track(eventName: string, properties?: Record<string, unknown>) {
29  if (!initialized) return;
30  mixpanel.track(eventName, {
31    ...properties,
32    $current_url: window.location.href,
33    timestamp: new Date().toISOString(),
34  });
35}
36
37export function reset() {
38  if (!initialized) return;
39  mixpanel.reset();
40}

With the analytics utility created, add tracking calls at the key points in your application where user behavior matters. The most important tracking calls are: user identification after login, core feature usage events, and conversion events like subscription upgrades. For user identification, find the authentication event in your Lovable app — typically in the Supabase auth state change handler. After a successful login, call the identify function with the user's Supabase user ID and key user properties. Using the Supabase user ID as the Mixpanel distinct_id ensures consistent tracking across devices and sessions. For signup events, call track('Signed Up') immediately after successful registration with properties like the plan the user signed up for and the acquisition source if known. For the identify call after signup, use Mixpanel's alias pattern: call mixpanel.alias(userId) before identify() to link the anonymous pre-signup session to the identified post-signup user. This preserves any events tracked before login in the same user journey. For feature usage, add track calls to the most important user actions: creating a project, using a key feature, sharing content, or completing a workflow. Each track call should include contextual properties — what state the user was in, what options they chose, what the outcome was. For logout, call the reset function to clear the Mixpanel cookie, preventing the next user on the same device from being associated with the previous session.

1// In your auth component or hook
2import { identify, track, reset } from '@/lib/analytics';
3import { useEffect } from 'react';
4import { supabase } from '@/integrations/supabase/client';
5
6export function useAnalytics() {
7  useEffect(() => {
8    const { data: { subscription } } = supabase.auth.onAuthStateChange(
9      (event, session) => {
10        if (event === 'SIGNED_IN' && session?.user) {
11          identify(session.user.id, {
12            $email: session.user.email,
13            $created: session.user.created_at,
14            plan: 'free', // update from your users table
15          });
16          track('Logged In');
17        }
18        if (event === 'SIGNED_OUT') {
19          track('Logged Out');
20          reset();
21        }
22      }
23    );
24    return () => subscription.unsubscribe();
25  }, []);
26}

For backend events that should not rely on the client browser — payment confirmations, email sends, background job completions — create a Supabase Edge Function that calls Mixpanel's HTTP Ingestion API directly. This approach also bypasses ad blockers that may intercept direct Mixpanel requests from the browser. In your Lovable project, open the chat and ask Lovable to create a new Edge Function for Mixpanel event tracking. The Edge Function calls Mixpanel's track endpoint at https://api.mixpanel.com/track using a POST request. Mixpanel's HTTP API accepts events as JSON objects containing the event name, distinct_id of the user, and any properties. The Edge Function authenticates using your Mixpanel project token (for simple ingestion) or Service Account credentials (for more advanced operations). The token and any credentials are read from Deno.env.get() — never hardcoded. The function accepts a POST request from your frontend or from other Edge Functions with the event data as a JSON body, validates the inputs, formats them in Mixpanel's required schema, and forwards them to Mixpanel's API. Handle errors gracefully — if Mixpanel is unavailable, log the error but still return a success response to the caller so analytics failures do not break core functionality. The Edge Function approach is also useful as a proxy layer that intercepts all analytics events, allowing you to add data enrichment (adding server-side user attributes that the client might not have) or routing events to multiple analytics services simultaneously.

1// supabase/functions/mixpanel-track/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9serve(async (req) => {
10  // Handle CORS preflight
11  if (req.method === 'OPTIONS') {
12    return new Response('ok', { headers: corsHeaders });
13  }
14
15  try {
16    const token = Deno.env.get('MIXPANEL_PROJECT_TOKEN');
17    if (!token) {
18      console.error('MIXPANEL_PROJECT_TOKEN not configured');
19      return new Response(JSON.stringify({ success: false }), {
20        status: 200, // Return 200 to avoid breaking callers
21        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
22      });
23    }
24
25    const body = await req.json();
26    const { event_name, distinct_id, properties = {} } = body;
27
28    if (!event_name || !distinct_id) {
29      return new Response(
30        JSON.stringify({ error: 'event_name and distinct_id are required' }),
31        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
32      );
33    }
34
35    // Build Mixpanel event payload
36    const eventData = {
37      event: event_name,
38      properties: {
39        token,
40        distinct_id,
41        time: Math.floor(Date.now() / 1000),
42        ...properties,
43      },
44    };
45
46    // Send to Mixpanel HTTP Ingestion API
47    const encodedData = btoa(JSON.stringify([eventData]));
48    const mixpanelResponse = await fetch(
49      `https://api.mixpanel.com/track?data=${encodedData}&verbose=1`,
50      { method: 'GET' }
51    );
52
53    const result = await mixpanelResponse.json();
54    console.log('Mixpanel response:', result);
55
56    return new Response(JSON.stringify({ success: true }), {
57      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
58    });
59  } catch (error) {
60    console.error('Mixpanel track error:', error);
61    // Always return 200 so analytics failures don't break callers
62    return new Response(JSON.stringify({ success: false, error: String(error) }), {
63      status: 200,
64      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
65    });
66  }
67});

After implementing tracking, verify that events are flowing correctly and set up the essential Mixpanel reports that give immediate product insight. Open your Lovable app in the browser and perform a few key user actions — log in, use a feature, click a button you are tracking. Then open your Mixpanel project and click 'Live View' in the left navigation panel. Live View shows events in real time as they arrive. You should see your tracked events appearing within one to five seconds of performing the action in the app. Click on an event to expand it and verify the properties are correct: check that the distinct_id matches the logged-in user's Supabase user ID, the event name is spelled correctly, and the custom properties (feature_name, plan, etc.) have the expected values. If events are not appearing in Live View, open your browser's developer tools, go to the Network tab, and filter for 'mixpanel' or 'api.mixpanel.com'. You should see POST requests to Mixpanel's tracking endpoint with 200 response codes. No requests means the SDK was not initialized correctly — check that initMixpanel() was called and VITE_MIXPANEL_TOKEN is set. Once tracking is verified, set up three essential Mixpanel reports: a Funnel report showing your signup → onboarding → first feature use → subscription conversion funnel; a Retention report showing what percentage of users return to the app on day 1, day 7, and day 30 after signup; and an Insights report showing daily and weekly active users with a breakdown by user plan or acquisition source. These three reports give you the core product health metrics within minutes of setting up tracking.