How to Integrate Lovable with Facebook Ads

System users in Meta Business Manager are server-side identities that hold access tokens for automated processes. Unlike regular user tokens that expire frequently, system user tokens can be generated with 60-day or non-expiring lifetimes — essential for a stable reporting dashboard. In Meta Business Manager (business.facebook.com): go to Business Settings → Users → System Users. Click 'Add'. Give the system user a name like 'Lovable Dashboard' and set the role to 'Employee' (not Admin — follow least privilege). Click 'Create system user'. After creation, click 'Add Assets' to grant the system user access to your ad account. Select 'Ad accounts' → find your ad account → check 'Manage campaigns' (or 'View performance' if read-only access is sufficient for a dashboard). Click Save Changes. Next, generate an access token: select the system user → click 'Generate new token'. Choose your Meta App from the dropdown (the same app where Marketing API is enabled). Select the following permissions: ads_read (to read campaign and ad performance), ads_management (if you also want to manage campaigns, not just read), business_management (to access business-level data). Set the token expiry — for a dashboard, choose 'Never' if your Meta App has been approved for non-expiring tokens, or 60 days otherwise. Copy the generated token immediately — it will not be shown again. This is your META_ACCESS_TOKEN secret value. Also note your Ad Account ID: in Meta Ads Manager, click the account selector dropdown — the ID starts with 'act_' (e.g., act_123456789). Store this as META_AD_ACCOUNT_ID.

Store your Meta credentials in Lovable's Cloud Secrets panel. The system user access token grants access to your ad account data — keep it server-side in Edge Functions, never in frontend code. In Lovable, click '+' → Cloud panel → Secrets tab. Add the following secrets: META_ACCESS_TOKEN: your system user access token (a long alphanumeric string starting with 'EAAN' or similar Meta token prefix) META_AD_ACCOUNT_ID: your ad account ID including the 'act_' prefix (e.g., act_123456789) Optionally add META_APP_ID and META_APP_SECRET if your Edge Functions will need to generate user tokens or perform app-level API calls beyond account insights. With these secrets saved, your Edge Functions can authenticate to the Meta Marketing API using the access_token query parameter.

Create the Edge Function that fetches campaign performance data from Meta's Marketing API. Meta's API uses a Graph API structure — endpoints are at graph.facebook.com/v18.0/{objectId}/{edge}. For campaign insights, you call /{adAccountId}/campaigns to get campaign IDs, then /{campaignId}/insights with the fields and date range you want. Meta Marketing API uses access_token as a query parameter (or Authorization: Bearer header — both work, but query parameter is more common in Meta's documentation). The insights endpoint supports powerful filtering with time_range parameter, date_preset values (today, yesterday, last_7_days, last_30_days, last_month, this_month), and breakdowns for demographic and placement segmentation. Key insight fields for a performance dashboard: campaign_name, spend, impressions, clicks, reach, frequency, cpm, cpc, ctr, actions (conversions), cost_per_action_type (CPA). For conversion data, actions is an array of action types — filter for the specific conversion event relevant to your business (purchase, lead, page_view, etc.). The code below shows a complete campaign insights fetch with date range support. Meta's API returns paginated results using cursor-based pagination — the next_cursor in the paging.cursors object lets you fetch subsequent pages.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2
3const corsHeaders = {
4  'Access-Control-Allow-Origin': '*',
5  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
6}
7
8const GRAPH_API_BASE = 'https://graph.facebook.com/v18.0'
9
10serve(async (req) => {
11  if (req.method === 'OPTIONS') {
12    return new Response('ok', { headers: corsHeaders })
13  }
14
15  try {
16    const { datePreset = 'last_30_days', startDate, endDate } = await req.json().catch(() => ({}))
17
18    const accessToken = Deno.env.get('META_ACCESS_TOKEN')
19    const adAccountId = Deno.env.get('META_AD_ACCOUNT_ID')
20
21    if (!accessToken || !adAccountId) {
22      throw new Error('Missing Meta secrets: META_ACCESS_TOKEN and META_AD_ACCOUNT_ID required')
23    }
24
25    // Build time range parameter
26    const timeRange = startDate && endDate
27      ? `&time_range={"since":"${startDate}","until":"${endDate}"}`
28      : `&date_preset=${datePreset}`
29
30    // Fetch campaign insights
31    const fields = [
32      'campaign_name',
33      'campaign_id',
34      'spend',
35      'impressions',
36      'clicks',
37      'reach',
38      'ctr',
39      'cpc',
40      'cpm',
41      'frequency',
42      'actions',
43      'cost_per_action_type',
44    ].join(',')
45
46    const insightsUrl = `${GRAPH_API_BASE}/${adAccountId}/insights` +
47      `?fields=${encodeURIComponent(fields)}` +
48      `&level=campaign` +
49      timeRange +
50      `&access_token=${accessToken}` +
51      `&limit=50`
52
53    const response = await fetch(insightsUrl)
54    const data = await response.json()
55
56    if (!response.ok || data.error) {
57      throw new Error(`Meta API error: ${data.error?.message || JSON.stringify(data)}`)
58    }
59
60    // Normalize the response
61    const campaigns = (data.data || []).map((item: Record<string, unknown>) => {
62      const actions = (item.actions as Array<{ action_type: string; value: string }>) || []
63      const purchases = actions.find((a) => a.action_type === 'purchase')
64      const leads = actions.find((a) => a.action_type === 'lead')
65
66      return {
67        campaignId: item.campaign_id,
68        campaignName: item.campaign_name,
69        spend: parseFloat(item.spend as string || '0'),
70        impressions: parseInt(item.impressions as string || '0', 10),
71        clicks: parseInt(item.clicks as string || '0', 10),
72        reach: parseInt(item.reach as string || '0', 10),
73        ctr: parseFloat(item.ctr as string || '0'),
74        cpc: parseFloat(item.cpc as string || '0'),
75        cpm: parseFloat(item.cpm as string || '0'),
76        frequency: parseFloat(item.frequency as string || '0'),
77        purchases: purchases ? parseInt(purchases.value, 10) : 0,
78        leads: leads ? parseInt(leads.value, 10) : 0,
79      }
80    }).sort((a: { spend: number }, b: { spend: number }) => b.spend - a.spend)
81
82    return new Response(
83      JSON.stringify({ campaigns, total: campaigns.length }),
84      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
85    )
86  } catch (error) {
87    return new Response(
88      JSON.stringify({ error: error.message }),
89      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
90    )
91  }
92})

With the Edge Function deployed, build the dashboard UI that visualizes your Meta ad performance. Use supabase.functions.invoke() to call the meta-campaigns Edge Function with date range parameters, then render the data as charts and tables. For the dashboard layout: a header row with total spend, total impressions, average CTR, and total conversions as summary cards; a date range picker that triggers a fresh data fetch; a sortable data table with one row per campaign; and optionally a bar chart or line chart for spend trends over time. For charting, Lovable's AI can generate Recharts or Chart.js based visualizations from a description of the data shape. A BarChart with campaign names on the X axis and spend on the Y axis is the most common starting point. For daily spend trend data (to see how spend progresses through the month), you need a second Edge Function that calls the same insights endpoint but with the time_increment=1 (daily) parameter instead of a summary. Each day becomes one data point in the time series. For complex multi-account dashboard setups spanning multiple brands or client accounts, RapidDev's team can help architect an Edge Function design that handles account switching, caching, and proper data normalization across different Meta account structures.