How to Integrate FlutterFlow with Google Analytics 4

When Firebase is connected in FlutterFlow, the firebase_analytics package is automatically included in your project. Verify this by going to Custom Code → Pubspec Dependencies — you should see firebase_analytics in the list (added by FlutterFlow automatically). GA4 auto-collects these events from your FlutterFlow app with no code required: first_open (first app launch after install), session_start (each new session), app_foreground and app_background (lifecycle events), screen_view (each time the user navigates to a new page in FlutterFlow — the screen name matches your page name), and os_update (when the device OS updates). View these in GA4: go to your GA4 property → Reports → Realtime — open the app on a device and watch events appear live. In the Events report (Reports → Engagement → Events), you will see all auto-collected events with counts after 24-48 hours. Screen views are the most important default: each FlutterFlow page name becomes a screen_view event parameter, so you can see which pages users visit most.

In FlutterFlow, go to Custom Code → Custom Actions → + Add Action. Name it logPurchaseEvent. Add parameters: orderId (String), revenue (Double), currency (String), itemName (String). In the code editor, write the logEvent call with the standard GA4 e-commerce event name purchase — using the exact event names GA4 recognizes unlocks pre-built e-commerce reports. The parameters value (revenue amount) and currency (ISO code like 'USD') are required for revenue tracking. After writing the action, click Compile Code to verify it builds. Add this Custom Action to the button or Action Flow that runs after a successful payment: on your checkout confirmation page or payment success callback, add an Action → Custom Actions → logPurchaseEvent, passing the order total, currency, and item name from the relevant Backend Query or App State variable.

1// Custom Action: logPurchaseEvent
2// Parameters:
3//   orderId (String)
4//   revenue (double)
5//   currency (String)  e.g. 'USD'
6//   itemName (String)
7
8import 'package:firebase_analytics/firebase_analytics.dart';
9
10Future logPurchaseEvent(
11  String orderId,
12  double revenue,
13  String currency,
14  String itemName,
15) async {
16  final analytics = FirebaseAnalytics.instance;
17
18  // Log the GA4 standard purchase event
19  await analytics.logPurchase(
20    transactionId: orderId,
21    value: revenue,
22    currency: currency,
23    items: [
24      AnalyticsEventItem(
25        itemName: itemName,
26        price: revenue,
27      ),
28    ],
29  );
30
31  // Also log a custom add_to_cart event separately when item is added
32  // (call logAddToCartEvent Custom Action from your Add to Cart button)
33}
34
35// Separate Custom Action: logAddToCartEvent
36Future logAddToCartEvent(
37  String itemId,
38  String itemName,
39  double price,
40  String currency,
41) async {
42  await FirebaseAnalytics.instance.logAddToCart(
43    currency: currency,
44    value: price,
45    items: [
46      AnalyticsEventItem(
47        itemId: itemId,
48        itemName: itemName,
49        price: price,
50      ),
51    ],
52  );
53}

Beyond e-commerce, log events for every significant user action: feature discovery, content engagement, errors. In FlutterFlow Custom Code, create a general-purpose logCustomEvent Custom Action with parameters eventName (String) and a JSON Map for parameters. Use this action to track feature usage — for example, on your AI chat page, log a chat_message_sent event with parameters like message_length and model_used. On a filter or search feature, log search_performed with query_length and results_count. The event name must be 40 characters or fewer, contain only letters/numbers/underscores, and must not start with a number. Parameter names have the same rules, values can be String or Double. Add the logCustomEvent action to the relevant buttons and Action Flows throughout your app. In GA4, these appear under Reports → Engagement → Events within 24 hours.

1// Custom Action: logCustomEvent
2// Parameters:
3//   eventName (String)  — max 40 chars, letters/numbers/underscores only
4//   paramKey1 (String)  — optional parameter key
5//   paramValue1 (String) — optional parameter value
6
7import 'package:firebase_analytics/firebase_analytics.dart';
8
9Future logCustomEvent(
10  String eventName, [
11  String paramKey1 = '',
12  String paramValue1 = '',
13  String paramKey2 = '',
14  String paramValue2 = '',
15]) async {
16  final Map<String, Object> params = {};
17  if (paramKey1.isNotEmpty) params[paramKey1] = paramValue1;
18  if (paramKey2.isNotEmpty) params[paramKey2] = paramValue2;
19
20  await FirebaseAnalytics.instance.logEvent(
21    name: eventName,
22    parameters: params.isNotEmpty ? params : null,
23  );
24}

User properties let you group and segment users in GA4 reports. Examples: subscription_tier (free/pro/enterprise), user_type (buyer/seller/admin), preferred_language, app_version_group. Set user properties after login or when a property changes — in the Custom Action that runs after your Firebase Auth sign-in completes, or in the Custom Action triggered when a user upgrades their subscription. In FlutterFlow, add a Custom Action named setUserProperties with parameters for each property you want to set. User property names must be 24 characters or fewer, values must be 36 characters or fewer. You can define up to 25 custom user properties per GA4 property. Register them in GA4 Console → Admin → Custom definitions → User properties → Create before they appear in reports. Once set, user properties persist across sessions until you update them.

1// Custom Action: setUserProperties
2// Call this after login and after subscription changes
3// Parameters:
4//   subscriptionTier (String)  e.g. 'free' | 'pro' | 'enterprise'
5//   userRole (String)          e.g. 'buyer' | 'seller' | 'admin'
6
7import 'package:firebase_analytics/firebase_analytics.dart';
8
9Future setUserProperties(
10  String subscriptionTier,
11  String userRole,
12) async {
13  final analytics = FirebaseAnalytics.instance;
14
15  // Set user properties — persist until changed
16  await analytics.setUserProperty(
17    name: 'subscription_tier',
18    value: subscriptionTier,
19  );
20  await analytics.setUserProperty(
21    name: 'user_role',
22    value: userRole,
23  );
24
25  // Set user ID for cross-device tracking
26  // Use a non-PII identifier like Firestore document ID
27  // Never use email or real name as userId
28  final userId = await getCurrentUserId(); // your helper function
29  await analytics.setUserId(id: userId);
30}

By default, GA4 tracks all events but does not know which ones represent business goals. You must manually mark important events as Conversions — this unlocks the Conversions report and allows you to see conversion rates, paths to conversion, and campaign attribution. In Google Analytics 4: navigate to your property → Configure → Events → find the event name (e.g., purchase, sign_up, begin_checkout) → toggle the 'Mark as conversion' switch to blue. Do this for: purchase (every successful payment), sign_up (new account registration), begin_checkout (cart → checkout funnel start), subscription_upgraded (if you have paid tiers). Conversions appear in GA4 → Reports → Monetization → Overview and in the Advertising → Conversion paths report. You can see which traffic sources drive conversions by connecting GA4 to Google Ads. Note: events only show up in the Configure → Events list after they have been fired at least once — test fire the events from a real device first, then mark them as Conversions.