Mixpanel

Open mixpanel.com and sign in or create a free account. Click 'Create Project' in the top-left dropdown, give it a name that matches your FlutterFlow app (e.g. 'MyApp Production'), and select your data region (US or EU). Once the project is created, click the settings gear in the bottom-left corner → 'Project Settings'. Near the top of the General tab you will see 'Project Token' — a short alphanumeric string like `abc123def456`. Copy this token. This is a **public** identifier, not a secret: it cannot be used to read your data, only to write events into your project. It is safe to store in your FlutterFlow app. While you are here, also note the 'API Secret' field below it — that is the service account credential used for server-side queries (exporting cohorts, running saved reports via the Query API). You will NOT put that value in FlutterFlow. Keep the Mixpanel browser tab open for verification in Step 5.

In FlutterFlow, click the settings gear in the bottom-left navigation panel and select 'App Constants' (also accessible via Settings → App Values in some FlutterFlow versions). Click '+ Add Constant', name it `mixpanelToken` (camelCase, no spaces), set the type to String, and paste your project token as the value. Click Save. App Constants are compiled into the app bundle at build time — they are appropriate for publishable keys like this project token. Do not add the Mixpanel API Secret here. Constants are visible in the compiled binary, which is intentional for ingestion tokens (Mixpanel's ingestion API is designed to accept calls with only the public token), but it would be a serious credential leak for a service account secret. After saving, you can reference this constant anywhere in FlutterFlow as `FFAppConstants.mixpanelToken` in Dart, or via the variable picker in the Action Flow Editor under App Constants → mixpanelToken.

Click 'API Calls' in the left navigation panel of FlutterFlow. Click '+ Add' → 'Create API Group'. Name the group 'Mixpanel' and set the base URL to `https://api.mixpanel.com`. Click 'Add Call' to add the first endpoint. Name this call 'Track Event'. Set the method to POST and the endpoint path to `/track`. The Mixpanel /track endpoint accepts a `data` parameter carrying a base64-encoded JSON payload — this is Mixpanel's legacy ingestion format. Under the 'Body' tab, select 'Form URL Encoded' (not JSON) and add a single key-value pair: key = `data`, value = a variable you will define next. Switch to the Variables tab and add the following variables: `eventName` (String), `distinctId` (String), and `tokenValue` (String — you will pass the App Constant here at call time). These three variables will be combined in a custom function to build the base64 payload. For now, add a fourth variable named `encodedPayload` (String) to hold the pre-encoded value. In the Body section, set the `data` form field to reference the `encodedPayload` variable using the `{{encodedPayload}}` syntax. Under the Response & Test tab, paste a sample Mixpanel success response (`1`) and click 'Get Response Fields' — Mixpanel /track returns just `1` (success) or `0` (failure), so the response binding will be minimal. Save the API group.

1{
2  "group_name": "Mixpanel",
3  "base_url": "https://api.mixpanel.com",
4  "call_name": "Track Event",
5  "method": "POST",
6  "endpoint": "/track",
7  "body_type": "form_url_encoded",
8  "body_params": {
9    "data": "{{encodedPayload}}"
10  },
11  "variables": [
12    { "name": "encodedPayload", "type": "String" },
13    { "name": "eventName", "type": "String" },
14    { "name": "distinctId", "type": "String" }
15  ]
16}

Mixpanel's /track endpoint requires the event data to be a base64-encoded JSON string passed as the `data` form parameter. FlutterFlow cannot do base64 encoding inline in an Action Flow, so you need a small Custom Function. Click 'Custom Code' in the left nav → '+ Add' → 'Function'. Name it `buildMixpanelPayload`. Set the return type to String. Add three arguments: `eventName` (String), `distinctId` (String), and `token` (String). Paste the Dart code below into the function body. This function constructs the Mixpanel event JSON object, converts it to a string, and base64-encodes it — exactly what the /track endpoint expects. Click Save and Compile. After compiling successfully, this function will be available in your Action Flows under the 'Custom Functions' section of the variable picker. To wire everything together: select any widget (e.g., a button), open its Actions panel, click '+ Add Action' → 'Custom Action' (or 'Custom Function'). First, call `buildMixpanelPayload` with your event name, the current user's UID from App State (`currentUserUid`), and `FFAppConstants.mixpanelToken`. Store the return value in a local page variable named `encodedPayload`. Then add a second action: 'Backend/API Call' → Mixpanel → Track Event, passing the `encodedPayload` variable into the `encodedPayload` API variable.

1// FlutterFlow Custom Function: buildMixpanelPayload
2// Return type: String
3// Arguments: eventName (String), distinctId (String), token (String)
4
5import 'dart:convert';
6
7String buildMixpanelPayload(
8  String eventName,
9  String distinctId,
10  String token,
11) {
12  final Map<String, dynamic> event = {
13    'event': eventName,
14    'properties': {
15      'token': token,
16      'distinct_id': distinctId,
17      'time': DateTime.now().millisecondsSinceEpoch ~/ 1000,
18      'mp_lib': 'flutterflow',
19    },
20  };
21  final String jsonString = jsonEncode(event);
22  return base64Encode(utf8.encode(jsonString));
23}

Now connect the Mixpanel call to real user actions. For a page-view event: click on the page background in FlutterFlow (not any widget) → open the Actions panel on the right → scroll to 'On Page Load' → click '+ Add Action'. Add the two-step sequence: (1) call `buildMixpanelPayload` with event name 'page_viewed', distinctId from `currentUserUid` App State variable, and token from `FFAppConstants.mixpanelToken` — store result in a local variable; (2) call the Mixpanel Track Event API with that stored value. For button taps: select the button widget → Actions panel → On Tap → same two-step sequence, but pass the relevant event name like 'button_tapped' or your custom event name. For the `distinct_id`, use the FlutterFlow authenticated user ID. If you are using FlutterFlow's built-in authentication (Firebase Auth or Supabase), the current user UID is available in App State as `currentUserUid`. If your app has guest users, generate a UUID on first launch using the `uuid` package in a Custom Action, store it in App State, and use that as the distinct_id — this ensures you can link anonymous sessions to identified users after login using Mixpanel's `$identify` call. Go to Mixpanel's Live View (your project → 'Live View' in the left sidebar) and run your FlutterFlow app in Test Mode. Tap the button or navigate to the page. Within a few seconds, the event should appear in Live View with the event name, timestamp, and properties. If it appears, your integration is working.

If you publish your FlutterFlow app to the web (not just native iOS/Android), browsers enforce CORS and Mixpanel's /track endpoint does not include the `Access-Control-Allow-Origin` header for arbitrary origins. You will see a `XMLHttpRequest error` in the browser console when the API Call fires on a web build. Two options: (1) Enable FlutterFlow's built-in API proxy — in the API Calls panel, open the Mixpanel group, toggle on 'Use FlutterFlow Proxy'. This routes your call through FlutterFlow's servers, adding the necessary headers. This is the easiest fix. (2) Route through a Firebase Cloud Function that makes the Mixpanel call server-side and returns the result to your FlutterFlow API Call. For server-side Mixpanel queries (exporting cohorts, running the Query API for funnel results) you need your Mixpanel service account credentials (user and secret). These MUST live in a Firebase Cloud Function — never in FlutterFlow. In the Cloud Function, use HTTP Basic Auth with the service account user as the username and the secret as the password when calling `https://mixpanel.com/api/2.0/...` endpoints. Your FlutterFlow app calls your Cloud Function URL, not Mixpanel directly. RapidDev's team sets up FlutterFlow + Mixpanel integrations like this every week — if you want a custom funnel dashboard built without writing Cloud Functions yourself, a free scoping call is at rapidevelopers.com/contact.

1// Firebase Cloud Function proxy for Mixpanel Query API
2// File: functions/index.js
3const functions = require('firebase-functions');
4const axios = require('axios');
5
6exports.mixpanelQuery = functions.https.onCall(async (data, context) => {
7  // Verify the caller is authenticated
8  if (!context.auth) {
9    throw new functions.https.HttpsError('unauthenticated', 'Must be signed in.');
10  }
11
12  const { endpoint, params } = data;
13  const serviceUser = process.env.MIXPANEL_SERVICE_USER;
14  const serviceSecret = process.env.MIXPANEL_SERVICE_SECRET;
15
16  const credentials = Buffer.from(`${serviceUser}:${serviceSecret}`).toString('base64');
17
18  try {
19    const response = await axios.get(
20      `https://mixpanel.com/api/2.0/${endpoint}`,
21      {
22        headers: { Authorization: `Basic ${credentials}` },
23        params,
24      }
25    );
26    return response.data;
27  } catch (error) {
28    throw new functions.https.HttpsError('internal', error.message);
29  }
30});