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 ファイルを保存して、ウェブブラウザで開きます。

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