在開發 WebApp 或使用 WordPress 架設網站時，將 Google Data Studio (GDS) 的報表透過 <iframe> 嵌入到網頁中（Embedded Analytics）是常見的數據視覺化方案。

然而，許多開發者在實作中後段都會遇到一個靈魂考驗：「既然 GDS 內建就有篩選器，為什麼我們還要大費周章用外層網頁的 JavaScript 去控制內層的 Iframe 呢？」

備註： 歷經名稱改動後，Google 官方已於 2026 年 5 月 正式將該服務名稱全面改回大家最熟悉的 Google Data Studio (GDS)。

本篇文章將全面解構「外層控內層」的實戰應用情境、手把手設定教學，以及此方案必須面對的效能代價。

下方式實作DEMO，可以點看看下拉式清單(外層元件)然後看內層報告是否有連動篩選

💡 為什麼不用內建篩選器？「全頁同步」的剛性需求

想像一下你正在開發一個商務儀表板，頁面上除了嵌入 GDS 的精美地圖或圖表之外，旁邊還放了一個網頁原生的 HTML 表格（例如 WordPress 產生的訂單明細），甚至還有其他客製化的 WebApp 原生元件。

• 如果使用 GDS 內建篩選器：當使用者點擊 GDS 報表內的門市選單，內部的圖表確實變了。但是，外層網頁的原生表格完全毫無反應。因為外層網頁受限於瀏覽器安全政策，根本抓不到 iframe 內部的點擊事件，導致同一個網頁出現「數據不同步」的尷尬狀況。
• 如果使用外層原生下拉選單（主控開關）：當使用者在網頁最上方的下拉選單選擇「7-11 信義門市」時，外層 JavaScript 可以同時過濾網頁原生的 HTML 表格，並動態修改 iframe 的網址去同步過濾 GDS 報表。

唯有把主控權拉回外層（Web Parent），你才能做到「一個選單，搞定全網頁元件」的完美聯動體驗！

🛠️ 第一階段：Google Data Studio 報表設定

由於瀏覽器同源政策 (CORS) 的保護，外層網頁沒辦法直接利用 JS 操縱 iframe 內部的元件，但 GDS 官方支援透過 「網址參數 (URL Parameters)」 來接收外部傳入的篩選條件。

1. 建立核心參數 (Parameter)

1. 在右側資料面板點選 「新增參數 (Add a parameter)」。
2. 參數名稱：輸入 selected_store。
3. 資料類型：選擇「文字 (Text)」。

2. 開啟網址修改權限（最關鍵！）

1. 點選上方選單的 資源 (Resource) > 管理報告網址參數 (Manage report URL parameters)。
2. 找到你剛建立的 selected_store，勾選「允許在報告網址中修改」。
3. 請記下此時系統顯示的「網址參數」名稱（通常會是 ds0.selected_store 這種格式）。

3. 利用計算欄位破解「預設空白」的邏輯

如果直接拿參數去圖表做「等於」篩選，會導致網頁剛載入（網址沒帶參數）時報表變成一片空白。為了達到「沒帶參數全列出，有帶參數精準篩選」，我們需要用 CASE WHEN 建立一個中介的計算欄位：

1. 在右側資料面板點選 「新增欄位 (Add a field)」。
2. 欄位名稱設定為：is_selected_store。
3. 在公式框中輸入以下程式碼：

SQL

CASE 
  WHEN selected_store IS NULL THEN true
  WHEN selected_store = '' THEN true
  WHEN 地標名稱 (label) = selected_store THEN true
  ELSE false
END

(註：公式中的 selected_store 請選擇你剛剛建立的紫色參數標籤；地標名稱 (label) 請換成你資料表中實際的店名欄位)

4. 設定圖表篩選器 (Filter)

1. 點選你的圖表（或地圖），在右側面板的「篩選器」點選 「新增篩選器」。
2. 設定條件如下：Include -> is_selected_store -> Equal to (=) -> true

🛠️ 第二階段：WordPress / WebApp 端「動態渲染」實作

在真實的網頁開發中，我們通常會有一組門市清單資料（Array）。為了不要讓 HTML 變得冗長、難維護，我們採用數據驅動（Data-Driven）的思維：在網頁中只留下一個空的 <select> 標籤，並交由 JavaScript 依照資料清單，自動把對應的選項（Option）渲染出來。

請在 WordPress 中新增一個 「自訂 HTML (Custom HTML)」區塊，並貼入以下完整的動態聯動程式碼：

HTML

<div class="gds-control-dropdown" style="margin-bottom: 20px; font-family: sans-serif;">
    <label for="storeSelect" style="font-weight: bold; margin-right: 10px; color: #333;">📍 選擇查看門市：</label>
    <select id="storeSelect" onchange="changeStoreFilter(this.value)" style="padding: 10px 15px; border-radius: 4px; border: 1px solid #ccc; font-size: 15px; min-width: 250px; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
        <option value="">🔄 顯示全部數據</option>
    </select>
</div>

<iframe id="targetDataStudio" 
        width="100%" 
        height="750" 
        src="https://datastudio.google.com/embed/reporting/c3d8d3ec-58b2-439b-b590-47111752c453/page/GWB1F" 
        frameborder="0" 
        style="border:1px solid #eee; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05);" 
        allowfullscreen
        sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox">
</iframe>

<script>
// 💡 模擬從後端 API 或資料庫撈出來的門市清單（精準對應 GDS 中的資料源欄位值）
const storeList = [
    "7-11 信義門市",
    "全家 北車門市",
    "萊爾富 中山門市",
    "7-11 西門門市",
    "全家 大安門市"
];

// 【步驟一】當網頁 DOM 結構載入完成後，動態產生下拉選單選項
window.addEventListener('DOMContentLoaded', () => {
    const selectEl = document.getElementById('storeSelect');
    
    // 利用陣列迴圈，自動產生對應數量的 <option>
    storeList.forEach(store => {
        const option = document.createElement('option');
        option.value = store;          // 傳遞給 GDS 的實際數值
        option.textContent = store;    // 顯示在下拉選單上的文字
        selectEl.appendChild(option);
    });
});

// 【步驟二】核心控制函式：當選單切換時，處理 Iframe 網址傳參
function changeStoreFilter(storeName) {
    const baseUrl = "https://datastudio.google.com/embed/reporting/c3d8d3ec-58b2-439b-b590-47111752c453/page/GWB1F";
    
    // 這裡也可以同步呼叫你外層原生表格的篩選函式
    // filterNativeTable(storeName);
    
    // 如果選到「顯示全部」（value 為空字串），直接把 iframe 還原成基礎嵌入網址
    if (storeName === "") {
        document.getElementById('targetDataStudio').src = baseUrl;
        return;
    }
    
    // 打包成 Google Data Studio 認得的 JSON 物件格式 (Key 值請改為你資源管理中複製的參數 ID)
    const queryParams = {
        "ds0.selected_store": storeName
    };
    
    // 轉換為 JSON 字串並進行網址百分比編碼 (UrlEncode)
    const jsonString = JSON.stringify(queryParams);
    const encodedParams = encodeURIComponent(jsonString);
    
    // 組合出帶有 filter 參數的新嵌入網址
    const finalUrl = `${baseUrl}?params=${encodedParams}`;
    
    // 變更 iframe 的 src，驅使內層報表重新載入並過濾數據
    document.getElementById('targetDataStudio').src = finalUrl;
}
</script>

⚠️ 無法迴避的硬傷：此方案的重大缺點

這個方法雖然優雅地解決了「跨元件數據同步」的難題，但在使用者體驗（UX）上，有一個技術上無法避免的代價：

缺點：內層 Iframe 每次變更篩選都要「整頁重新載入 (Reload)」

當你在外層切換下拉選單、變更 iframe.src 時，對瀏覽器來說等同於重新導向該區塊的網址。

• UX 影響：每切換一次門市，內層的 GDS 報表區塊就會先「變白」，然後出現 Google Data Studio 經典的灰色大頭針轉圈圈動畫，耗時約 2~4 秒不等（視使用者網路與報表資料量而定）。
• 為什麼會這樣？：因為免費版的 GDS 並不像 Power BI Embedded 或 Tableau 有提供完整的前端 JavaScript SDK。它無法透過瀏覽器的 postMessage 機制進行背景「無縫、不閃爍」的資料即時抽換。

💡 開發抉擇建議

如果你的主管或客戶要求的是「點擊按鈕後，圖表必須在 0.5 秒內無縫秒變、絕對不能看到任何重新載入的轉圈圈」，那麼 GDS 的嵌入方案可能不適合你，你必須轉向付費的 BI 嵌入方案（如 Power BI）或使用原生的 D3.js / Chart.js 自行開發圖表。

但如果網頁的定位是「主題式看板」，且使用者可以接受分類切換時有短暫的數據讀取時間，那這個「網址傳參黑魔法」無疑是目前免預算、開發速度最快，且最具維護彈性的最佳解法！