# How to build an SEO tracker in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-35 min
- Compatibility: All Bubble plans (Google Search Console access required)
- Last updated: March 2026

## TL;DR

You can build an SEO tracking dashboard in Bubble that monitors keyword rankings, organic traffic, and page performance by connecting to Google Search Console via the API Connector. This tutorial covers setting up the API integration, storing ranking data over time, building visual dashboards with charts, and alerting on significant ranking changes.

## Overview: Building an SEO Tracker in Bubble

This tutorial guides you through building an SEO monitoring dashboard in Bubble. You will connect to the Google Search Console API to fetch keyword rankings, clicks, and impressions data. The data is stored in your Bubble database for historical tracking, displayed in visual charts, and monitored for significant changes. This is ideal for founders who want to track their SEO performance without paying for expensive third-party tools.

## Before you start

- A Bubble account with the API Connector plugin installed
- A Google Cloud Console account with Search Console API enabled
- A website verified in Google Search Console
- Basic understanding of API Connector OAuth setup in Bubble

## Step-by-step guide

### 1. Set up Google Search Console API access

Go to console.cloud.google.com. Create a new project or select an existing one. Navigate to APIs & Services → Library, search for Google Search Console API, and click Enable. Then go to APIs & Services → Credentials → Create Credentials → OAuth 2.0 Client ID. Select Web application. Add your Bubble OAuth redirect URI: https://yourapp.bubbleapps.io/api/1.1/oauth_redirect. Copy the Client ID and Client Secret.

> Pro tip: You can also use a Service Account for server-to-server access without user OAuth, but OAuth is simpler for a single-user tool.

**Expected result:** Google Search Console API is enabled and OAuth credentials are ready.

### 2. Configure the API Connector with OAuth

In the Plugins tab, open the API Connector. Add a new API called Google Search Console. Set Authentication to OAuth2 User-Agent Flow. Enter the Client ID, Client Secret, Scope (https://www.googleapis.com/auth/webmasters.readonly), Authorization URL (https://accounts.google.com/o/oauth2/auth), and Token URL (https://oauth2.googleapis.com/token). Add an API call named Get Search Analytics. Method: POST. URL: https://www.googleapis.com/webmasters/v3/sites/[site_url]/searchAnalytics/query. Set the body to request search data with dimensions for query, page, and date.

```
POST https://www.googleapis.com/webmasters/v3/sites/[site_url]/searchAnalytics/query

Body:
{
  "startDate": "[start_date]",
  "endDate": "[end_date]",
  "dimensions": ["query", "date"],
  "rowLimit": 100
}

Response:
{
  "rows": [
    {
      "keys": ["keyword", "2026-03-27"],
      "clicks": 45,
      "impressions": 1200,
      "ctr": 0.0375,
      "position": 3.2
    }
  ]
}
```

**Expected result:** The API Connector is configured with OAuth and can fetch search analytics data from Google Search Console.

### 3. Create the data model for tracking

Go to the Data tab and create these Data Types. TrackedSite: url (text), name (text), owner (User). KeywordData: site (TrackedSite), keyword (text), date (date), clicks (number), impressions (number), ctr (number), position (number). RankingAlert: site (TrackedSite), keyword (text), old_position (number), new_position (number), change (number), alert_date (date), is_read (yes/no). These types let you store daily snapshots and detect changes over time.

**Expected result:** Data types are created to store sites, keyword performance data, and ranking change alerts.

### 4. Build the SEO dashboard with charts

Create a page called seo-dashboard. Add a site selector Dropdown at the top. Below it, create a summary row showing total clicks, total impressions, average position, and average CTR for the selected date range (use Do a search for KeywordData with :each item's clicks :sum etc.). Add a line chart (using the Bubble Chart plugin or Chart.js plugin) showing clicks and impressions over time. Add a Repeating Group below showing the top keywords sorted by clicks descending, with columns for keyword, clicks, impressions, CTR, and average position.

**Expected result:** A dashboard displays SEO metrics with trend charts and a sortable keyword table.

### 5. Schedule daily data fetching

Create a backend workflow called fetch-daily-seo-data. This workflow calls the Google Search Console API for each TrackedSite, requesting data for yesterday's date. For each row in the response, create a KeywordData record. Before creating, check if a record for that keyword and date already exists to prevent duplicates. Schedule this workflow to run daily at a fixed time (e.g., 6 AM). Enable backend workflows in Settings → API tab. Set up the initial schedule by triggering it once from a button on the admin page.

> Pro tip: Google Search Console data has a 2-3 day delay. Fetch data for 3 days ago to ensure complete numbers. For advanced SEO monitoring needs, RapidDev can help build comprehensive tracking systems with competitor analysis.

**Expected result:** SEO data is fetched automatically every day and stored in your database for historical tracking.

### 6. Set up ranking change alerts

In the daily fetch workflow, after storing new data, compare each keyword's current position with its position from 7 days ago (Do a search for KeywordData where keyword = this keyword AND date = Current date - 7 days). If the position changed by more than 3 spots, create a RankingAlert record. On the dashboard, add a Notifications section showing recent alerts. Style position improvements in green and drops in red. Add email notifications for significant drops (position worsened by more than 5 spots) using the Send email action.

**Expected result:** Significant ranking changes trigger alerts visible on the dashboard and optionally via email.

## Complete code example

File: `Workflow summary`

```text
SEO TRACKER WORKFLOW SUMMARY
=============================

DATA TYPES:
  TrackedSite: url, name, owner (User)
  KeywordData: site, keyword, date, clicks,
    impressions, ctr, position
  RankingAlert: site, keyword, old_position,
    new_position, change, alert_date, is_read

API CONNECTOR:
  API: Google Search Console
  Auth: OAuth2 User-Agent Flow
  Scope: webmasters.readonly
  Call: Get Search Analytics (POST, Action)
  URL: .../searchAnalytics/query
  Body: startDate, endDate, dimensions, rowLimit

PAGES:
  seo-dashboard: Charts, keyword table, alerts
  manage-sites: Add/remove tracked sites

BACKEND WORKFLOW: fetch-daily-seo-data
  Runs: Daily at 6:00 AM
  1. Search TrackedSites (all active)
  2. For each site:
     a. Call Get Search Analytics (3 days ago)
     b. For each row in response:
        - Check if KeywordData exists for keyword+date
        - If new: Create KeywordData
        - Compare position to 7 days ago
        - If changed > 3 positions: Create RankingAlert
  3. Schedule self for tomorrow at 6:00 AM

DASHBOARD ELEMENTS:
  - Summary row: total clicks, impressions, avg position
  - Line chart: clicks/impressions over last 30 days
  - Keyword table: sorted by clicks desc
  - Alerts panel: recent ranking changes
  - Date range picker for filtering
```

## Common mistakes

- **Trying to fetch real-time ranking data** — Google Search Console data has a 2-3 day processing delay. Fetching yesterday's data often returns incomplete numbers. Fix: Fetch data for 3 days ago to ensure the numbers are finalized and accurate.
- **Not encoding the site URL parameter properly** — The site URL in the API endpoint must be URL-encoded. Slashes and colons in https://example.com/ cause API errors if not encoded. Fix: URL-encode the site parameter. In Bubble, use the :encoded operator on the text value before passing it to the API call.
- **Storing CTR as a percentage instead of a decimal** — Google returns CTR as a decimal (0.05 = 5%). Displaying it without conversion confuses users who expect percentage format. Fix: Store the raw decimal and multiply by 100 when displaying. Format as percentage using :formatted as with the % suffix.

## Best practices

- Fetch data for 3 days ago to account for Google Search Console's processing delay
- Store daily snapshots to enable trend analysis and historical comparison
- URL-encode site URLs before passing them to the API endpoint
- Set up alerts for significant ranking changes (more than 3-5 position shifts)
- Display CTR as a percentage in the UI even though the API returns decimals
- Use pagination when fetching data (rowLimit parameter) to handle sites with many keywords
- Add date range filtering to the dashboard so users can analyze specific periods

## Frequently asked questions

### Is Google Search Console API free to use?

Yes. The Google Search Console API is free with no usage charges. You only need a Google Cloud project with the API enabled and OAuth credentials configured.

### How far back can I fetch historical data?

Google Search Console retains 16 months of data. You can backfill your tracker by fetching historical data in batches when you first set up the integration.

### Can I track competitor keywords too?

Google Search Console only provides data for your own verified sites. For competitor tracking, you would need to integrate a third-party SEO API like SEMrush, Ahrefs, or SERPapi.

### How many keywords can I track?

The API returns up to 25,000 rows per request. For most sites, the default rowLimit of 100-500 top keywords is sufficient. Increase the limit for large sites.

### Will this use a lot of workload units?

A daily fetch for one site with 100 keywords creates about 100 database records per day. This is minimal in terms of workload units. Storing data for 365 days across 100 keywords is about 36,500 records — well within Bubble's capabilities.

### Can RapidDev help build advanced SEO tools?

Yes. RapidDev can help build comprehensive SEO platforms with competitor tracking, automated reporting, content optimization suggestions, and integrations with multiple SEO data sources.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-an-seo-tracker-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-an-seo-tracker-in-bubble