Google Search Console

Start in the Google Cloud Console (console.cloud.google.com). Select or create a project dedicated to this integration. Go to APIs & Services → Library. Search for 'Google Search Console API' and click Enable. This is the API that powers the Search Analytics query endpoint. Next, go to APIs & Services → Credentials → Create Credentials → OAuth 2.0 Client IDs. Choose application type 'Web application' (this gives you a client_id and client_secret that work with the OAuth Playground). Name it 'Bubble GSC Integration'. In the 'Authorized redirect URIs' section, add: https://developers.google.com/oauthplayground This URI is required so the OAuth Playground can receive the authorization code and exchange it for tokens. Click Create. Copy both the Client ID and the Client Secret. You will need them in the next step when you set up the OAuth Playground, and later when you configure the Bubble API Connector. Also note your GSC property URL at this point — go to Google Search Console and click your property to find its exact URL. Properties come in two formats: - URL prefix format: https://www.example.com/ (note the trailing slash) - Domain format: sc-domain:example.com The exact property URL (including the trailing slash for URL prefix properties) is used as a path parameter in the Search Analytics API. A single character difference produces a 403 error even with correct OAuth credentials — so note the exact format now.

1{
2  "google_cloud_setup": {
3    "step1": "console.cloud.google.com → APIs & Services → Library → search 'Google Search Console API' → Enable",
4    "step2": "APIs & Services → Credentials → Create Credentials → OAuth 2.0 Client IDs → Web application",
5    "step3": "Add authorized redirect URI: https://developers.google.com/oauthplayground",
6    "step4": "Copy: client_id and client_secret"
7  },
8  "gsc_property_url_formats": {
9    "url_prefix": "https://www.example.com/",
10    "domain": "sc-domain:example.com",
11    "note": "URL-encode when used in the API path: https%3A%2F%2Fwww.example.com%2F"
12  }
13}

The OAuth 2.0 Playground (https://developers.google.com/oauthplayground) lets you generate the OAuth tokens needed for the Bubble integration without writing any code. This is how you get around Bubble's inability to sign RSA JWTs. Open the OAuth Playground in your browser. Click the gear icon at the top right → Settings. Check 'Use your own OAuth credentials'. Enter your Google Cloud Client ID and Client Secret from the previous step. Close settings. In Step 1 (Select & authorize APIs), find 'Google Search Console API v3' in the list and expand it. Check the scope 'https://www.googleapis.com/auth/webmasters.readonly' (read-only access to Search Console data — sufficient for querying the Search Analytics API). Click 'Authorize APIs'. Google will ask you to sign in and grant access. Sign in with the Google account that has access to the GSC property you want to query. On the consent screen, click Allow. You will be redirected back to the OAuth Playground with an authorization code. In Step 2 (Exchange authorization code for tokens), click 'Exchange authorization code for tokens'. The Playground shows the response containing: - access_token (short-lived, expires in 3600 seconds) - refresh_token (long-lived, use this in Bubble) - token_type: Bearer Copy the refresh_token value. This is the credential that Bubble will use to obtain fresh access_tokens. Treat it like a password — it grants read access to your GSC data. Note: the access_token shown here expires quickly. Do not store it — Bubble will generate fresh ones via the token refresh call.

1{
2  "oauth_playground_steps": {
3    "url": "https://developers.google.com/oauthplayground",
4    "step1": "Settings (gear) → Use your own OAuth credentials → enter client_id + client_secret",
5    "step2": "Select scope: https://www.googleapis.com/auth/webmasters.readonly",
6    "step3": "Authorize APIs → sign in with GSC property owner account → Allow",
7    "step4": "Exchange authorization code for tokens → copy refresh_token"
8  },
9  "credentials_for_bubble": {
10    "client_id": "[from Google Cloud Console]",
11    "client_secret": "[from Google Cloud Console — PRIVATE]",
12    "refresh_token": "[from OAuth Playground response — PRIVATE]"
13  }
14}

In your Bubble app, click the Plugins tab → API Connector. If it is not already installed, click 'Add plugins', search for 'API Connector' (by Bubble), and install it. Click 'Add another API'. Name this group 'Google OAuth'. Leave the base URL empty (the full URL goes in the call). Click 'Add another call'. Name it 'Refresh Access Token'. Method: POST. URL: https://oauth2.googleapis.com/token. Set the body type to 'Form data'. Add four parameters: - client_id: your Google Cloud client ID. Private: UNCHECKED (this is a public identifier). - client_secret: your Google Cloud client secret. Private: CHECKED — this is sensitive and must never appear in Bubble's logs. - refresh_token: the long-lived token from the OAuth Playground. Private: CHECKED — treat this like a password. - grant_type: the fixed string 'refresh_token'. Private: UNCHECKED. Set 'Use as' to 'Action'. Click 'Initialize call'. Bubble sends the POST request to Google. A successful response looks like: {"access_token": "ya29.a0...", "expires_in": 3599, "token_type": "Bearer", "scope": "https://www.googleapis.com/auth/webmasters.readonly"} If you see 'There was an issue setting up your call' or the Initialize fails: - Check that the body type is Form data (not JSON) - Verify the refresh_token is not expired or revoked (if so, regenerate it in the OAuth Playground) - Confirm the Google Search Console API is enabled in your Google Cloud project - Verify the client_id and client_secret match the credentials used to generate the refresh_token in the same Google Cloud project

1{
2  "method": "POST",
3  "url": "https://oauth2.googleapis.com/token",
4  "body_type": "form_data",
5  "body_params": {
6    "client_id": "{{client_id}}",
7    "client_secret": "<private>",
8    "refresh_token": "<private>",
9    "grant_type": "refresh_token"
10  },
11  "use_as": "Action",
12  "expected_success_response": {
13    "access_token": "ya29.a0...",
14    "expires_in": 3599,
15    "token_type": "Bearer"
16  }
17}

Click 'Add another API' in the API Connector. Name this group 'Google Search Console API'. Set the base URL to: https://searchconsole.googleapis.com/webmasters/v3 Add a shared header to this group: Key = Authorization, Value = Bearer [leave empty — populated dynamically from Workflow], Private = CHECKED. Click 'Add another call'. Name it 'Query Search Analytics'. Method: POST. Endpoint path: /sites/{{siteUrl}}/searchAnalytics/query The {{siteUrl}} parameter must be URL-encoded in the actual API call. For example, https://www.example.com/ becomes https%3A%2F%2Fwww.example.com%2F. In Bubble's dynamic text system, you can use 'URL encode' formatting on a stored property URL value. For simplicity, you can also hardcode the URL-encoded siteUrl directly in the endpoint path during setup. Set the body type to JSON. A standard query body: { "startDate": "{{start_date}}", "endDate": "{{end_date}}", "dimensions": ["{{dimension}}"], "rowLimit": 100 } Dimension options: 'query' (search terms), 'page' (URL), 'device' (desktop/mobile/tablet), 'country' (country code), 'date' (daily data). You can combine up to 5 dimensions in one call. Metrics returned by default: clicks, impressions, ctr (decimal, e.g. 0.045 = 4.5%), position (average rank, e.g. 3.7). Set 'Use as' to 'Action'. To Initialize: temporarily hardcode a real access_token in the Authorization shared header (get a fresh one from the Refresh Access Token call above), set real start_date and end_date values (use dates ending at least 3 days ago to avoid the GSC data lag), and set dimension to 'query'. A successful response looks like: {"rows": [{"keys": ["search term"], "clicks": 42, "impressions": 890, "ctr": 0.047, "position": 8.3}]} If you get 403 'User does not have sufficient permissions': - The Google account that generated the refresh_token does not have access to the GSC property - Or the siteUrl in the path does not exactly match the property URL in GSC (check for trailing slash, uppercase/lowercase, www vs non-www)

1{
2  "method": "POST",
3  "url": "https://searchconsole.googleapis.com/webmasters/v3/sites/{{siteUrl}}/searchAnalytics/query",
4  "headers": {
5    "Authorization": "Bearer <dynamic_from_workflow>",
6    "private": true
7  },
8  "body": {
9    "startDate": "{{start_date}}",
10    "endDate": "{{end_date}}",
11    "dimensions": ["query"],
12    "rowLimit": 100,
13    "startRow": 0
14  },
15  "use_as": "Action",
16  "siteUrl_examples": {
17    "url_prefix": "URL-encoded: https%3A%2F%2Fwww.example.com%2F",
18    "domain": "URL-encoded: sc-domain%3Aexample.com"
19  }
20}

Create a data type in Bubble called 'GSC Row' with fields: query_term (text), page_url (text), clicks (number), impressions (number), ctr (number), position (number). Add a 'fetched_at' date field to the data type for cache tracking. Add a Repeating Group to your Bubble page. Set its Type of content to 'GSC Row'. Add text elements in the cell for query_term, clicks, impressions, and position. Format the ctr as a percentage (multiply by 100 and display with two decimal places). Create a Workflow event: 'When page is loaded'. Add actions: Action 1: Conditional token refresh — add the action only if the current access_token is expired. Check a stored 'token_expires_at' field against Current date/time. If expired or missing: - Run 'Plugins → Google OAuth - Refresh Access Token' - Make changes to App Data: store the new access_token and set token_expires_at = Current date/time + 3540 seconds Action 2: 'Plugins → Google Search Console API - Query Search Analytics'. Set Authorization dynamically: 'Bearer ' + stored access_token. Set siteUrl to your URL-encoded property URL. Set start_date to '30daysAgo' date (use Bubble's date arithmetic: Current date/time - 30 days, formatted as YYYY-MM-DD) and end_date to Current date/time - 3 days. Action 3: 'Delete a list of things' — clear old GSC Row records from the database to prevent stale data accumulation. Action 4: For each row in Action 2's result rows list, create a new GSC Row with fields populated from that row's keys array (dimension values) and metric values. Set the Repeating Group data source to 'Search for GSC Rows, sorted by Clicks descending'. Caching: on page load, first check if the most recent GSC Row's fetched_at is within the last 6 hours — if so, skip Actions 2–4 and use the cached data. This avoids unnecessary API calls (and WU costs) since GSC data has a 24–48 hour lag anyway. Add privacy rules to the GSC Row data type (Data tab → Privacy → GSC Row) to prevent public access via Bubble's Data API.

1// Workflow: When page is loaded
2//
3// Condition A: If App Data token_expires_at < Current date/time (token expired):
4//   Action 1: Plugins → Google OAuth - Refresh Access Token
5//   Action 2: Make changes to App Data
6//     - access_token = Action 1's access_token
7//     - token_expires_at = Current date/time + 3540 seconds
8//
9// Condition B: If GSC Row newest fetched_at < Current date/time - 6 hours (cache stale):
10//   Action 3: Plugins → GSC API - Query Search Analytics
11//     - Authorization = "Bearer " + App Data access_token
12//     - siteUrl = https%3A%2F%2Fwww.yoursite.com%2F (URL-encoded)
13//     - startDate = [30 days ago formatted YYYY-MM-DD]
14//     - endDate = [3 days ago formatted YYYY-MM-DD]
15//     - dimensions = ["query"]
16//     - rowLimit = 100
17//   Action 4: Delete all existing GSC Rows
18//   Action 5: Create new GSC Row for each result row
19//     - query_term = row's keys[0]
20//     - clicks = row's clicks
21//     - impressions = row's impressions
22//     - ctr = row's ctr
23//     - position = row's position
24//     - fetched_at = Current date/time
25//
26// Repeating Group data source: Search for GSC Rows sorted by clicks desc

Google OAuth access_tokens expire after 1 hour. Without automatic refresh, any user who loads the Bubble GSC dashboard after the stored token expires will either see an error or wait while the page-load Workflow fetches a new token (adding latency). For a smooth production experience on a paid Bubble plan: 1. Go to Settings tab → API → check 'This app exposes a Workflow API'. This enables the Backend Workflows feature. 2. Click 'Backend workflows' in the left sidebar. Click 'Add a new API workflow'. Name it 'Refresh GSC Token'. 3. Inside the workflow, add two actions: a. Plugins → Google OAuth - Refresh Access Token b. Make changes to App Data: set access_token = Action 1's access_token, set token_expires_at = Current date/time + 3540 seconds 4. Click the clock icon on the workflow and set a recurring schedule: every 55 minutes. With this scheduler running, the token in the Bubble database is always fresh when users arrive on the dashboard. The page-load Workflow's token-expiry check (from step 5) becomes a safety net rather than a primary refresh mechanism. Free-plan users: without Backend Workflows, you can only refresh the token on page load. For users who stay on the same Bubble page for more than 1 hour, the GSC data queries will fail silently until they reload the page. If your audience typically visits the dashboard briefly (under 1 hour sessions), the page-load refresh is sufficient.

1// Backend Workflow: 'Refresh GSC Token'
2// Settings → API → expose Workflow API → checked
3// Backend Workflows → New API Workflow → 'Refresh GSC Token'
4//
5// Action 1: Plugins → Google OAuth - Refresh Access Token
6//   (uses stored client_secret + refresh_token from API Connector — Private)
7//   Returns: access_token
8//
9// Action 2: Make changes to App Data
10//   access_token = Action 1's access_token
11//   token_expires_at = Current date/time + 3540 seconds
12//
13// Recurring schedule: every 55 minutes
14// Note: Backend Workflows require a paid Bubble plan.