How to Integrate Third-Party Analytics Tools in FlutterFlow

Go to Custom Code → Pubspec Dependencies in your FlutterFlow project. Click Add Dependency and add the package for your chosen tool: mixpanel_flutter: ^2.2.0 for Mixpanel, amplitude_flutter: ^3.13.0 for Amplitude, or analytics: ^4.0.1 for Segment. Click Save and then Compile Code to verify the package installs without errors. If you see a version conflict, check the package's pub.dev page for the latest compatible version that supports your Flutter SDK. You can find the Flutter version used by your FlutterFlow project in Settings → Advanced.

Go to Custom Code → Custom Actions and create a new action named initAnalytics. For Mixpanel: import 'package:mixpanel_flutter/mixpanel_flutter.dart'; then implement the async function body as: final mixpanel = await Mixpanel.init('YOUR_PROJECT_TOKEN', optOutTrackingDefault: false); followed by setting the instance in a static variable for access across actions. For Amplitude: AmplitudeFlutter('YOUR_API_KEY'). For Segment: Analytics.setup('YOUR_WRITE_KEY', flushAt: 20). Add this Custom Action to your app's App Launch sequence: go to Settings → App Details → App Launch Actions, click Add Action, and select Call Custom Action → initAnalytics. IMPORTANT: initialize only ONCE here. Do not call init in individual page actions.

1// Custom Action: initAnalytics (Mixpanel example)
2import 'package:mixpanel_flutter/mixpanel_flutter.dart';
3
4// Global instance (declare at top of file)
5Mixpanel? _mixpanelInstance;
6
7Future<void> initAnalytics() async {
8  _mixpanelInstance = await Mixpanel.init(
9    'YOUR_MIXPANEL_PROJECT_TOKEN',
10    optOutTrackingDefault: false,
11    trackAutomaticEvents: true,
12  );
13  _mixpanelInstance!.setLoggingEnabled(false);
14}
15
16// Separate Custom Action: trackEvent
17Future<void> trackEvent(String eventName,
18    Map<String, dynamic> properties) async {
19  _mixpanelInstance?.track(eventName, properties: properties);
20}
21
22// Separate Custom Action: identifyUser
23Future<void> identifyUser(
24    String userId, String email, String plan) async {
25  _mixpanelInstance?.identify(userId);
26  _mixpanelInstance?.getPeople().set('\$email', email);
27  _mixpanelInstance?.getPeople().set('plan', plan);
28}

Create a Custom Action named identifyAnalyticsUser that accepts userId (String), email (String), and plan (String) parameters. For Mixpanel call: mixpanel.identify(userId), then mixpanel.getPeople().set(properties map). For Amplitude: client.setUserId(userId), client.setUserProperties(properties). For Segment: Analytics.identify(userId, traits: {'email': email, 'plan': plan}). Add this Custom Action to the action flow that runs AFTER a successful login or account creation. In the action flow, after Firebase Auth login succeeds, call identifyAnalyticsUser with FFAppState().currentUser.uid, the user's email, and their subscription tier. This ensures all future events are attributed to the correct user in your analytics dashboard.

Create a Custom Action named trackAnalyticsEvent that accepts eventName (String) and properties (JSON/Map) parameters. Implement it as a thin wrapper calling the SDK's track method. Now add this action to key moments in your app: button tap → Open Action Flow Editor → Add Action → Call Custom Action → trackAnalyticsEvent. Pass the event name as a string constant (e.g., 'purchase_completed') and properties as a JSON object with relevant context (e.g., {'amount': 49.99, 'product_id': 'pro_monthly', 'currency': 'USD'}). Key events to track in most apps: 'screen_viewed' with page name, 'button_tapped' with button label, 'form_submitted' with form name, 'purchase_completed' with amount, 'feature_used' with feature name.

In Mixpanel: go to Funnels → Create Funnel. Add your conversion steps in order: 'app_opened' → 'signup_started' → 'signup_completed' → 'purchase_completed'. Set the funnel window (7 days). Mixpanel shows the drop-off at each step and the profiles of users who dropped. In Amplitude: go to Charts → Funnel Analysis. Add the same events. In Segment, events are forwarded to your configured destinations. Also create a Retention chart: Mixpanel → Retention → select 'signup_completed' as the first event and 'purchase_completed' as the return event → view day-1, day-7, day-30 retention. These charts show which features drive users back.