System Architecture
廣告數據儀表板
ETL Pipeline + 多平台整合 + 互動式儀表板
Layer 1 — 資料來源（每日自動觸發）
📊
Google Analytics 4
工作階段 / 使用者
來源媒介 / 轉換
Data API v1
🔍
Google Ads
花費 / 點擊 / 曝光
ROAS / 關鍵字
Google Ads API
📘
Meta Ads
FB / IG 廣告
花費 / 觸及 / 互動
Marketing API
Layer 2 — 自動排程（GitHub Actions）
⚙️
GitHub Actions — Cron Job
免費
每天凌晨 02:00 自動執行 · 憑證加密存放於 GitHub Secrets · 不暴露於任何前端
0 2 * * *
Cron 排程
🔐
Secrets
Node.js
抓取腳本
1
呼叫各平台 API 取得昨日數據
→
2
標準化欄位格式
→
3
Upsert 寫入資料庫
Layer 3 — 資料儲存（Supabase）
🗄️
Supabase — PostgreSQL
免費 500MB
歷史數據永久累積 · 自動提供 REST API · 10 個客戶跑一年預估 < 200MB
ga4_daily
date · property_id
source_medium
sessions · users
bounce_rate · duration
google_ads_daily
date · account_id
campaign_name
spend · clicks · impressions
conversions · roas
meta_ads_daily
date · account_id
campaign_name
spend · reach · impressions
cpm · cpc · ctr
clients
client_id · name
ga4_property_id
google_ads_id
meta_account_id
Layer 4 — 儀表板前端（Cloudflare Pages）
📱
Cloudflare Pages — React 儀表板
免費 · 台灣節點快
直接讀 Supabase，不碰原始 API · 回應速度快 · 全公司人員可用
🔄 客戶切換
下拉選單切換
不同客戶資產
📐 維度選擇
來源/媒介
渠道 / 頁面 / 裝置
📈 指標選擇
Sessions / 花費
ROAS / 跳出率
📅 日期範圍
自訂區間
快速預設（7/28天）
📊 趨勢圖
折線 / 長條
動態更新
🥧 分布圖
渠道佔比
圓餅 / 甜甜圈
⚡ 跨平台比較
GA4 + Google Ads
+ Meta 並排
🔐 登入驗證
Google OAuth
公司帳號限定
👥
公司內部人員
業務 · AE · 主管 — 用瀏覽器直接開，不需安裝任何軟體
成本試算
⚙️
GitHub Actions
$0
2000 分鐘/月免費
🗄️
Supabase
$0
500MB / 50,000 req 免費
☁️
Cloudflare Pages
$0
無限流量免費
🔌
各平台 API
$0
GA4 / Google Ads / Meta 皆免費
總月費：$0 美元
（在流量與資料量達到一定規模前，完全免費運行）
建議開發順序
1
Phase 1 — 資料層
設計 Supabase schema · 寫 GitHub Actions 腳本抓 GA4 → 存入 DB
2
Phase 2 — 儀表板前端
Cloudflare Pages + React · 客戶切換 · 維度/指標選擇器 · 圖表動態渲染
3
Phase 3 — 多平台整合
接 Google Ads → Meta Ads · 跨平台並排比較 · 整合 ROAS 分析