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 與儲存空間分區。
如要進一步瞭解圍欄頁框的特性,請參閱說明。
在圍欄頁框中顯示廣告
如果 AuctionConfig
的 resolveToConfig
參數設為 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 設為 iframe
的 src
,以顯示廣告。