How to Integrate Lovable with TikTok Ads

TikTok Marketing API access requires a Business Center account and approval from TikTok's developer program. Start by navigating to business.tiktok.com and signing in with your TikTok account. If you do not have a Business Center, create one by clicking 'Create a Business Center'. Next, go to developers.tiktok.com and click 'Apply for API access'. Select 'Marketing API' from the product list. Fill in your application details including your business use case, estimated API call volume, and the advertiser accounts you want to access. TikTok reviews these applications — approval typically takes 3-7 business days. Once approved, you will receive an App ID (sometimes called client_key) and an App Secret from the TikTok developer portal. To generate a long-term access token for a specific advertiser account, you use the OAuth2 authorization flow or the sandbox environment for testing. Go to your TikTok app's dashboard in the developer portal and look for the 'Authorization' section. The long-term access token from the authorization flow is valid for a configurable period (up to one year) and is what you will store in Cloud → Secrets. You also need your advertiser account ID — a numeric string visible in TikTok Ads Manager's URL or in the account settings. Every Marketing API call requires this ID to scope requests to the correct advertiser account.

Open your Lovable project and click the '+' icon next to the Preview label to open the Cloud panel. Navigate to the Secrets tab and click 'Add new secret'. Add the following secrets: - Name: TIKTOK_ACCESS_TOKEN — Value: your long-term access token from the TikTok developer portal - Name: TIKTOK_APP_ID — Value: your TikTok application App ID - Name: TIKTOK_APP_SECRET — Value: your TikTok application App Secret - Name: TIKTOK_ADVERTISER_ID — Value: your numeric advertiser account ID The TIKTOK_ACCESS_TOKEN is the most sensitive credential — it authorizes all advertising operations including creating campaigns and accessing spend data. Store it with the same care you would an API key that directly controls real money. The TIKTOK_ADVERTISER_ID is included as a secret because it scopes all API calls to your specific advertiser account. While the advertiser ID is not a secret in the traditional sense, keeping it in Secrets means you can change it without modifying your Edge Function code — useful when managing multiple advertiser accounts or switching between sandbox and production. Lovable's security system actively blocks approximately 1,200 hardcoded API keys per day. However, for advertising API credentials that control ad spend, always use Cloud → Secrets regardless of platform-level protections.

Create a Supabase Edge Function that proxies requests to TikTok's Marketing API. TikTok's Marketing API base URL is https://business-api.tiktok.com/open_api/v1.3/ and all requests include the access token in the Access-Token header along with the advertiser_id as a parameter. The Edge Function routes requests based on an 'action' parameter in the POST body: 'campaigns' fetches the campaign list, 'ad_groups' fetches ad groups for a campaign, 'ads' fetches ads for an ad group, and 'report' fetches integrated reporting data. The report action is the most powerful — it supports flexible dimension and metric selection for custom analytics. Paste the prompt below into Lovable's chat to generate and deploy the function.

1// supabase/functions/tiktok-ads/index.ts
2const TIKTOK_API_BASE = 'https://business-api.tiktok.com/open_api/v1.3';
3
4Deno.serve(async (req) => {
5  if (req.method === 'OPTIONS') {
6    return new Response(null, {
7      headers: {
8        'Access-Control-Allow-Origin': '*',
9        'Access-Control-Allow-Methods': 'POST, OPTIONS',
10        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
11      },
12    });
13  }
14
15  const accessToken = Deno.env.get('TIKTOK_ACCESS_TOKEN');
16  const advertiserId = Deno.env.get('TIKTOK_ADVERTISER_ID');
17
18  if (!accessToken || !advertiserId) {
19    return new Response(JSON.stringify({ error: 'TikTok credentials not configured' }), {
20      status: 500,
21      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
22    });
23  }
24
25  const { action, params } = await req.json();
26  const headers = {
27    'Access-Token': accessToken,
28    'Content-Type': 'application/json',
29  };
30
31  let apiUrl: string;
32  let fetchOptions: RequestInit;
33
34  if (action === 'campaigns') {
35    apiUrl = `${TIKTOK_API_BASE}/campaign/get/?advertiser_id=${advertiserId}&page_size=100`;
36    fetchOptions = { method: 'GET', headers };
37  } else if (action === 'ad_groups') {
38    apiUrl = `${TIKTOK_API_BASE}/adgroup/get/?advertiser_id=${advertiserId}&campaign_id=${params.campaign_id}`;
39    fetchOptions = { method: 'GET', headers };
40  } else if (action === 'report') {
41    const reportBody = {
42      advertiser_id: advertiserId,
43      report_type: params.report_type || 'BASIC',
44      dimensions: params.dimensions || ['campaign_id', 'stat_time_day'],
45      metrics: params.metrics || ['spend', 'impressions', 'clicks', 'ctr', 'cpc'],
46      start_date: params.start_date,
47      end_date: params.end_date,
48      page_size: 100,
49    };
50    apiUrl = `${TIKTOK_API_BASE}/report/integrated/get/`;
51    fetchOptions = { method: 'POST', headers, body: JSON.stringify(reportBody) };
52  } else if (action === 'update_campaign') {
53    const updateBody = { advertiser_id: advertiserId, campaign_id: params.campaign_id, ...params.updates };
54    apiUrl = `${TIKTOK_API_BASE}/campaign/update/`;
55    fetchOptions = { method: 'POST', headers, body: JSON.stringify(updateBody) };
56  } else {
57    return new Response(JSON.stringify({ error: 'Invalid action' }), {
58      status: 400,
59      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
60    });
61  }
62
63  const response = await fetch(apiUrl, fetchOptions);
64  const data = await response.json();
65
66  return new Response(JSON.stringify(data), {
67    status: response.ok ? 200 : response.status,
68    headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
69  });
70});

Use Lovable's chat to build the campaign management and analytics dashboard. The dashboard needs to handle TikTok's three-level hierarchy (campaigns, ad groups, ads) and should surface the metrics most relevant to TikTok's video-first format: video views, video completion rates (at 25%, 50%, 75%, 100%), CTR, and cost-per-result. Start with the campaigns overview. Prompt Lovable to create a table that shows all campaigns with their status, objective, daily budget, spend-to-date, impressions, and CTR. Add a date range picker so users can view performance over different time windows. Include a status toggle for pausing and resuming campaigns. For the reporting view, TikTok's integrated report endpoint is powerful but requires knowing the correct dimension and metric names. Common dimensions are: campaign_id, adgroup_id, ad_id, stat_time_day. Common metrics are: spend, impressions, clicks, ctr, cpc, video_play_actions, video_watched_2s, video_watched_6s, video_views_p25, video_views_p50, video_views_p75, video_views_p100, conversion, cost_per_conversion. For Spark Ads specifically, add a filter in your dashboard for campaign_type = TOPVIEW or BRAND_TAKEOVER to distinguish Spark Ad campaigns from regular In-Feed campaigns. Spark Ads have additional metrics around organic post reach versus paid reach that are useful to surface.