Facebook Ads

Go to business.facebook.com, open your Business Manager, and navigate to Business Settings → Users → System Users. Click Add and create a new system user — give it a descriptive name like 'FlutterFlow Dashboard'. Set the role to Employee (not Admin) unless you need write access. After creating the system user, click Add Assets, select Ad Accounts, choose your ad account, and grant at least Analyze permissions (read-only). Now click Generate New Token next to the system user. In the token dialog, select your app (or create a new Meta developer app at developers.facebook.com/apps) and check the ads_read permission scope at minimum. Generate the token. This token is non-expiring — it does not rotate after 60 days like a standard user OAuth token — which means your Firebase proxy will keep working indefinitely without any refresh logic. Copy the token immediately; you will store it only in your backend environment variables, never anywhere a client app can access. Copy your ad account ID as well (found in Business Settings → Ad Accounts, formatted as act_XXXXXXXXXX). You will pass the ad account ID as a variable from FlutterFlow; the token stays server-side.

In your Firebase project, create an HTTP Cloud Function that accepts ad account ID and date range parameters from FlutterFlow, appends the System User access token from environment variables, and queries the Meta Graph API Insights endpoint. The Meta Insights endpoint URL format is https://graph.facebook.com/v19.0/{ad_account_id}/insights. Your proxy must include CORS headers because FlutterFlow web builds run in a browser. The function requests only the fields your dashboard needs — requesting more fields wastes quota from the 200-calls-per-hour ceiling. Use time_increment=1 in the query parameters to get one data row per day, which is the right granularity for trend charts. After writing the function, deploy it from your local machine using the Firebase CLI. Copy the HTTPS trigger URL from the Firebase Console after deployment — this is what you will paste into FlutterFlow as the API Group Base URL. Store the access token using Firebase Secret Manager or the functions config system so it appears nowhere in your code. Alternatively, use a Supabase Edge Function with identical fetch logic — the Deno runtime and CORS headers work the same way, only the deployment method differs.

1// functions/index.js (Firebase Cloud Functions — Node.js)
2const functions = require('firebase-functions');
3const fetch = require('node-fetch');
4
5exports.facebookInsights = functions.https.onRequest(async (req, res) => {
6  res.set('Access-Control-Allow-Origin', '*');
7  res.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
8  res.set('Access-Control-Allow-Headers', 'Content-Type');
9  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
10
11  const ACCESS_TOKEN = process.env.META_SYSTEM_USER_TOKEN;
12  const { ad_account_id, start_date, end_date, level } = req.body;
13
14  if (!ad_account_id || !start_date || !end_date) {
15    res.status(400).json({ error: 'Missing required fields' });
16    return;
17  }
18
19  const params = new URLSearchParams({
20    level: level || 'campaign',
21    fields: 'campaign_name,spend,impressions,clicks,ctr,cpm,reach',
22    time_range: JSON.stringify({ since: start_date, until: end_date }),
23    time_increment: '1',
24    limit: '100',
25    access_token: ACCESS_TOKEN
26  });
27
28  const metaRes = await fetch(
29    `https://graph.facebook.com/v19.0/${ad_account_id}/insights?${params}`
30  );
31  const data = await metaRes.json();
32  res.json(data);
33});
34

In FlutterFlow, open the left navigation panel and click API Calls. Click + Add and choose Create API Group. Name it MetaInsights and paste your Firebase Cloud Function HTTPS trigger URL as the Base URL. Do not add any Authorization headers to the API Group — the System User token lives on the server and never appears in FlutterFlow's configuration. Click + Add inside the group to create an individual API Call. Name it getCampaignInsights, set the method to POST, and leave the endpoint path blank since the Base URL is the full endpoint. Switch to the Body tab and select JSON. Add four body variables: ad_account_id (String), start_date (String), end_date (String), and level (String — default value 'campaign'). Your JSON body template: { "ad_account_id": "{{ad_account_id}}", "start_date": "{{start_date}}", "end_date": "{{end_date}}", "level": "{{level}}" }. Go to the Response & Test tab and fill in a real ad account ID (in act_XXXXXXXXXX format), real date values, and click Test. The response should include a data array with objects containing campaign_name, spend, impressions, clicks, and date_start. Click Generate from Response to auto-create JSON Path expressions. Review the generated paths and confirm they point to the correct fields inside the data array.

1{
2  "ad_account_id": "{{ad_account_id}}",
3  "start_date": "{{start_date}}",
4  "end_date": "{{end_date}}",
5  "level": "{{level}}"
6}

Create a new custom Data Type in FlutterFlow called CampaignInsight with these fields: campaignName (String), spend (Double), impressions (Integer), clicks (Integer), ctr (Double), cpm (Double), reach (Integer), dateStart (String). Return to your getCampaignInsights API Call and use the JSON Path section to map each path to the corresponding Data Type field: $.data[*].campaign_name to campaignName, $.data[*].spend to spend, $.data[*].impressions to impressions, $.data[*].date_start to dateStart, and so on. Note that Meta returns spend and ctr as strings in the Insights response — cast them to Double in FlutterFlow's type selector. Build a new dashboard screen. Add a Row at the top with a DateRangePicker widget or two date text fields so users can select the reporting period, storing the selected dates in AppState variables. Below that, add a ListView with its source set to Backend Query → getCampaignInsights, passing the ad_account_id from the authenticated user's data, and the date values from AppState. Inside each ListView item, add a Card with Text widgets bound to campaignName (bold, large) and a subtitle showing 'Spend: $' + spend formatted to two decimal places. Add a bar Chart widget above the list binding the spend series to the selected date range for a visual trend. For the ad account ID, store it in the user's Supabase or Firestore profile record and read it from the logged-in user's data so each user sees their own account.

The Meta Insights API enforces a hard limit of 200 calls per hour per ad account, shared across all users and sessions of your app. If ten users open the dashboard simultaneously without caching, that is ten API calls for the same data — and 20 requests per hour easily consumes 10% of your hourly quota. When the limit is reached, Meta returns error code 17 or 32: 'User request limit reached'. The solution is to cache the Insights response in Firestore inside your Cloud Function and serve cached data to concurrent sessions. Check the cache document before calling Meta; if it is under 30 minutes old, return it immediately. If stale, fetch fresh data, update Firestore, and return the new response. Document the cached_at timestamp in the response so the FlutterFlow app can display a 'Data as of {time}' indicator. Add a force_refresh Boolean body variable to the API Call so a pull-to-refresh gesture can bypass the cache when the user explicitly needs current numbers. Update your Cloud Function to implement the caching check as shown in the code block. If you want help setting up the caching layer or handling multiple ad accounts, RapidDev's team builds FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.

1// Caching layer to add inside facebookInsights function
2const admin = require('firebase-admin');
3if (!admin.apps.length) admin.initializeApp();
4const db = admin.firestore();
5
6const { ad_account_id, start_date, end_date, force_refresh } = req.body;
7const cacheKey = `${ad_account_id}_${start_date}_${end_date}`;
8const cacheRef = db.collection('meta_insights_cache').doc(cacheKey);
9const cached = await cacheRef.get();
10
11if (cached.exists && !force_refresh) {
12  const { payload, cached_at } = cached.data();
13  const ageMs = Date.now() - cached_at;
14  if (ageMs < 30 * 60 * 1000) { // 30 minutes
15    res.json({ ...payload, from_cache: true, cached_at });
16    return;
17  }
18}
19
20// ... Meta API fetch ...
21// After receiving response:
22await cacheRef.set({ payload: metaData, cached_at: Date.now() });
23res.json({ ...metaData, from_cache: false });
24