當網頁上可見的元素變更位置或大小，進而影響周圍內容的位置時，就會發生版面配置轉移。有時這是預期中的變動，例如當容器因使用者動作而展開時。不過，廣告的動態特性可能會導致版面配置出現意外變動，進而對使用者體驗造成負面影響，並導致嚴重的可用性問題。
本指南說明如何在使用 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>
使用最小高度和最小寬度屬性可讓您為廣告版位保留最低空間大小，同時仍可讓瀏覽器視需要放大容器大小。這樣可確保在放送較大的廣告素材時，不會有任何內容遭到裁剪。
您可以將這項技巧與 CSS 媒體查詢結合，為不同螢幕尺寸指定不同的最小值：
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
應避免透過 JavaScript 預留空間，因為這麼做可能會導致指令碼在載入時的版面配置位移。使用 CSS 預留空間可避免這種風險。
彈性廣告版位
自動調整大小廣告版位不會指定支援的固定大小組合。相反地，這些版位會自動調整大小，以配合放送至這些版位的廣告素材內容，讓這些版位支援不確定大小的廣告素材。因此，在要求廣告素材之前，無法先預留這些版位的空間，且自動調整大小的廣告一律會造成版面配置位移。
為減輕使用流動廣告插槽時版面配置變動的影響，我們建議您採取以下做法：
- 請僅將
fluid大小用於折疊下方的版面配置。 - 請盡早擷取流動版位，盡可能減少使用者在版位重新調整大小前，將版位捲動至檢視畫面中的機率。
收合及展開廣告版位
collapseEmptyDivs() 方法可讓您收合廣告版位 div，這樣在沒有可顯示的廣告內容時，廣告版位就不會佔用網頁空間。不過，這項功能可能會導致意外的版面配置變更，因此請謹慎使用。如上一節所述，收合和展開廣告版位可能會在廣告生命週期的兩個不同時間點造成版面配置變更。
如果您需要使用這項功能，可以採用下列最佳做法，利用 Ad Manager 報表中的歷史填充資料，降低版面配置變更的影響：
- 可能會填入的空格一律應從展開狀態開始。
- 不太可能填滿的時間段一律應從折疊狀態開始。
如需實作範例，請參閱「收合空白廣告版位」範例。