How to Integrate Lovable with Google Ads

The Google Ads API requires two separate approvals: a developer token and OAuth2 credentials. For the developer token, log in to Google Ads, go to Tools & Settings → Setup → API Center. If you do not see API Center, your account may need to be a Manager Account (MCC) — you can create a free MCC at ads.google.com/home/tools/manager-accounts/. In API Center, click 'Create developer token'. Fill in your company name, purpose (select 'Reporting and analysis' or 'Campaign management' depending on your use case), and agree to the terms. Google will review your application and either approve or request more information, typically within a few business days. You will start with a Test Account level token that only works with test accounts. Apply for Basic Access level which allows production accounts. For OAuth2, go to Google Cloud Console (console.cloud.google.com), create a new project or select an existing one, navigate to APIs & Services → Library, search for 'Google Ads API', and enable it. Then go to APIs & Services → Credentials and create an OAuth 2.0 Client ID. For a server-side application, create credentials for a Web application or create a Service Account. For the most flexible approach, create a Web application OAuth client, generate a refresh token using OAuth Playground, and store both the client credentials and refresh token.

In your Lovable project, open the Cloud tab by clicking '+' next to the Preview, then navigate to the Secrets section. Add four secrets for Google Ads authentication. Add GOOGLE_ADS_DEVELOPER_TOKEN with your developer token value — this is the token from Google Ads API Center that starts with a letter and is approximately 20 characters. Add GOOGLE_ADS_CLIENT_ID with your Google OAuth2 client ID from Google Cloud Console (ends in .apps.googleusercontent.com). Add GOOGLE_ADS_CLIENT_SECRET with the corresponding client secret. Add GOOGLE_ADS_REFRESH_TOKEN with the refresh token you generated through OAuth Playground or your own OAuth flow. Finally, add GOOGLE_ADS_CUSTOMER_ID with your 10-digit Google Ads customer ID (shown in the top right of Google Ads interface, formatted as 123-456-7890 — store without hyphens as 1234567890). For Manager Account setups, this is the MCC customer ID. These credentials together allow your Edge Function to obtain access tokens and make authenticated API calls. Lovable's SOC 2 Type II certified Cloud Secrets storage ensures these highly privileged credentials are encrypted at rest and never accessible from client-side code.

Ask Lovable to create a Supabase Edge Function that handles the Google Ads API authentication flow and executes GAQL queries. The Edge Function needs to first exchange the refresh token for a fresh access token by POSTing to https://oauth2.googleapis.com/token with the client credentials and refresh token. This access token is short-lived (1 hour) so the Edge Function should cache it at the module level and refresh when near expiry. Every Google Ads API request needs two headers: Authorization: Bearer {access_token} and developer-token: {developer_token}. For Manager Account setups making calls on behalf of client accounts, also include the login-customer-id header with the MCC customer ID. The Google Ads REST API endpoint for GAQL queries is POST to https://googleads.googleapis.com/v18/customers/{customer_id}/googleAds:search with a JSON body containing { query: 'GAQL query string' }. The response contains a results array where each item has the requested fields nested by resource type.

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
8let tokenCache: { token: string; expiry: number } | null = null;
9
10async function getAccessToken(): Promise<string> {
11  if (tokenCache && Date.now() < tokenCache.expiry) return tokenCache.token;
12
13  const response = await fetch("https://oauth2.googleapis.com/token", {
14    method: "POST",
15    headers: { "Content-Type": "application/x-www-form-urlencoded" },
16    body: new URLSearchParams({
17      client_id: Deno.env.get("GOOGLE_ADS_CLIENT_ID")!,
18      client_secret: Deno.env.get("GOOGLE_ADS_CLIENT_SECRET")!,
19      refresh_token: Deno.env.get("GOOGLE_ADS_REFRESH_TOKEN")!,
20      grant_type: "refresh_token",
21    }),
22  });
23
24  const data = await response.json();
25  if (!data.access_token) throw new Error(data.error_description || "OAuth2 token fetch failed");
26
27  tokenCache = { token: data.access_token, expiry: Date.now() + (data.expires_in - 60) * 1000 };
28  return tokenCache.token;
29}
30
31serve(async (req) => {
32  if (req.method === "OPTIONS") {
33    return new Response("ok", { headers: corsHeaders });
34  }
35
36  try {
37    const accessToken = await getAccessToken();
38    const developerToken = Deno.env.get("GOOGLE_ADS_DEVELOPER_TOKEN")!;
39    const customerId = Deno.env.get("GOOGLE_ADS_CUSTOMER_ID")!;
40
41    const { query, loginCustomerId } = await req.json();
42    if (!query) throw new Error("query is required");
43
44    const headers: Record<string, string> = {
45      "Authorization": `Bearer ${accessToken}`,
46      "developer-token": developerToken,
47      "Content-Type": "application/json",
48    };
49
50    if (loginCustomerId) {
51      headers["login-customer-id"] = loginCustomerId;
52    }
53
54    const response = await fetch(
55      `https://googleads.googleapis.com/v18/customers/${customerId}/googleAds:search`,
56      { method: "POST", headers, body: JSON.stringify({ query }) }
57    );
58
59    const data = await response.json();
60    if (!response.ok) throw new Error(JSON.stringify(data.error));
61
62    return new Response(JSON.stringify(data.results || []), {
63      headers: { ...corsHeaders, "Content-Type": "application/json" },
64    });
65  } catch (error) {
66    return new Response(
67      JSON.stringify({ error: error.message }),
68      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
69    );
70  }
71});

With the Edge Function deployed, ask Lovable to create React components that query Google Ads campaign data using GAQL. GAQL queries follow SQL-like syntax: SELECT {fields} FROM {resource} WHERE {conditions} ORDER BY {field} LIMIT {count}. For campaign performance, the resource is campaign and relevant fields include campaign.id, campaign.name, campaign.status, metrics.impressions, metrics.clicks, metrics.ctr, metrics.average_cpc, metrics.cost_micros, metrics.conversions, and metrics.conversions_value. The WHERE clause uses segments.date_range or DURING for time filtering (e.g., DURING LAST_30_DAYS). Cost in Google Ads API is returned in micros (millionths of the currency unit) — divide by 1,000,000 to get the actual amount. CPC values are also in micros. CTR and conversion rate are returned as decimal values (0.05 = 5%). Build a dashboard with a data table of campaigns, key metric cards showing totals, and a bar chart comparing campaigns by cost or conversions using Recharts which is available in Lovable.

Extend the dashboard with keyword-level analysis using the keyword_view resource in GAQL. The keyword_view resource allows querying metrics at the individual keyword level, including ad_group_criterion.keyword.text for the keyword, ad_group_criterion.keyword.match_type for match type (BROAD, PHRASE, EXACT), ad_group_criterion.quality_info.quality_score for Quality Score (1-10), and all standard metrics. For budget management, query the campaign_budget resource to show current daily budgets and add a UI for updating them — updating budgets requires a PATCH call to the Google Ads API's MutateCampaignBudgets endpoint, which your Edge Function can proxy by accepting a PUT method with the budget change data. For teams with multiple Ads accounts being managed by an agency using a Manager Account, the login-customer-id header passed to the Edge Function specifies the MCC, while the URL path customer ID specifies which client account to query — this pattern lets one Edge Function serve all client accounts. For complex multi-client reporting setups, RapidDev's team can help architect the data aggregation layer across accounts.