Shadow DOM にディスプレイ広告を表示する

Shadow DOM を使用すると、DOM ツリーを要素に接続し、そのツリーの内部をページの他の部分から分離できます。デフォルトでは、Shadow DOM 内で作成された要素には、メインページで実行されている JS と CSS からアクセスできません。

Google パブリッシャー タグ（GPT）ライブラリがメインページに読み込まれると、次の要件を満たしている場合に、Shadow DOM 内のコンテナに広告をレンダリングできます。

  1. Shadow DOM はオープンモードでアタッチされます。
  2. googletag.display() の呼び出しでは、DOM ID 文字列ではなく、広告コンテナ要素への参照が提供されます。

実装例

デモを見る

JavaScript

読み込んでいます...

TypeScript

読み込んでいます...