How to Track and Analyze User Navigation Patterns in FlutterFlow

In FlutterFlow, create a Firestore collection named `navigationEvents`. Add these fields: `userId` (String — Firebase Auth UID, or 'anonymous'), `sessionId` (String — a UUID generated at app launch and stored in App State), `screenName` (String — the current page name), `previousScreen` (String, nullable — the screen navigated from), `timestamp` (Timestamp), `platform` (String — 'ios', 'android', or 'web'), `appVersion` (String). The `sessionId` is the key field that ties events together into a session. Generate it once on app startup using a Custom Function that calls Dart's `Uuid` package and store it in an App State variable. This lets you reconstruct the exact path a user took in a single session.

Go to FlutterFlow > App State and add a variable named `sessionId` (String, persisted: false — resets on each app launch). Add a Custom Function named `generateUuid` that returns a new UUID string: in Dart this is `const Uuid().v4()` from the `uuid` package (add `uuid: ^4.0.0` to your pubspec.yaml). On your app's initial page (usually the splash or entry page), add an On Page Load action: call the `generateUuid` Custom Function and set the `sessionId` App State variable to the result. Also set a `previousScreen` App State variable (String, default empty string) that you will update on every navigation.

1// Custom Function: generateUuid
2import 'package:uuid/uuid.dart';
3
4String generateUuid() {
5  return const Uuid().v4();
6}

On each page in FlutterFlow, go to the page settings and add an On Page Load action chain. The chain should: (1) Run a Firestore Create Document action on `navigationEvents` with all fields populated — `userId` from `currentUser.uid` (or 'anonymous' if not signed in), `sessionId` from App State, `screenName` as a hardcoded string matching the page name, `previousScreen` from the `previousScreen` App State variable, `timestamp` as the current time, `platform` from the `Platform` Custom Function. (2) After logging, update the `previousScreen` App State variable to the current page name. This two-step pattern — log then update — ensures each event correctly captures where the user came from.

Create a Firebase Cloud Function named `buildTransitionMatrix`. It queries `navigationEvents` for the last 30 days (configurable), groups events by `previousScreen -> screenName` pairs, and counts occurrences of each pair. The result is a matrix where each row represents a source screen, each column a destination screen, and the value is the number of times users navigated from source to destination. The function saves the result to a Firestore document `analyticsCache/transitionMatrix` with a `computedAt` timestamp. Schedule it to run daily via Cloud Scheduler. In FlutterFlow, read the `analyticsCache/transitionMatrix` document to display the most common navigation paths on an admin dashboard.

1const { onCall } = require('firebase-functions/v2/https');
2const { getFirestore, Timestamp } = require('firebase-admin/firestore');
3
4exports.buildTransitionMatrix = onCall(async (request) => {
5  const db = getFirestore();
6  const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
7
8  const snapshot = await db
9    .collection('navigationEvents')
10    .where('timestamp', '>=', Timestamp.fromDate(thirtyDaysAgo))
11    .where('previousScreen', '!=', '')
12    .get();
13
14  const matrix = {};
15  const screenCounts = {};
16
17  snapshot.forEach((doc) => {
18    const { previousScreen, screenName } = doc.data();
19    const key = `${previousScreen}___${screenName}`;
20    matrix[key] = (matrix[key] || 0) + 1;
21    screenCounts[screenName] = (screenCounts[screenName] || 0) + 1;
22  });
23
24  // Convert to sorted array of transitions
25  const transitions = Object.entries(matrix)
26    .map(([key, count]) => {
27      const [from, to] = key.split('___');
28      return { from, to, count };
29    })
30    .sort((a, b) => b.count - a.count)
31    .slice(0, 50); // Top 50 transitions
32
33  await db.collection('analyticsCache').doc('transitionMatrix').set({
34    transitions,
35    screenCounts,
36    computedAt: new Date(),
37    periodDays: 30,
38  });
39
40  return { transitionCount: transitions.length };
41});

A drop-off screen is one that users navigate to but rarely navigate away from — they abandon the app. Extend the Cloud Function to compute, for each screen: `entryCount` (how many times it appeared as `screenName`) and `exitCount` (how many times it appeared as `previousScreen`). The drop-off rate is `1 - (exitCount / entryCount)`. A rate above 60% on a non-terminal screen (like a checkout page that should lead to success) indicates a problem. Store these per-screen metrics in the `analyticsCache/dropoffAnalysis` document. In FlutterFlow, display screens sorted by drop-off rate descending on your admin dashboard so the worst drop-off points are at the top.

In FlutterFlow, create a Component named `NavigationFlowChart`. It reads the `analyticsCache/transitionMatrix` document and displays the top 10 transitions as a vertical list of cards. Each card shows: an arrow from `from` screen name to `to` screen name, the count as a number, and a horizontal progress bar showing the count as a proportion of the maximum count. Sort by count descending. Add a Text widget at the top showing the data freshness (`computedAt` formatted as 'Updated X minutes ago'). Add a Refresh button that calls the `buildTransitionMatrix` Cloud Function. This is simpler to build in FlutterFlow than a true Sankey diagram but provides the same insight into the most common navigation paths.