當網頁上可見的元素變更位置或大小，進而影響周圍內容的位置時，就會發生版面配置轉移。有時轉換是預期的結果，例如容器因使用者操作而展開。不過，廣告的動態特性可能會導致版面配置出現意外變動，進而對使用者體驗造成負面影響，並導致嚴重的可用性問題。
本指南說明如何在使用 Google 發布商廣告代碼 (GPT) 時，評估及盡量減少版面配置位移。
廣告如何造成版面配置位移
廣告通常會以非同步方式要求，並在網頁載入期間或之後，動態新增內容至網頁。在擷取廣告的同時，網頁的其他部分會繼續載入，使用者可能會看到非廣告內容。如果您未為載入的廣告預留足夠空間，廣告最終加入網頁時，可能會取代可見的非廣告內容。
使用 Google 發布商代碼時，廣告生命週期中可能會發生版面配置偏移的情況：
- 呼叫
display()時。視設定方式而定，插槽可能會展開或收合。 - 廣告內容顯示時。如果放送的是流動廣告，或是空間不足，系統可能會調整廣告版位大小。此時，視設定方式而定，方塊也可能會展開或收合。
- 廣告內容顯示後。某些廣告素材類型會在網頁上顯示後展開。
請注意，廣告版位在可視區域中的位置越高，就越有可能取代更多內容。請特別留意初始可視區域頂端附近的版位 (折疊上方)。這些版位在載入廣告內容時，更有可能顯示在螢幕上，因此可能會導致版面配置偏移。
評估版面配置位移
累計版面配置位移 (CLS) 是網站使用體驗核心指標指標，可用於量化版面配置位移對網站的影響，無論是在實驗室或實際環境中皆可。
實驗室
實驗室工具會綜合評估 CLS。這表示不需要實際使用者互動，因此非常適合用於持續整合和本機開發工作流程。不過，這些工具通常只會評估網頁載入期間的效能，而且可模擬的條件有限，因此回報的值可能低於實際使用者體驗。
Lighthouse 發布商廣告稽核功能是一項工具，可用來評估 CLS 是否歸因於 GPT 廣告。詳情請參閱「減少與廣告相關的版面配置位移」稽核說明文件。
您也可以設定 Chrome 開發人員工具，在瀏覽網站時醒目顯示版面配置變更。這可用於手動識別網頁上廣告版位附近的版面配置變動。
在實地
欄位工具可評估實際使用者與網站互動時的 CLS。這項程序通常稱為真實使用者監控 (RUM)。RUM 可讓您觀察 CLS 受到實際因素 (例如裝置功能、網路狀況、使用者互動和網頁個人化) 的影響程度，這些因素通常很難或無法透過模擬測試模擬。
盡量減少版面配置位移
如要確保避免版面配置偏移，唯一的方法就是使用 CSS 為特定廣告插槽保留足夠的空間。直接在廣告版位 div 上設定固定高度和寬度，是達成此目標最有效的方式。不過，雖然這項做法適用於靜態的固定大小廣告位，但在更複雜的情況下，可能需要採用更精細的方法。以下各節將說明一些常見情境。
多種尺寸的廣告版位
對於可接受多種尺寸的廣告插槽，建議採用下列任一做法：
- 為可供放送的最大尺寸保留空間。
- 為設定用於放送的最小尺寸保留空間。
- 保留最有可能放送的廣告空間大小，這項資訊可透過檢查 Google Ad Manager 報表中的歷史填充資料來判斷。
選擇合適的方法
為所設定的最大顯示大小預留空間，是消除版面配置位移最有效的方式。不過，如果您放送的廣告素材小於預留的尺寸，這個方法可能會導致廣告周圍出現額外的空白空間。縮小廣告版位以符合放送廣告素材的大小，會導致額外的版面配置變更，因此建議避免這麼做。您可以改用垂直和水平置中功能，減少多餘空白區塊對視覺的影響。
另一方面，為設定放送的最小尺寸預留空間，可避免廣告周圍出現過多的空白空間。如果廣告版位通常會填入較小的廣告素材，或是版位支援的所有尺寸都相似，這可能是不錯的做法。不過，如果放送的廣告素材比預留空間大，這種方法會導致版面配置變動 (不過，與完全不預留空間相比，這種變動通常較小)。
為了在空白空間和版面配置變動之間取得平衡，您可以為廣告插槽保留「平均」的空間量。舉例來說，在放送 320x50 廣告素材時，垂直預留 100px 會產生一點空白空間，但相較於完全不預留空間，這麼做可降低 CLS 分數。您必須嘗試不同的尺寸，找出最適合您網站的平衡點。
在決定為特定時段預留多少空間時，您可以查看 Google Ad Manager 報表中的歷史供應資料，做出更明智的決策。我們可以透過幾個範例來說明這一點。
範例 #1
| 廣告素材大小 (已放送) | 廣告伺服器曝光次數百分比 |
|---|---|
300x250 |
70% |
320x50 |
30% |
在這種情況下，由於大部分放送的廣告素材都是 300x250，因此垂直預留 250px 可大幅降低 CLS。
範例 #2
| 廣告素材大小 (已放送) | 廣告伺服器曝光次數百分比 |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
在這種情況下，大多數廣告的高度最多為 90px，因此在垂直方向保留 90px 應可避免大部分情況下的版面配置變更。
如何預留空間
建議您透過 min-height 和 min-width CSS 屬性，指定廣告插槽的大小，以解決這個問題：
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
使用 min-height 和 min-width 屬性，可為廣告版位保留最小空間，同時讓瀏覽器視需要增加容器的大小。這樣可確保在放送較大的廣告素材時，不會有任何內容遭到裁剪。
您可以將這項技巧與 CSS 媒體查詢結合，為不同螢幕尺寸指定不同的最低值：
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
請避免使用 JavaScript 保留空間，因為這麼做可能會導致指令碼載入時版面配置偏移。使用 CSS 預留空間可避免這種風險。
彈性廣告版位
自動調整大小廣告版位不會指定支援的固定大小組合。相反地，這些版位會自動調整大小，以配合放送至這些版位的廣告素材內容，讓這些版位支援不確定大小的廣告素材。因此，在要求廣告內容之前，無法為這些版位預留空間，而且彈性大小廣告一律會造成版面配置位移。
為減輕使用流動廣告插槽時版面配置變動的影響，我們建議您採取以下做法：
- 請僅將
fluid大小用於折疊下方的插槽。 - 請盡早擷取流動版位，盡可能減少使用者在版位重新調整大小前，將版位捲動至檢視畫面中的機率。
收合及展開廣告版位
collapseEmptyDivs() 方法可讓您收合廣告版位 div，以便在沒有可顯示的廣告內容時，不占用網頁空間。不過，這項功能可能會導致意外的版面配置變更，因此請謹慎使用。如上一節所述，收合和展開廣告版位可能會在廣告生命週期的兩個不同時間點造成版面配置變更。
如果您需要使用這項功能，可以採用下列最佳做法，利用 Ad Manager 報表中的歷史填充資料，降低版面配置變更的影響：
- 可能會填入的空格一律應先展開。
- 不太可能填滿的時間段一律應從折疊狀態開始。
如需實作範例，請參閱「收合空的廣告版位」範例。