How to Integrate Google Ads with V0

Open V0 at v0.dev and describe the advertising performance dashboard you want to build. Google Ads dashboards typically combine metric summary cards at the top (total spend, clicks, conversions, ROAS) with charts for trend visualization and a detailed data table for campaign or keyword breakdowns. Recharts (included in V0's default stack via shadcn/ui) handles the line charts and bar charts well. When prompting V0, be specific about the data shape your components expect. Specify that campaign data comes from /api/google-ads/campaigns and includes name, status, budget_micros (Google Ads represents all monetary values in micros — millionths of the currency unit — so divide by 1,000,000 for display), impressions, clicks, cost_micros, and conversions. Plan for the data transformation in your API routes so the frontend receives dollar values rather than micros. For date range selection, ask V0 to generate a date range picker that passes a range parameter to the API (like ?range=LAST_7_DAYS or ?range=LAST_30_DAYS). Google Ads API supports several predefined date ranges in GAQL via the DURING keyword, which is simpler than constructing custom date filters. After generating and reviewing in V0's preview, push to GitHub via V0's Git panel.

Before writing any API route code, you need three credentials: a developer token, OAuth2 credentials, and a refresh token. This setup takes more effort than most API integrations but is a one-time process. First, the developer token: apply at developers.google.com/google-ads/api/docs/get-started/dev-token. During development, you'll receive a test developer token that can only access test accounts, not live account data. Apply for basic access to use real account data — approval typically takes 1-3 business days. Second, Google Cloud OAuth2: create a project at console.cloud.google.com, enable the Google Ads API under APIs & Services → Enable APIs, create OAuth2 credentials under APIs & Services → Credentials → Create Credentials → OAuth client ID (type: Web application). Note the client ID and client secret. Add https://developers.google.com/oauthplayground as an authorized redirect URI. Third, the refresh token: go to developers.google.com/oauthplayground, click the settings gear, check 'Use your own OAuth credentials', enter your client ID and secret. In the scope box, enter https://www.googleapis.com/auth/adwords. Click 'Authorize APIs', complete the Google sign-in for the Google Ads account you want to access, then click 'Exchange authorization code for tokens'. Copy the refresh_token value — this is what allows your server to get new access tokens without user interaction. The developer token goes in the developer-token header on API requests. The OAuth2 credentials are used to obtain short-lived access tokens from Google's token endpoint, which are then passed as Bearer tokens in API requests.

Create the Next.js API route that fetches campaign performance data. The route needs to do two things: first, exchange your refresh token for a short-lived access token using Google's OAuth2 token endpoint; second, use that access token plus your developer token to query the Google Ads API using GAQL. The token endpoint is https://oauth2.googleapis.com/token. POST to it with grant_type=refresh_token, client_id, client_secret, and refresh_token to receive an access_token valid for one hour. Cache this access token in memory or a short-lived store rather than fetching a new one on every request. The Google Ads API endpoint for search queries is https://googleads.googleapis.com/v18/customers/{customerId}/googleAds:search (replace v18 with the current version). POST to it with a JSON body containing a query field with your GAQL string. Include three headers: Authorization: Bearer {access_token}, developer-token: {your_developer_token}, and Content-Type: application/json. The GAQL query for campaign performance looks like: SELECT campaign.id, campaign.name, campaign.status, campaign.advertising_channel_type, campaign_budget.amount_micros, metrics.impressions, metrics.clicks, metrics.cost_micros, metrics.conversions FROM campaign WHERE campaign.status IN ('ENABLED', 'PAUSED') AND segments.date DURING LAST_7_DAYS ORDER BY metrics.cost_micros DESC. Transform the response to divide cost_micros values by 1,000,000 before returning to the frontend.

1// app/api/google-ads/campaigns/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const GOOGLE_ADS_API_VERSION = 'v18';
5
6async function getAccessToken(): Promise<string> {
7  const response = await fetch('https://oauth2.googleapis.com/token', {
8    method: 'POST',
9    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
10    body: new URLSearchParams({
11      grant_type: 'refresh_token',
12      client_id: process.env.GOOGLE_ADS_CLIENT_ID!,
13      client_secret: process.env.GOOGLE_ADS_CLIENT_SECRET!,
14      refresh_token: process.env.GOOGLE_ADS_REFRESH_TOKEN!,
15    }),
16  });
17
18  const data = await response.json();
19  if (!data.access_token) {
20    throw new Error('Failed to obtain access token from Google OAuth2');
21  }
22  return data.access_token;
23}
24
25const DATE_RANGES: Record<string, string> = {
26  LAST_7_DAYS: 'LAST_7_DAYS',
27  LAST_30_DAYS: 'LAST_30_DAYS',
28  LAST_90_DAYS: 'LAST_90_DAYS',
29  THIS_MONTH: 'THIS_MONTH',
30};
31
32export async function GET(request: NextRequest) {
33  const { searchParams } = new URL(request.url);
34  const rangeParam = searchParams.get('range') ?? 'LAST_7_DAYS';
35  const dateRange = DATE_RANGES[rangeParam] ?? 'LAST_7_DAYS';
36
37  const customerId = process.env.GOOGLE_ADS_CUSTOMER_ID?.replace(/-/g, '');
38  const developerToken = process.env.GOOGLE_ADS_DEVELOPER_TOKEN;
39
40  if (!customerId || !developerToken) {
41    return NextResponse.json(
42      { error: 'Google Ads credentials not configured' },
43      { status: 500 }
44    );
45  }
46
47  try {
48    const accessToken = await getAccessToken();
49
50    const query = `
51      SELECT
52        campaign.id,
53        campaign.name,
54        campaign.status,
55        campaign_budget.amount_micros,
56        metrics.impressions,
57        metrics.clicks,
58        metrics.cost_micros,
59        metrics.conversions,
60        metrics.average_cpc
61      FROM campaign
62      WHERE campaign.status IN ('ENABLED', 'PAUSED')
63        AND segments.date DURING ${dateRange}
64      ORDER BY metrics.cost_micros DESC
65    `;
66
67    const response = await fetch(
68      `https://googleads.googleapis.com/${GOOGLE_ADS_API_VERSION}/customers/${customerId}/googleAds:search`,
69      {
70        method: 'POST',
71        headers: {
72          Authorization: `Bearer ${accessToken}`,
73          'developer-token': developerToken,
74          'Content-Type': 'application/json',
75        },
76        body: JSON.stringify({ query }),
77      }
78    );
79
80    if (!response.ok) {
81      const error = await response.json();
82      return NextResponse.json(
83        { error: error.error?.message ?? 'Google Ads API error' },
84        { status: response.status }
85      );
86    }
87
88    const data = await response.json();
89    const rows = data.results ?? [];
90
91    const campaigns = rows.map((row: {
92      campaign: { id: string; name: string; status: string };
93      campaignBudget?: { amountMicros: string };
94      metrics: {
95        impressions: string;
96        clicks: string;
97        costMicros: string;
98        conversions: string;
99        averageCpc: string;
100      };
101    }) => ({
102      id: row.campaign.id,
103      name: row.campaign.name,
104      status: row.campaign.status,
105      budgetDollars: row.campaignBudget?.amountMicros
106        ? Number(row.campaignBudget.amountMicros) / 1_000_000
107        : null,
108      impressions: Number(row.metrics.impressions),
109      clicks: Number(row.metrics.clicks),
110      spendDollars: Number(row.metrics.costMicros) / 1_000_000,
111      conversions: Number(row.metrics.conversions),
112      avgCpcDollars: Number(row.metrics.averageCpc) / 1_000_000,
113      ctr: row.metrics.clicks && row.metrics.impressions
114        ? Number(row.metrics.clicks) / Number(row.metrics.impressions)
115        : 0,
116    }));
117
118    return NextResponse.json({ campaigns, dateRange });
119  } catch (error) {
120    const msg = error instanceof Error ? error.message : 'Unknown error';
121    return NextResponse.json({ error: msg }, { status: 500 });
122  }
123}

Push your code to GitHub and add all five Google Ads credentials to Vercel. Open the Vercel Dashboard, select your project, go to Settings → Environment Variables. Add: GOOGLE_ADS_DEVELOPER_TOKEN (your developer token from the Google Ads API Center), GOOGLE_ADS_CLIENT_ID (from Google Cloud Console OAuth2 credentials), GOOGLE_ADS_CLIENT_SECRET (from the same OAuth2 credential), GOOGLE_ADS_REFRESH_TOKEN (obtained via the OAuth2 playground), and GOOGLE_ADS_CUSTOMER_ID (your 10-digit Google Ads account ID, with or without dashes — the route strips them). None of these should have the NEXT_PUBLIC_ prefix — all Google Ads API calls must happen server-side. Add all variables for Production, Preview, and Development environments. For local development, add them to .env.local and run npm run dev to test your dashboard with real data before deploying. After deployment, test the dashboard by opening your Vercel URL and verifying campaigns appear with real performance data. If you see 'test account' errors, your developer token is in test mode and can only access Google Ads test accounts — apply for basic access at developers.google.com to unlock real account data. The approval process is straightforward for standard account access.