Protected Audience オークションで広告候補が返されると、iframe で広告のレンダリングに使用される不透明 URN またはフェンス付きフレームでの広告のレンダリングに使用される FencedFrameConfig として返されます。
このガイドでは、フェンス付きフレームの概要とそれが必要な理由のほか、いずれかの方法で広告をレンダリングする方法について説明します。フェンス付きフレームの詳細については、こちらのガイドまたは提案をご覧ください。
フェンス付きフレームとは
フェンス付きフレーム（<fencedframe>）は埋め込みコンテンツの HTML 要素であり、iframe と同様です。iframe とは異なり、フェンス付きフレームはエンベディング コンテキストとの通信を制限し、エンベディング コンテキストと共有することなく、フレームがクロスサイト データにアクセスできるようにします。同様に、エンベディング コンテキストのファーストパーティ データをフェンス付きフレームと共有することはできません。
たとえば、news.example（エンベディング コンテキスト）が shoes.example の広告をフェンス付きフレームに埋め込むとします。news.example が shoes.example 広告からデータを抽出することはできません。また、shoes.example が news.example から自社データを学習することもできません。
フェンス付きフレームの仕組み
フェンス付きフレームでは、ナビゲーションに FencedFrameConfig オブジェクトを使用します。このオブジェクトは、Protected Audience オークションから返すことができます。次に、config オブジェクトがフェンス付きフレーム要素の config 属性として設定されます。これは、URL または不透明 URN が src 属性に割り当てられている iframe とは異なります。FencedFrameConfig オブジェクトには読み取り専用の url プロパティがあります。ただし、現在のユースケースでは内部リソースの実際の URL を非表示にする必要があるため、このプロパティは読み取り時に不透明な文字列を返します。
フェンス付きフレームは、postMessage を使用してエンベダーと通信できません。ただし、フェンス付きフレームでは、フェンス付きフレーム内で iframe と postMessage を使用できます。
フェンス付きフレームは、他の方法でパブリッシャーから分離されます。パブリッシャーはフェンス付きフレーム内の DOM にアクセスできず、フェンス付きフレームはパブリッシャーの DOM にアクセスできません。また、name などの属性は任意の値に設定でき、パブリッシャーによって監視できますが、フェンス付きフレームでは使用できません。
フェンス付きフレームは、最上位のブラウジング コンテキスト（ブラウザのタブなど）のように動作します。特定のユースケース（opaque-ads など）のフェンス付きフレームにはクロスサイト データ（Protected Audience API インタレスト グループなど）を含めることができますが、このフレームはパーティション分割されていないストレージや Cookie にアクセスできません。opaque-ads フェンス付きフレームは、ノンスベースの一意の Cookie とストレージ パーティションにアクセスできます。
フェンス付きフレームの特性については、説明で詳しく説明しています。
フェンス付きフレームに広告をレンダリングする
AuctionConfig の resolveToConfig パラメータが true に設定されている場合、Protected Audience オークションから FencedFrameConfig が返されます。
const frameConfig = await navigator.runAdAuction({
// ...auction configuration
resolveToConfig: true
});
構成を取得したら、それをフェンス フレームの config 属性に割り当て、構成によって表されるリソースにフレームを移動できます。以前のバージョンの Chrome は resolveToConfig プロパティをサポートしていないため、移動する前に Promise が FencedFrameConfig に解決されたことを確認する必要があります。
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
const frame = document.createElement('fencedframe');
frame.config = frameConfig;
}
iframe に広告を表示する
AuctionConfig が resolveToConfig を明示的に設定しない場合、または false に設定されている場合、runAdAuction() は不透明な URN を返します。この URN を iframe の src として設定すれば、広告をレンダリングできます。