顯示廣告

Protected Audience 競價傳回候選廣告時,會以不透明 URN 的形式傳回 (用於在 iframe 中顯示廣告),或使用 FencedFrameConfig (用於在 Fenced 影格中顯示廣告)。

本指南將說明什麼是 Fenced Frame 及其重要性,以及如何使用這兩種方法顯示廣告。如要深入瞭解圍欄頁框,請參閱這份指南提案部分。

什麼是圍欄頁框?

圍欄頁框 (<fencedframe>) 是嵌入內容的 HTML 元素,類似於 iframe。有別於 iframe,圍欄框架會限制與嵌入結構定義之間的通訊,讓影格得以存取跨網站資料,而不會與嵌入內容共用。同樣地,嵌入環境中的任何第一方資料都無法與 Fenced Frame 共用。

舉例來說,假設 news.example (嵌入情境) 會在 Fenced 影格中嵌入 shoes.example 提供的廣告。news.example 無法從 shoes.example 廣告竊取資料,shoes.example 也無法從 news.example 學習第一方資料。

圍欄頁框的運作方式為何?

Fenced Frame 會使用 FencedFrameConfig 物件進行導覽。這個物件可從 Protected Audience 競價傳回。接著,設定物件在 Fenced frame 元素上的 config 屬性。這與將網址或不透明 URN 指派給 src 屬性的 iframe 不同。FencedFrameConfig 物件具有唯讀的 url 屬性;不過,由於目前的用途需要隱藏內部資源的實際網址,因此這項屬性會在讀取時傳回不透明的字串。

圍欄頁框無法使用 postMessage 與嵌入器通訊。不過,圍欄頁框可以在圍欄頁框內搭配 iframe 使用 postMessage

Fenced Frame 會以其他方式與發布商區隔開來。發布商無法在圍欄頁框中存取 DOM,且 Fenced Frame 無法存取發布者的 DOM。此外,name 等屬性可設為發布者所觀察到的任何值,也無法在圍欄頁框中使用。

Fenced Frame 的運作方式與頂層瀏覽內容 (例如瀏覽器分頁) 相同。雖然特定用途 (例如 opaque-ads) 中的圍欄頁框可能包含跨網站資料 (例如 Protected Audience API 興趣群組),但頁框無法存取未分區的儲存空間或 Cookie。opaque-ads 圍欄頁框可以存取以 Nonce 為基礎的不重複 Cookie 與儲存空間分區。

如要進一步瞭解圍欄頁框的特性,請參閱說明

在圍欄頁框中顯示廣告

如果 AuctionConfigresolveToConfig 參數設為 true,系統會從 Protected Audience 競價傳回 FencedFrameConfig

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});

取得設定後,您可以將其指派給 Fenced Frame 的 config 屬性,以前往該設定代表的資源。舊版 Chrome 不支援 resolveToConfig 屬性,因此您仍然必須先確認承諾已解析為 FencedFrameConfig,才能前往:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

在 iframe 中顯示廣告

如果 AuctionConfig 未明確設定 resolveToConfig 或設為 false,runAdAuction() 會傳回不透明的 URN。您可將這個 URN 設為 iframesrc,以顯示廣告。