How to Integrate FlutterFlow with Facebook Ads

In FlutterFlow, open Custom Code → Pubspec Dependencies and add facebook_app_events: ^4.3.1. Then go to Settings → App Details → scroll to iOS and Android configuration sections. Enter your Facebook App ID in the Facebook App ID field — FlutterFlow injects this into AndroidManifest.xml and Info.plist automatically. On iOS, also add your Facebook Client Token (found in Facebook App Dashboard → Settings → Advanced). Save and click Compile Code to verify the package compiles without errors. The App ID links your app events to the correct Facebook pixel for attribution.

Go to Custom Code → Custom Actions and create a new action named logFacebookEvent. Add a String parameter named eventName and a Map<String, dynamic> parameter named parameters. In the Dart body: import 'package:facebook_app_events/facebook_app_events.dart'; then write final fbEvents = FacebookAppEvents(); await fbEvents.logEvent(name: eventName, parameters: parameters);. Create specific wrapper actions for your key events: logPurchase (logs FacebookAppEvents.EVENT_NAME_PURCHASED with value_to_sum and currency parameters), logAddToCart (EVENT_NAME_ADDED_TO_CART with content_id and currency), and logCompleteRegistration (EVENT_NAME_COMPLETED_REGISTRATION). In your Action Flows, call these Custom Actions after the corresponding user actions — place logPurchase in the flow that runs after a successful payment confirmation.

1// Custom Action: logPurchase
2import 'package:facebook_app_events/facebook_app_events.dart';
3
4Future logPurchase(
5  double purchaseAmount,
6  String currency,
7  String contentId,
8) async {
9  final fbEvents = FacebookAppEvents();
10  await fbEvents.logPurchase(
11    amount: purchaseAmount,
12    currency: currency,
13    parameters: {
14      FacebookAppEvents.PARAM_CONTENT_ID: contentId,
15    },
16  );
17}
18
19// Custom Action: logAddToCart
20Future logAddToCart(
21  String contentId,
22  String contentType,
23  double price,
24  String currency,
25) async {
26  final fbEvents = FacebookAppEvents();
27  await fbEvents.logEvent(
28    name: FacebookAppEvents.EVENT_NAME_ADDED_TO_CART,
29    parameters: {
30      FacebookAppEvents.PARAM_CONTENT_ID: contentId,
31      FacebookAppEvents.PARAM_CONTENT_TYPE: contentType,
32      FacebookAppEvents.PARAM_CURRENCY: currency,
33      FacebookAppEvents.PARAM_VALUE_TO_SUM: price,
34    },
35  );
36}

In Firebase Console, create a Cloud Function named fetchAdMetrics using Node.js 20. The function calls the Meta Marketing API endpoint GET https://graph.facebook.com/v19.0/act_{adAccountId}/insights with query parameters: fields=campaign_name,spend,impressions,clicks,cpc,cpm,actions&date_preset=last_7d&level=campaign and access_token from an environment variable (never hardcode). Parse the JSON response and for each campaign in the data array, write a document to the Firestore ad_metrics collection with fields: campaignName, spend (parseFloat), impressions (parseInt), clicks (parseInt), cpc (parseFloat), cpm (parseFloat), conversions (extract from actions array where action_type is purchase or complete_registration), and lastUpdated (server timestamp). Schedule this function to run every 30 minutes using Cloud Scheduler. Store your ad account ID and access token in Cloud Function environment variables.

1// Cloud Function: fetchAdMetrics (Node.js 20)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const axios = require('axios');
5
6exports.fetchAdMetrics = functions.pubsub
7  .schedule('every 30 minutes')
8  .onRun(async (context) => {
9    const adAccountId = process.env.FB_AD_ACCOUNT_ID;
10    const accessToken = process.env.FB_ACCESS_TOKEN;
11
12    const url = `https://graph.facebook.com/v19.0/act_${adAccountId}/insights`;
13    const params = {
14      fields: 'campaign_name,spend,impressions,clicks,cpc,cpm,actions',
15      date_preset: 'last_7d',
16      level: 'campaign',
17      access_token: accessToken,
18    };
19
20    const response = await axios.get(url, { params });
21    const campaigns = response.data.data;
22    const db = admin.firestore();
23    const batch = db.batch();
24
25    for (const campaign of campaigns) {
26      const conversions = (campaign.actions || [])
27        .filter(a => ['purchase', 'complete_registration'].includes(a.action_type))
28        .reduce((sum, a) => sum + parseInt(a.value), 0);
29
30      const ref = db.collection('ad_metrics').doc(campaign.campaign_id);
31      batch.set(ref, {
32        campaignName: campaign.campaign_name,
33        spend: parseFloat(campaign.spend || 0),
34        impressions: parseInt(campaign.impressions || 0),
35        clicks: parseInt(campaign.clicks || 0),
36        cpc: parseFloat(campaign.cpc || 0),
37        cpm: parseFloat(campaign.cpm || 0),
38        conversions,
39        cpa: conversions > 0 ? parseFloat(campaign.spend) / conversions : 0,
40        lastUpdated: admin.firestore.FieldValue.serverTimestamp(),
41      }, { merge: true });
42    }
43
44    await batch.commit();
45    return null;
46  });

Create a new page named AdDashboard. Add a ChoiceChips widget at the top bound to a Page State variable named selectedDateRange (options: Last 7 Days, Last 14 Days, Last 30 Days). Add a Backend Query on the page: collection ad_metrics, no filter (show all campaigns), order by spend descending. Below the ChoiceChips, add a Row of four Container KPI cards: Total Spend (sum across all results using a Custom Function), Total Impressions, Total Clicks, and Average CPA. Use Conditional Value on each Container to display 'Loading...' while the Backend Query is loading. Below the KPI row, add a ListView bound to the Backend Query result. Each list item is a Component with: campaign name Text (bold), Row with spend/impressions/clicks/conversions Texts, and a small Container showing CPA in green (if CPA < target) or red. When selectedDateRange changes, call a Custom Action that re-triggers the Cloud Function with the new date_preset parameter.

To make the date range filter functional, create a Custom Action named refreshAdMetrics that accepts a String parameter datePreset. The action calls your Cloud Function via an HTTP POST using FlutterFlow's API Call feature or FFAppState-triggered re-query. In FlutterFlow's API Manager, add an API Group named AdMetricsAPI with base URL pointing to your Cloud Function HTTPS trigger URL. Add a GET endpoint refreshMetrics with query parameter date_preset. In the ChoiceChips On Value Selected Action Flow: first update the Page State selectedDateRange variable, then call the refreshMetrics API endpoint passing the selected date preset (map 'Last 7 Days' to 'last_7d', 'Last 14 Days' to 'last_14d', 'Last 30 Days' to 'last_30d'). After the API call completes, trigger a page refresh to reload the Backend Query with the updated Firestore data.

Open Facebook Events Manager → your Pixel → Test Events tab. Enter your app's test URL or use a physical device with the FlutterFlow debug build. In your FlutterFlow app, trigger the actions that call your Custom pixel event actions (add an item to cart, complete a registration, make a test purchase). Within 1-2 minutes, the Test Events panel should show the received events with parameter details. Verify the event names match exactly: Purchase, AddToCart, CompleteRegistration (Facebook is case-sensitive). Also check that the currency and value parameters appear correctly. Once confirmed, switch from test events to the live Events panel — events from real users will appear with a short delay.