例で基本を学習

このガイドでは、テスト広告の表示について詳しく説明し、Google パブリッシャータグ（GPT）ライブラリを最大限に活用するための基本的な概念を紹介します。次のようなコンセプトが解説されています。

広告のサイズ設定
Key-Value ターゲティング
シングルリクエストアーキテクチャ

GPT ライブラリを読み込む

まず、GPT ライブラリを読み込んで初期化します。HTML ドキュメントの <head> に次のコードを追加します。

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };

  googletag.cmd.push(() => {

  });
</script>

これにより、GPT ライブラリが読み込まれ、googletag オブジェクトと CommandArray オブジェクトの両方が初期化されます。これらのオブジェクトを初期化すると、GPT コマンド配列の使用をすぐに開始できます。以下の JavaScript コードを、このスニペットで定義した空の関数の本文に追加します。

広告スロットを定義する

GPT を読み込んだ後、広告スロットを定義できます。次の例では、広告フォーマット、サイズ、ターゲティングオプションが異なる 3 つの広告スロットを定義しています。

固定サイズの広告スロット

以下は、シンプルな固定サイズの広告スロットです。

// Define a fixed size ad slot, customized with key-value targeting.
googletag
  .defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
  .addService(googletag.pubads())
  .setTargeting("color", "red")
  .setTargeting("position", "atf");

広告ユニットのパス、サイズ、コンテナ <div> ID のほか、このスニペットではさまざまなターゲティングオプションも指定されています。これらのオプションは、このスロットに配信可能な広告を限定し、区別します。詳しくは、Key-Value ターゲティングをご覧ください。

アンカー広告スロット

次に、ビューポートの下部にアンカー広告スロットを配置した例を示します。

// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
  "/6355419/Travel",
  googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);

// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
  anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());

  document.getElementById("status").textContent =
    "Anchor ad is initialized. Scroll page to activate.";
}

アンカースロットはページ外フォーマットの一種で、通常の defineSlot メソッドではなく defineOutOfPageSlot メソッドを使用して定義します。詳しくは、ページ外クリエイティブをご覧ください。

ページ外フォーマットでは、多くの場合、配信可能なページとデバイスの種類が制限されます。こうした制限があるため、操作する前に、スロットが正常に定義されていることを確認する必要があります。詳しくは、アンカー広告を表示するのサンプルをご覧ください。

Fluid 広告スロット

ネイティブ広告の流動的な広告スロットは次のとおりです。

// Define a fluid ad slot that adjusts its height to fit the creative
// content being displayed.
googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

Fluid 広告スロットではサイズが固定されていません。Fluid 広告スロットは、広告のクリエイティブコンテンツに合わせて調整されます。可変広告スロットを定義するには、fluid サイズオプションを使用します。詳しくは、広告のサイズ設定と使用可能なサイズオプションをご覧ください。

ページレベルの設定を行う

一部の GPT 設定オプションは、特定の広告スロットではなくグローバルに適用されます。これをページレベルの設定と呼びます。

ページ単位の設定の例を次に示します。

// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");

// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();

このスニペットは次の 3 つの処理を行います。

ページ上のすべての広告スロットに適用されるページレベルのターゲティングオプションを設定します。
複数の広告スロットのリクエストを 1 つの広告リクエストにまとめる、シングルリクエストアーキテクチャ（SRA）モードを有効にします。SRA を使用するとパフォーマンスが向上します。また、競合相手の除外とロードブロッキングが確実に適用されるため、常に SRA を有効にすることをおすすめします。詳しくは、SRA の適切な使用をご覧ください。
広告リクエストの送信を可能にする、広告スロットに付加されたサービスを有効にします。

ディスプレイ広告

最後に、次のスニペットをページの <body> に追加します。

<div class="page-content centered">
  <div id="banner-ad" style="width: 728px; height: 90px"></div>
  <!--
  If the following status is displayed when the page is rendered, try
  loading the page in a new window or on a different device.
-->
  <h1 id="status">Anchor ads are not supported on this page.</h1>
  <!--
  Spacer used for example purposes only. This positions the native ad
  container below the fold to encourage scrolling.
-->
  <div class="spacer"></div>
  <div id="native-ad" class="native-slot"></div>
</div>
<script>
  googletag.cmd.push(() => {
    // Request and render all previously defined ad slots.
    googletag.display("banner-ad");
  });
</script>

ここでは、banner-ad と native-ad の 2 つの広告スロットコンテナを定義します。これらのコンテナの id 値は、上記の例で広告スロットを定義したときに指定した値に対応しています。

すべての広告スロットが定義された後、banner-ad を表示する呼び出しが行われます。SRA が有効になっているため、このディスプレイ呼び出しは 1 回限り、その時点までに定義されたすべての広告スロットをリクエストしてレンダリングします。SRA を有効にすると、必要に応じて広告の読み込みと更新、およびバッチ処理の動作をより詳細に制御できます。

完全なサンプルコード

このガイドのベースになっているサンプルページの完全なソースコードを次に示します。また、このページのインタラクティブデモもご覧ください。

JavaScript

TypeScript

はじめに

TypeScript を使用する