How to Set Up a Custom Analytics Platform in FlutterFlow

Create four Firestore collections. First, raw_events with fields: eventName (String), userId (String), properties (Map), timestamp (Timestamp), sessionId (String). Second, metrics_hourly with fields: metricName (String), hour (Timestamp), value (Double), count (Integer). Third, metrics_daily with the same structure but at day granularity. Fourth, funnels with fields: funnelName (String), steps (Array of Strings representing event names), createdAt (Timestamp). Add sample documents to raw_events with event names like page_view, button_click, signup_complete, and purchase_complete. Create composite indexes on raw_events for eventName + timestamp queries and on metrics_daily for metricName + day queries. These rollup collections are the key to performance: dashboards query rollups, never raw events.

Create a Custom Action called logAnalyticsEvent with parameters: eventName (String), properties (JSON, optional). Inside the action, generate a sessionId from App State (set on app launch if empty, using a Custom Function that returns a UUID). Write a document to raw_events with eventName, the current authenticated user ID from currentUserUid, the properties map, the sessionId from App State, and FieldValue.serverTimestamp() for the timestamp field. Now wire this action throughout your app: on page loads, add an Action Flow trigger On Page Load that calls logAnalyticsEvent with eventName set to page_view and properties containing the page name. On key buttons like Sign Up or Purchase, add logAnalyticsEvent as an additional action in the Action Flow. This gives you complete event coverage without any third-party SDK.

1// Custom Action: logAnalyticsEvent
2// Parameters: eventName (String), properties (JSON, optional)
3
4import 'package:cloud_firestore/cloud_firestore.dart';
5
6Future<void> logAnalyticsEvent(
7  String eventName, {
8  Map<String, dynamic>? properties,
9}) async {
10  final user = FirebaseAuth.instance.currentUser;
11  await FirebaseFirestore.instance.collection('raw_events').add({
12    'eventName': eventName,
13    'userId': user?.uid ?? 'anonymous',
14    'properties': properties ?? {},
15    'sessionId': FFAppState().currentSessionId,
16    'timestamp': FieldValue.serverTimestamp(),
17  });
18}

Deploy two scheduled Cloud Functions. The first, aggregateHourly, runs every hour via functions.pubsub.schedule. It queries raw_events from the last hour, groups events by eventName, counts occurrences, sums numeric properties like revenue, and writes one document per metric to metrics_hourly with the hour timestamp, metricName, value, and count. The second function, aggregateDaily, runs once at midnight. It reads the 24 metrics_hourly documents for the previous day, sums them into a single metrics_daily document per metric. Add a third function, archiveOldEvents, that runs weekly and moves raw_events older than 30 days to a raw_events_archive collection or deletes them. This three-tier approach keeps raw_events small, rollups fast, and storage costs controlled.

1// Cloud Function: aggregateHourly (simplified)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5const db = admin.firestore();
6
7exports.aggregateHourly = functions.pubsub
8  .schedule('every 1 hours').onRun(async () => {
9    const now = new Date();
10    const hourAgo = new Date(now.getTime() - 3600000);
11    const snapshot = await db.collection('raw_events')
12      .where('timestamp', '>=', hourAgo)
13      .where('timestamp', '<', now).get();
14    const counts = {};
15    snapshot.docs.forEach(doc => {
16      const name = doc.data().eventName;
17      counts[name] = (counts[name] || 0) + 1;
18    });
19    const batch = db.batch();
20    Object.entries(counts).forEach(([metric, count]) => {
21      const ref = db.collection('metrics_hourly').doc();
22      batch.set(ref, {
23        metricName: metric,
24        hour: admin.firestore.Timestamp.fromDate(hourAgo),
25        value: count,
26        count: count,
27      });
28    });
29    await batch.commit();
30  });

Create a new page called AnalyticsPlatform. Add a GridView with crossAxisCount 2 and spacing 16. Each grid child is a Component called DashboardWidget with three Component Parameters: widgetId (String), metricName (String), and chartType (String). Inside the Component, add a Container with white background, rounded corners, and padding. At the top, place a Row with two DropDown widgets: the first lists available metrics (page_view, signup_complete, purchase_complete) and binds to a Page State variable selectedMetric. The second DropDown offers chart types: Line, Bar, Pie. Below the DropDowns, add a DateTimePicker range selector that sets filterStartDate and filterEndDate Page State variables. The main content area holds a Custom Widget that receives the selectedMetric, chartType, and date range, then queries metrics_daily and renders the appropriate fl_chart visualization. When any DropDown value changes, the Backend Query re-executes automatically because it references the Page State variables.

Create a page called FunnelAnalysis. Add a ListView that displays saved funnels from the funnels Firestore collection. Each funnel document has a funnelName and a steps array of event names (e.g., ['page_view', 'signup_start', 'signup_complete', 'first_purchase']). When a user taps a funnel, navigate to a FunnelDetail page. On this page, run a Backend Query for each step: query metrics_daily where metricName equals the step name, within the selected date range, and sum the values. Display the results in a vertical ListView where each row shows the step name, the count, and the conversion rate from the previous step. Calculate conversion with a Custom Function: (currentStepCount / previousStepCount * 100). Use a Container with a width set proportionally to the conversion rate to create a visual funnel bar that narrows at each step. Color each bar from green (high conversion) to red (low conversion) using Conditional Styles. Add a Create Funnel button that opens a BottomSheet with a TextField for the name and a multi-select for event steps.

1// Custom Function: calcConversionRate
2// Return Type: String
3// Parameters: currentCount (int), previousCount (int)
4
5String calcConversionRate(int currentCount, int previousCount) {
6  if (previousCount == 0) return '0.0';
7  final rate = (currentCount / previousCount) * 100;
8  return rate.toStringAsFixed(1);
9}

Create a page called CohortRetention. A cohort groups users by their signup week. Query the raw_events collection for signup_complete events, group by week using a Custom Function that returns the ISO week number from a timestamp. For each cohort week, query how many of those users triggered any event in Week 0 (signup week), Week 1, Week 2, and so on up to Week 8. Display results in a GridView styled as a table: rows are cohort weeks, columns are retention weeks (Week 0 through Week 8). Each cell shows the retention percentage with background color intensity mapped to the value (darker green for higher retention). Use Conditional Styles to set the Container background opacity: retention 80-100 percent gets opacity 1.0, 60-80 gets 0.8, and so on down to below 20 percent at 0.2. For CSV export, create a Custom Action that builds a comma-separated string from the cohort data and uses the url_launcher package to trigger a download or share via the device share sheet.