例で基本を学習

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

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

GPT ライブラリを読み込む

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

<script
  async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"
></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 広告スロット

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

// Define a fluid ad slot that fills the width of the enclosing column and
// adjusts the height as defined by the native creative delivered.
googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

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

ページレベルの設定を構成する

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

ページレベルの設定を構成する方法の例を次に示します。

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

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

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

ページ上のすべての広告スロットに適用されるページレベルのターゲティングオプションを設定します。
シングルリクエストアーキテクチャ（SRA）モードをオンにします。これにより、複数の広告スロットに対するリクエストが 1 つの広告リクエストにまとめられます。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 を使用する