How to Set Up a Custom Ad Serving Platform in FlutterFlow

Create an ad_campaigns collection with fields: advertiserId (String), title (String), imageUrl (String, the ad creative), targetUrl (String, where clicks go), placement (String: banner or interstitial), impressionCount (int, default 0), clickCount (int, default 0), budget (double, total spend limit), costPerClick (double), currentSpend (double, default 0), isActive (Boolean), targeting (Map with optional fields: categories array, regions array). Create an ad_impressions subcollection under each campaign: userId (String), timestamp (Timestamp), type (String: impression or click).

Create a CampaignManagement page. Display a ListView of the advertiser's campaigns showing: title, ad preview image, placement type badge, impressionCount, clickCount, click-through rate (clicks divided by impressions as percentage), currentSpend versus budget progress bar, and an active/paused Switch toggle. Add a Create Campaign form with: title TextField, image upload FlutterFlowUploadButton, target URL TextField, placement DropDown (banner or interstitial), budget TextField (number), costPerClick TextField (number), and targeting category ChoiceChips. On create, save to Firestore with isActive true.

Build a BannerAd Component that can be placed on any page. The Component runs a Backend Query on ad_campaigns where placement equals banner, isActive equals true, and optionally matches the page's category if targeting is set. Pick a random campaign from results using a Custom Function that generates a random index. Display the campaign's imageUrl in a Container with a GestureDetector. On display, create an ad_impression document with type 'impression' and increment impressionCount on the campaign. On tap, create an impression with type 'click', increment clickCount, increment currentSpend by costPerClick, and launch the targetUrl.

Without capping, the same user sees the same ad repeatedly, inflating impression counts. Add an App State variable adImpressionCounts (JSON Map, default empty) that tracks campaignId to impression count for the current session. Before displaying an ad, check if adImpressionCounts[campaignId] exceeds 3. If it does, skip that campaign and select the next one from the query results. Increment the counter after each display. For cross-session capping, store daily impression counts in a Firestore document under the user: users/{uid}/ad_caps/{campaignId} with count and date fields.

Create a Cloud Function that triggers on every new ad_impression document where type equals 'click'. The function reads the campaign's currentSpend and budget fields. If currentSpend plus costPerClick exceeds budget, set isActive to false on the campaign document, pausing it automatically. Send a notification to the advertiser that their campaign has reached its budget limit. This prevents overspend and ensures ads stop serving once the budget is exhausted.

1// Cloud Function: enforceBudget
2import * as functions from 'firebase-functions';
3import * as admin from 'firebase-admin';
4admin.initializeApp();
5
6export const enforceBudget = functions.firestore
7  .document('ad_campaigns/{campaignId}/ad_impressions/{impressionId}')
8  .onCreate(async (snap, context) => {
9    const data = snap.data();
10    if (data.type !== 'click') return;
11
12    const campaignRef = admin.firestore()
13      .doc(`ad_campaigns/${context.params.campaignId}`);
14    const campaign = (await campaignRef.get()).data();
15    if (!campaign) return;
16
17    const newSpend = (campaign.currentSpend || 0) + campaign.costPerClick;
18    const updates: any = { currentSpend: newSpend };
19
20    if (newSpend >= campaign.budget) {
21      updates.isActive = false;
22    }
23    await campaignRef.update(updates);
24  });

Create an AdAnalytics page showing aggregate metrics across all campaigns. Display total impressions, total clicks, overall CTR (click-through rate), and total revenue (sum of currentSpend across campaigns). Add a ListView of all campaigns sorted by CTR descending showing the top performers. For each campaign show: title, impressions, clicks, CTR percentage, spend vs budget bar. Optionally add a time filter (Today, This Week, This Month) that queries ad_impressions by timestamp range and recalculates metrics.