Google Analytics

Open your FlutterFlow project and click on Settings & Integrations in the left navigation panel. Scroll down to the Firebase section and look for the 'Google Analytics' toggle — it should be listed under the Firebase integration options alongside Firestore, Authentication, and Storage. Click the toggle to enable it. Behind the scenes, FlutterFlow adds the `firebase_analytics` pub.dev package to your project dependencies and updates the Firebase configuration files (`google-services.json` for Android and `GoogleService-Info.plist` for iOS) to include your GA4 property ID. If the toggle is greyed out or you don't see it, it usually means your Firebase project does not yet have a linked GA4 property. Go to the Firebase Console (console.firebase.google.com), open your project, click the gear icon → Project Settings → Integrations → Google Analytics, and link or create a GA4 property. Come back to FlutterFlow and the toggle will be available. Once enabled, FlutterFlow automatically logs `screen_view` events every time a user navigates to a new page in your app. You do not need to add any manual actions for basic screen tracking — the package handles that automatically in the generated Flutter code. Important: the Measurement ID (the G-XXXX string you see in GA4's web data stream settings) is for the JavaScript gtag library on websites. Do not paste it anywhere in FlutterFlow. The mobile tracking goes through Firebase using the project credentials in your config files, not a Measurement ID.

Automatic screen tracking is a great start, but real insight comes from logging custom events at meaningful moments: when a user signs up, completes a purchase, clicks a key button, or finishes an onboarding step. FlutterFlow exposes this through the Action Flow Editor under an 'Analytics' action category. To add a custom event: tap the widget you want to track (for example, a 'Complete Purchase' button), then open its Actions panel on the right side. Click '+ Add Action', search for 'Log Event' (it appears under the Analytics category), and select it. In the action settings, enter your event name. GA4 event names must be snake_case, under 40 characters, and must not use reserved names like `screen_view`, `session_start`, `first_open`, or `app_remove`. Good examples: `purchase_complete`, `signup_finished`, `tutorial_step_complete`. You can also add event parameters — key-value pairs that give the event context. For a purchase event, add parameters like `currency` (string), `value` (number), and `item_name` (string). In the parameter value fields, you can bind dynamic values from your app state or page variables so each event carries real data. For events that should fire when a screen loads rather than when a button is tapped, add the Log Event action to the page's On Page Load action chain instead of a button. This is useful for tracking which screens are most visited beyond what automatic screen tracking gives you. Avoid logging too many events or events with high-cardinality parameter values (like per-user unique IDs in every event) — GA4 has limits on the number of distinct event types and parameters per property.

Testing Google Analytics events from FlutterFlow requires a real device or a Test Mode build. The web preview in FlutterFlow's Run mode does not reliably send Firebase Analytics events — the analytics package is designed for mobile builds, and DebugView specifically targets devices. To put your device into DebugView mode, you need a Test Mode build. In FlutterFlow, click the Test/Run toggle in the top right and choose 'Test'. Install the resulting build on your Android or iOS device using the QR code or direct download. Once the app is open on your device, go to Firebase Console → Analytics → DebugView. You should see your device listed within a minute or two. Tap around your app and log custom events — each one appears in real time in DebugView with its name, parameters, and timestamp. If your device does not appear in DebugView: - Check that you used a Test Mode build, not the web preview. - Make sure the device has an internet connection. - Wait up to 2-3 minutes for the initial connection. - Verify the Google Analytics toggle is still enabled in FlutterFlow's Firebase settings (occasionally toggling off after a project refresh). For iOS builds, be aware that analytics data may under-report if you have not implemented App Tracking Transparency (ATT) consent. iOS 14.5+ requires apps that use data for tracking purposes to request permission. Without proper consent handling, analytics tied to IDFA-based signals may be limited. For most event logging (non-ad-related tracking), this is less of an issue, but it's worth noting if your GA4 numbers seem lower than expected on iOS. Once you've confirmed events are flowing correctly, you can set up conversion events in the GA4 property settings (Firebase Console → Analytics → Events → mark as conversion) to track key business moments like purchases or completed signups.

If you want to display GA4 metrics inside your FlutterFlow app — for example, showing an admin screen with today's active users, top pages, or session counts — you'll need to call the GA4 Data API (`analyticsdata.googleapis.com/v1beta`). This API uses OAuth2 or a service account for authentication, which means the credential is a sensitive JSON file that must never be embedded in your compiled app. The safe approach is a Firebase Cloud Function that holds the service-account credential and acts as a proxy between your FlutterFlow app and the GA4 Data API. Here is a minimal example: First, create a service account in Google Cloud Console with the 'Viewer' role on your GA4 property. Download the JSON key file. Add it to your Cloud Functions project (never commit it to a public repository). Deploy a Cloud Function that imports the `@google-analytics/data` Node.js library, authenticates using the service account, queries the GA4 Data API for your metrics, and returns a clean JSON response to the FlutterFlow API Call. In FlutterFlow, create an API Group pointing to your deployed Cloud Function URL (left nav → API Calls → + Add → Create API Group). Add an API Call (GET) with no sensitive headers — the secret is already inside the Cloud Function. In the Response & Test tab, paste the sample response from a test call and click 'Generate JSON Paths' to extract the metric values. Bind these values to widgets on your dashboard screen via a Backend Query. This pattern keeps your service-account credential completely off the device, while still letting your app display real GA4 metrics.

1// Firebase Cloud Function proxy for GA4 Data API
2// functions/index.js
3const functions = require('firebase-functions');
4const { BetaAnalyticsDataClient } = require('@google-analytics/data');
5
6const analyticsClient = new BetaAnalyticsDataClient({
7  keyFilename: './service-account.json' // stored in your functions/ directory
8});
9
10exports.getGA4Metrics = functions.https.onRequest(async (req, res) => {
11  res.set('Access-Control-Allow-Origin', '*');
12  if (req.method === 'OPTIONS') {
13    res.set('Access-Control-Allow-Methods', 'GET');
14    res.set('Access-Control-Allow-Headers', 'Content-Type');
15    return res.status(204).send('');
16  }
17
18  const propertyId = 'YOUR_GA4_PROPERTY_ID'; // e.g. '123456789'
19
20  try {
21    const [response] = await analyticsClient.runReport({
22      property: `properties/${propertyId}`,
23      dateRanges: [{ startDate: 'today', endDate: 'today' }],
24      metrics: [
25        { name: 'activeUsers' },
26        { name: 'sessions' }
27      ]
28    });
29
30    const metrics = {};
31    response.rows.forEach(row => {
32      row.metricValues.forEach((val, idx) => {
33        metrics[response.metricHeaders[idx].name] = val.value;
34      });
35    });
36
37    return res.json({ success: true, data: metrics });
38  } catch (err) {
39    console.error('GA4 Data API error:', err);
40    return res.status(500).json({ success: false, error: err.message });
41  }
42});