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
として設定すれば、広告をレンダリングできます。