Google パブリッシャー タグを使ってみる

Google パブリッシャー タグ（GPT）は、Google アド マネージャー向けの広告タグのライブラリです。

GPT を使用すると、広告リクエストを動的に作成できます。 GPT は、広告ユニットコード、広告サイズ、カスタム ターゲティングなどの重要な情報の取得、リクエストの作成、ウェブページへの広告表示を行います。

GPT について詳しくは、アド マネージャー ヘルプセンターをご覧ください。

ここでは、GPT を初めて使用する場合に使用できるサンプルを紹介します。GPT についてさらにサポートが必要な場合は、サポート オプションをご覧ください。

テスト広告を表示する

次の例では、GPT を使用して Google のテスト ネットワークから汎用広告を読み込むテストページの作成手順を示しています。

この例のコード全体は、テスト広告を表示するサンプル ページにあります。

  1. 基本的な HTML ドキュメントを作成する

    テキスト エディタで、hello-gpt.html という名前の基本的な HTML ドキュメントを作成します。

    <!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Display a fixed-sized test ad." />
    <title>Display a test ad</title>
    <style></style>
  </head>
  <body>
    <script>
      googletag.cmd.push(() => {
        // Request and render an ad for the "banner-ad" slot.
        googletag.display("banner-ad");
      });
    </script>
  </body>
</html>

  2. GPT ライブラリを読み込む

    HTML ドキュメントの <head> に次の行を追加して、GPT ライブラリを読み込みます。

    このコードは、https://securepubads.g.doubleclick.net/tag/js/gpt.js から GPT ライブラリを読み込みます。ライブラリが完全に読み込まれると、googletag オブジェクト内のキューに追加されたコマンドがすべて処理されます。

    <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  <style></style>
</head>

  3. 広告スロットを定義する

    広告スロットを定義し、googletag.enableServices() メソッドを使用して GPT を初期化します。

    このコードは、まず googletag オブジェクトが使用可能であることを確認し、次に、広告スロットを作成するコマンドをキューに入れて、GPT を有効にします。

    この例の広告スロットは、パス /6355419/Travel/Europe/France/Paris で指定された広告ユニットから 300x250 サイズの広告を読み込みます。広告はページ本文の <div id="banner-ad"> 要素に表示され、次に追加されます。

    <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  <script>
    window.googletag = window.googletag || { cmd: [] };

    googletag.cmd.push(() => {
      // Define an ad slot for div with id "banner-ad".
      googletag
        .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "banner-ad")
        .addService(googletag.pubads());

      // Enable the PubAdsService.
      googletag.enableServices();
    });
  </script>
  <style></style>
</head>

  4. 広告が表示される場所を指定する

    HTML ドキュメントの <body> に次のコードを追加して、ページ上で広告を表示する場所を指定します。

    この <div> の ID は、広告スロットの定義時に指定された ID と一致します。

    <body>
  <div id="banner-ad" style="width: 300px; height: 250px"></div>
  <script>
    googletag.cmd.push(() => {
      // Request and render an ad for the "banner-ad" slot.
      googletag.display("banner-ad");
    });
  </script>
</body>

  5. テストページをプレビューする

    hello-gpt.html ファイルを保存して、ウェブブラウザで開きます。読み込みが完了すると、ウェブページの本文にテスト広告が表示されます。

ご自身の広告を表示する

独自の広告を表示するには、テスト広告を表示するの hello-gpt.html ファイルを使用し、ヘッダー内のコードをお客様のアド マネージャー ネットワークの広告枠を指定するコードに置き換えます。

  1. 表示する広告ユニットの広告タグを生成します。広告タグの生成について詳しくは、アド マネージャー ヘルプセンターをご覧ください。

  2. [ドキュメント ヘッダー] セクションで提供されている広告タグコードをコピーし、それを使用して HTML ドキュメントの <head> 内の対応するコードを置き換えます。

    <head>
 <meta charset="utf-8">
 <title>Hello GPT</title>
 <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
 <script>
   window.googletag = window.googletag || {cmd: []};
   googletag.cmd.push(function() {
     googletag
         .defineSlot(
             'ad-unit-path', [width, height], 'div-id')
         .addService(googletag.pubads());
     googletag.enableServices();
   });
 </script>
</head>

  3. 更新した hello-gpt.html ファイルを保存して、ウェブブラウザで開きます。

次へ
基本的な使用方法をご覧ください