# How to Integrate FlutterFlow with Google Analytics 4

- Tool: FlutterFlow
- Difficulty: Beginner
- Time required: 20-30 min
- Compatibility: FlutterFlow Free+ (Firebase required)
- Last updated: March 2026

## TL;DR

GA4 activates automatically when you connect Firebase to FlutterFlow — no extra setup needed for basic screen tracking. Add custom event logging via Custom Actions using FirebaseAnalytics.instance.logEvent() for purchase, add_to_cart, and sign_up events. Set user properties to segment audiences. Mark key events as Conversions in GA4 Console to track business goals.

## Track every meaningful action in your FlutterFlow app with Google Analytics 4

FlutterFlow's Firebase integration activates Google Analytics 4 automatically — the moment you connect your Firebase project, GA4 begins collecting screen views, session data, and device information without any additional configuration. The real value comes from custom events: logging purchases with revenue data, tracking feature adoption with named events, and segmenting users by subscription tier. This tutorial covers enabling GA4, writing Custom Actions to log e-commerce and conversion events, setting user properties for audience segmentation, and configuring the GA4 dashboard to surface the metrics that matter for your app's growth.

## Before you start

- A FlutterFlow project with Firebase connected (Settings → Firebase → Connect Project)
- Google Analytics enabled in your Firebase project (Firebase Console → Project Settings → Integrations → Google Analytics → Enable)
- Firebase Authentication set up if you want user-level analytics and user properties
- A GA4 property linked to your Firebase project (usually auto-created when you enable GA4 in Firebase)

## Step-by-step guide

### 1. Confirm GA4 is active and review auto-collected events

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.

**Expected result:** GA4's Realtime report shows active users and screen_view events matching your FlutterFlow page names when the app is opened on a device.

### 2. Create a Custom Action to log purchase and e-commerce events

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.

```
// Custom Action: logPurchaseEvent
// Parameters:
//   orderId (String)
//   revenue (double)
//   currency (String)  e.g. 'USD'
//   itemName (String)

import 'package:firebase_analytics/firebase_analytics.dart';

Future logPurchaseEvent(
  String orderId,
  double revenue,
  String currency,
  String itemName,
) async {
  final analytics = FirebaseAnalytics.instance;

  // Log the GA4 standard purchase event
  await analytics.logPurchase(
    transactionId: orderId,
    value: revenue,
    currency: currency,
    items: [
      AnalyticsEventItem(
        itemName: itemName,
        price: revenue,
      ),
    ],
  );

  // Also log a custom add_to_cart event separately when item is added
  // (call logAddToCartEvent Custom Action from your Add to Cart button)
}

// Separate Custom Action: logAddToCartEvent
Future logAddToCartEvent(
  String itemId,
  String itemName,
  double price,
  String currency,
) async {
  await FirebaseAnalytics.instance.logAddToCart(
    currency: currency,
    value: price,
    items: [
      AnalyticsEventItem(
        itemId: itemId,
        itemName: itemName,
        price: price,
      ),
    ],
  );
}
```

**Expected result:** Custom Actions compile successfully and appear as options in the Action Flow editor. Purchase events show up in GA4's Realtime → Events within 30 seconds of firing.

### 3. Log custom feature events with named parameters

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.

```
// Custom Action: logCustomEvent
// Parameters:
//   eventName (String)  — max 40 chars, letters/numbers/underscores only
//   paramKey1 (String)  — optional parameter key
//   paramValue1 (String) — optional parameter value

import 'package:firebase_analytics/firebase_analytics.dart';

Future logCustomEvent(
  String eventName, [
  String paramKey1 = '',
  String paramValue1 = '',
  String paramKey2 = '',
  String paramValue2 = '',
]) async {
  final Map<String, Object> params = {};
  if (paramKey1.isNotEmpty) params[paramKey1] = paramValue1;
  if (paramKey2.isNotEmpty) params[paramKey2] = paramValue2;

  await FirebaseAnalytics.instance.logEvent(
    name: eventName,
    parameters: params.isNotEmpty ? params : null,
  );
}
```

**Expected result:** Custom events appear in GA4's Events report with their parameter values visible in the event detail view.

### 4. Set user properties to segment your audience

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.

```
// Custom Action: setUserProperties
// Call this after login and after subscription changes
// Parameters:
//   subscriptionTier (String)  e.g. 'free' | 'pro' | 'enterprise'
//   userRole (String)          e.g. 'buyer' | 'seller' | 'admin'

import 'package:firebase_analytics/firebase_analytics.dart';

Future setUserProperties(
  String subscriptionTier,
  String userRole,
) async {
  final analytics = FirebaseAnalytics.instance;

  // Set user properties — persist until changed
  await analytics.setUserProperty(
    name: 'subscription_tier',
    value: subscriptionTier,
  );
  await analytics.setUserProperty(
    name: 'user_role',
    value: userRole,
  );

  // Set user ID for cross-device tracking
  // Use a non-PII identifier like Firestore document ID
  // Never use email or real name as userId
  final userId = await getCurrentUserId(); // your helper function
  await analytics.setUserId(id: userId);
}
```

**Expected result:** User properties are visible in GA4 → Reports → User attributes → User properties after 24-48 hours, and you can use them to filter all other reports.

### 5. Mark key events as Conversions in the GA4 dashboard

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.

**Expected result:** Selected events appear in GA4's Conversions report with counts, rates, and revenue attribution visible within 24 hours.

## Complete code example

File: `GA4 Integration Architecture`

```text
GA4 Auto-Collected Events (no code needed)
===========================================
first_open       → first app launch after install
session_start    → each new user session
screen_view      → each FlutterFlow page navigation
                   (screen_name = your page name)
app_foreground   → app brought to foreground
app_background   → app sent to background

Custom Actions to Create
=========================
logPurchaseEvent(orderId, revenue, currency, itemName)
  → Trigger: payment success callback / order confirmation page
  → GA4 event: purchase (e-commerce report)

logAddToCartEvent(itemId, itemName, price, currency)
  → Trigger: Add to Cart button On Tap
  → GA4 event: add_to_cart

logCustomEvent(eventName, paramKey1, paramValue1)
  → Trigger: any significant user action
  → Examples:
     feature_used   { feature_name: 'ai_chat' }
     search_performed { results_count: '12' }
     content_shared { content_type: 'article' }

setUserProperties(subscriptionTier, userRole)
  → Trigger: after login, after subscription change
  → Sets: subscription_tier, user_role, userId

GA4 Dashboard Setup
====================
Admin → Custom definitions → User properties
  → Create: subscription_tier (max 24 chars)
  → Create: user_role

Configure → Events → Mark as Conversion:
  → purchase
  → sign_up
  → begin_checkout
  → subscription_upgraded

Key Reports to Monitor
=======================
Realtime          → live active users + events
Engagement → Events → all custom events + counts
Monetization → Overview → revenue from purchase events
User attributes → User properties → segments by tier
Advertising → Conversion paths → paths to conversion
```

## Common mistakes

- **Not marking purchase and sign_up events as Conversions in the GA4 Console after they start firing** — Events are logged and counted but do not appear in the Conversions report or influence campaign attribution reporting unless explicitly marked as conversions. You cannot retroactively mark events as Conversions and have historical data populate — the conversion flag only applies from the moment you enable it. Fix: After you first test-fire each key event (purchase, sign_up, begin_checkout) on a real device, immediately go to GA4 Console → Configure → Events, find the event, and toggle 'Mark as conversion' to on. Do this within 24 hours of your first event firing so you do not lose early conversion data.
- **Testing analytics in FlutterFlow's browser preview and wondering why no events appear in GA4** — FlutterFlow's browser preview is a web simulation, not a real mobile app build. The firebase_analytics package only sends events from compiled mobile apps (iOS/Android) or web builds. Browser preview does not trigger real GA4 events. Fix: Test GA4 events by running the app on a physical device or emulator using FlutterFlow's Run mode on mobile, or by downloading and compiling the app. Enable DebugView in GA4 (Admin → DebugView) to see real-time events from debug builds before switching to release mode.
- **Using non-standard custom event names for standard actions instead of GA4's predefined event names** — If you log an event named order_completed instead of purchase, or user_registered instead of sign_up, GA4 treats them as unknown custom events and they do not populate the pre-built e-commerce, engagement, or acquisition reports. You lose access to GA4's automated funnel analysis for those actions. Fix: Use GA4's recommended event names wherever they apply: purchase, add_to_cart, begin_checkout, view_item, sign_up, login, search, share, tutorial_begin, tutorial_complete. Reserve custom event names for truly app-specific actions that have no GA4 equivalent.

## Best practices

- Enable GA4 DebugView (GA4 Console → Admin → DebugView) during development — it shows events in real-time from devices in debug mode, letting you verify parameters before going live
- Use a separate Firebase project (and thus separate GA4 property) for development/staging versus production — mixing test events with real user data corrupts your analytics
- Log events at the moment the user action completes, not when they start — log purchase after the payment succeeds, not when they tap Pay
- Keep event parameter values short and consistent — for subscription_tier, always use 'free', 'pro', 'enterprise' (not 'Free Plan', 'Professional', 'Enterprise Tier') so GA4 groups them correctly
- Set up GA4 Audiences based on user properties (e.g., subscription_tier = 'free') and use them for targeted push notifications via Firebase Cloud Messaging
- Add GA4 linking to Google Ads if you run paid campaigns — this enables conversion tracking and smart bidding based on in-app purchases
- Review the GA4 Events report weekly and remove events that have zero counts — they indicate an action trigger is misconfigured

## Frequently asked questions

### Does GA4 work without Firebase in FlutterFlow?

No — FlutterFlow's GA4 integration uses the firebase_analytics package which requires a Firebase project. If you do not want Firebase as your backend, you can still use GA4 by installing the firebase_analytics package manually via Custom Code → Pubspec Dependencies and initializing it with a Firebase project created solely for analytics (without using any other Firebase services). Alternatively, use a different analytics tool like Mixpanel or Amplitude which do not require Firebase.

### How long does it take for custom events to appear in GA4 reports?

Realtime report: 30 seconds to 2 minutes. Events report and standard reports: 24-48 hours for full processing. Conversions: 24-48 hours after marking. User properties in User attributes report: 24-48 hours. Use GA4's DebugView for instant event confirmation during development — it shows events from debug-mode builds in real time with all parameters.

### Can I see which users took which actions in GA4?

GA4 User Explorer (Reports → User exploration) lets you see an individual user's event timeline using their User ID (if you set analytics.setUserId()) or Google's anonymous device ID. You see a timeline of events, screen views, and session data. You cannot see personally identifiable information — GA4 explicitly prohibits sending email addresses, names, or other PII. Use your Firestore document ID as the userId.

### How do I track which pages users visit most?

Screen views are auto-collected — FlutterFlow automatically sends a screen_view event with the screen_name parameter set to your page name every time the user navigates to a new page. In GA4, go to Reports → Engagement → Pages and screens to see page view counts, average engagement time per page, and entry/exit rates for each screen. No custom code needed.

### What is the difference between GA4 and Firebase Analytics?

They are the same product — Firebase Analytics is the mobile SDK that sends data to a GA4 property. When you see 'Firebase Analytics' in FlutterFlow or pub.dev, it refers to the firebase_analytics Dart package. The dashboard you view at analytics.google.com is Google Analytics 4. Google merged the two brands: Firebase Analytics (mobile SDK) + Google Analytics 4 (reporting dashboard) are unified into one GA4 property.

### Can I export GA4 data to BigQuery for custom analysis?

Yes — GA4 has a direct BigQuery export. In your GA4 property go to Admin → Product links → BigQuery links → Link to a BigQuery project. GA4 exports a raw events table daily (free tier: up to 1M events/day). From BigQuery you can run SQL queries across all events, join with your Firestore data exported to BigQuery, and build custom dashboards in Looker Studio. This is the path for advanced analytics beyond what GA4's built-in reports provide.

---

Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-to-integrate-flutterflow-with-google-analytics
© RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-to-integrate-flutterflow-with-google-analytics