您定義的每個廣告版位都必須指定能在該版位中放送的廣告大小。廣告大小的指定方式取決於要顯示的廣告類型,以及廣告版位本身的大小和彈性。
在某些情況下,Google Ad Manager 的委刊項層級可能會覆寫廣告大小。詳情請造訪說明中心。
如需本指南內範例的完整程式碼,請參閱「廣告大小」範例網頁。
固定大小廣告
您可以定義單一固定大小的廣告版位。
googletag
.defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "fixed-size-ad")
.addService(googletag.pubads());
在本例中,系統只會放送大小為 300x250
的廣告素材。
重點:使用固定大小的廣告時,強烈建議您定義會顯示廣告素材的 <div>
元素大小。由於廣告素材通常是非同步顯示,因此如果預留了空間不足的廣告素材,可能會導致網頁上的其他元素發生位移。
多重大小廣告
如果廣告支援多種尺寸,請在定義廣告版位時提供支援的尺寸清單。
googletag
.defineSlot(
"/6355419/Travel/Europe",
[
[300, 250],
[728, 90],
[750, 200],
],
"multi-size-ad",
)
.addService(googletag.pubads());
在這個範例中,大小為 300x250
、728x90
和 750x200
的廣告素材可以放送。Ad Manager 只會在廣告選擇程序期間,考慮符合這些大小的廣告素材。
如未為 CSS 中的廣告版位 <div>
指定尺寸,當呼叫 display()
時,GPT 會自動將尺寸設為宣告的最短高度和宣告的寬度 (超過 1 像素)。在本例中會是 750x90
。不過,一旦網頁載入的其他內容導致內容移動,就可能發生這種大小調整的情形。為避免版面配置位移,請按照「盡量減少版面配置位移」指南中的說明,使用 CSS 保留空間。
使用多種大小的廣告時,請確認您的版面配置夠靈活,可支援指定最大尺寸的廣告。這可避免廣告素材意外裁剪
自動調整廣告
自動調整廣告沒有固定大小,而是會配合顯示的廣告素材內容進行調整。原生廣告是 Ad Manager 目前唯一支援的自動調整廣告類型。
使用自動調整廣告時,您可以指定自訂 fluid
大小。
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
在本例中,廣告版位將使用上層容器的寬度,並配合廣告素材內容調整高度。調整廣告版位大小時,GPT 採取的步驟如下:
- 接收廣告回應。
- 廣告素材內容會寫入 iframe,初始高度設為
0px
,寬度設為100%
。 - iframe 中的所有資源都載入完畢後,即可將 iframe 的高度設為等於 iframe 的
<body>
元素的高度,以便顯示廣告素材。
回應式廣告
回應式廣告會擴充多種大小的廣告,並可讓您根據發出請求的瀏覽器可視區域大小,指定要放送的廣告素材。這項功能可用於控制要在不同裝置 (桌機、平板電腦、行動裝置等) 上放送的廣告素材大小。
方法是定義可視區域大小與廣告大小之間的對應關係,並將該對應與廣告版位建立關聯。
const responsiveAdSlot = googletag .defineSlot( "/6355419/Travel/Europe", [ [300, 250], [728, 90], [750, 200], ], "responsive-ad", ) .addService(googletag.pubads()); const mapping = googletag .sizeMapping() .addSize( [1024, 768], [ [750, 200], [728, 90], ], ) .addSize([640, 480], [300, 250]) .addSize([0, 0], []) .build(); responsiveAdSlot.defineSizeMapping(mapping);
在這個範例中,對應指定指定以下內容:
- 如果可視區域 >=
1024x768
,大小為750x200
或728x90
的廣告就可以放送。 - 如果
1024x768
> 可視區域 >=640x480
,大小為300x250
的廣告就可以放送。 - 如果可視區域小於
640x480
,就無法放送任何廣告。
GPT 會偵測發出請求的瀏覽器可視區域大小,並採用適合的最大對應選項。在決定最大的對應 GPT 時,會先考量寬度,再考量高度 (也就是[100,
10]
> [10, 100]
)。如果對應發生錯誤,或是無法判定可視區域大小,系統會使用 defineSlot()
中指定的大小。
接著,對應會透過呼叫 Slot.defineSizeMapping() 方法,與廣告版位建立關聯。這個方法接受下列格式的對應陣列:
[ [ [viewport-width-1, viewport-height-1], [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...] ], [ [viewport-width-2, viewport-height-2], [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...] ], ... ]
這個陣列中的可視區域大小順序會定義其優先順序。上方範例中使用的 SizeMappingBuilder
可讓您輕鬆產生這種格式的陣列,且大小會自動依大小由大到小排序。在此範例中,SizeMappingBuilder.build()
的輸出內容為:
[
[[1024, 768], [[750, 200], [728, 90]]],
[[640, 480], [[300, 250]]],
[[0, 0], []]
]