How to Integrate TikTok Ads with V0

Before writing any code, you need a TikTok Marketing API developer app. Go to ads.tiktok.com and log in with your TikTok For Business account. Navigate to Tools → API and click 'Create App'. If you don't see the API option, you need to apply for developer access first at ads.tiktok.com/marketing_api — this approval process typically takes 1-3 business days. Once you have developer access and create an app, TikTok will assign you an App ID and App Secret. For internal use (managing your own ad account), navigate to the app details and generate a Long-Term Access Token by clicking 'Get Access Token'. This token grants access to your advertiser account data. You also need your Advertiser ID — find this in TikTok Ads Manager by clicking the account name in the top left corner. The Advertiser ID is the numerical ID shown below your account name. Keep these four values ready: App ID, App Secret, Access Token, and Advertiser ID. The Access Token expires after 30 days and must be refreshed — for production, implement the OAuth refresh flow, but for testing and internal tools, manual refresh works fine.

Open V0 at v0.dev and describe your TikTok Ads analytics dashboard. V0 can generate sophisticated analytics UIs with metric cards, data tables with sorting, and chart components powered by recharts or Chart.js. Specify the data shape you expect — campaign name, status, spend, impressions, clicks, CTR, and conversion count. V0 will generate a complete Next.js page with placeholder data and the skeleton of an API route. Since TikTok uses dark branding (black and pink/red), you can ask V0 to style the dashboard with a dark theme and TikTok-inspired colors. The generated component should fetch from /api/tiktok-ads/campaigns on mount using useEffect or SWR. Ask V0 to include a date range picker so users can filter performance data by time period — this is essential for any ads analytics tool. V0 will scaffold the API route stub at app/api/tiktok-ads/route.ts which you will fill in the next step.

Create the Next.js API route that fetches TikTok campaign data. The TikTok Marketing API base URL is https://business-api.tiktok.com/open_api/v1.3/. Every request requires the Access-Token header and the advertiser_id query parameter. The campaigns report endpoint is /report/integrated/get/ which returns both campaign details and metrics in a single call. This endpoint uses a POST request with a JSON body specifying the advertiser ID, report type, dimensions (like campaign_id and campaign_name), metrics (like spend, impressions, clicks, cpc, ctr, conversion), and the date range in YYYYMMDD format. The response wraps data in data.list with pagination metadata. For the initial implementation, fetch up to 1000 records (the maximum page size) to avoid pagination complexity. In production, implement cursor-based pagination using the page and page_size parameters. Parse the TikTok response to extract just the fields your frontend needs, transforming the nested metrics object into a flat campaign summary object. This reduces the payload size and simplifies the frontend data handling.

1import { NextResponse } from 'next/server';
2
3const TIKTOK_API = 'https://business-api.tiktok.com/open_api/v1.3';
4
5export async function GET(request: Request) {
6  const { searchParams } = new URL(request.url);
7  const startDate = searchParams.get('startDate') ?? '20260301';
8  const endDate = searchParams.get('endDate') ?? '20260331';
9
10  try {
11    const response = await fetch(`${TIKTOK_API}/report/integrated/get/`, {
12      method: 'POST',
13      headers: {
14        'Access-Token': process.env.TIKTOK_ACCESS_TOKEN!,
15        'Content-Type': 'application/json',
16      },
17      body: JSON.stringify({
18        advertiser_id: process.env.TIKTOK_ADVERTISER_ID!,
19        report_type: 'BASIC',
20        data_level: 'AUCTION_CAMPAIGN',
21        dimensions: ['campaign_id', 'stat_time_day'],
22        metrics: [
23          'campaign_name', 'spend', 'impressions', 'clicks',
24          'ctr', 'cpc', 'reach', 'conversion', 'cost_per_conversion'
25        ],
26        start_date: startDate,
27        end_date: endDate,
28        page_size: 200,
29        page: 1,
30      }),
31    });
32
33    const data = await response.json();
34
35    if (data.code !== 0) {
36      return NextResponse.json(
37        { error: data.message ?? 'TikTok API error' },
38        { status: 400 }
39      );
40    }
41
42    const campaigns = (data.data?.list ?? []).map((item: Record<string, unknown>) => {
43      const metrics = item.metrics as Record<string, unknown>;
44      const dims = item.dimensions as Record<string, unknown>;
45      return {
46        campaignId: dims?.campaign_id,
47        date: dims?.stat_time_day,
48        campaignName: metrics?.campaign_name,
49        spend: parseFloat((metrics?.spend as string) ?? '0'),
50        impressions: parseInt((metrics?.impressions as string) ?? '0', 10),
51        clicks: parseInt((metrics?.clicks as string) ?? '0', 10),
52        ctr: parseFloat((metrics?.ctr as string) ?? '0'),
53        cpc: parseFloat((metrics?.cpc as string) ?? '0'),
54        conversions: parseInt((metrics?.conversion as string) ?? '0', 10),
55      };
56    });
57
58    return NextResponse.json({ campaigns, total: data.data?.page_info?.total_number ?? 0 });
59  } catch (error) {
60    console.error('TikTok Ads API error:', error);
61    return NextResponse.json({ error: 'Failed to fetch campaign data' }, { status: 500 });
62  }
63}

Navigate to your Vercel project at vercel.com, select your project, and go to Settings → Environment Variables. Add the following variables for Production and Preview environments. TIKTOK_ACCESS_TOKEN is the Long-Term Access Token you generated from your TikTok Marketing API app — it is a long alphanumeric string starting with the characters your app generated. TIKTOK_ADVERTISER_ID is the numerical Advertiser ID from your TikTok Ads Manager account. Neither variable should have the NEXT_PUBLIC_ prefix since they are server-only. TIKTOK_APP_ID and TIKTOK_APP_SECRET should also be added as environment variables even if not used in the current route, as they will be needed for the OAuth refresh flow when your Access Token expires after 30 days. After adding all variables, go to the Deployments tab and click Redeploy on the latest deployment to apply the new configuration. For Preview deployments, consider using a separate TikTok Ads test account or sandbox environment if available, to avoid mixing test requests with production campaign data.

1# .env.local (local development only — set in Vercel Dashboard for deployments)
2TIKTOK_ACCESS_TOKEN=your_tiktok_access_token
3TIKTOK_ADVERTISER_ID=1234567890123
4TIKTOK_APP_ID=your_app_id
5TIKTOK_APP_SECRET=your_app_secret

With the API route deployed and credentials configured, update your V0-generated dashboard to fetch real TikTok campaign data. The component should convert the date range picker's values to YYYYMMDD format before calling the API route, since TikTok requires this specific date format. When the date range changes, refetch the data. Add aggregation logic to calculate summary metrics from the campaigns array — sum spend, impressions, clicks, and compute overall CTR for the metric cards. For the campaigns table, group data by campaignId if you are fetching daily granularity data, summing up daily values to show campaign-level totals. Test the integration using your real TikTok Ads account data. If you see a 40100 error code, your Access Token is invalid or expired. A 40002 error means the Advertiser ID is incorrect. TikTok returns error codes as numbers in the code field of the response — check the TikTok Marketing API error code documentation for the full list. For agencies building multi-client reporting tools with complex access patterns, RapidDev can help implement the full OAuth 2.0 refresh flow and multi-advertiser account management.

1// Date format helper for TikTok API
2function toTikTokDate(date: Date): string {
3  return date.toISOString().slice(0, 10).replace(/-/g, '');
4}
5
6// Example usage in fetch call:
7const start = toTikTokDate(startDate); // '20260301'
8const end = toTikTokDate(endDate);     // '20260331'
9const res = await fetch(`/api/tiktok-ads/campaigns?startDate=${start}&endDate=${end}`);