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>
  </body>
</html>

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

    次のコードを HTML ドキュメントの <head>。

    このコードは GPT ライブラリを https://securepubads.g.doubleclick.net/tag/js/gpt.js.ライブラリが キューに入れられたコマンドがすべて処理されます。 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"
    crossorigin="anonymous"
  ></script>
  <style></style>
</head>

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

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

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

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

    <ph type="x-smartling-placeholder">

    <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"
    crossorigin="anonymous"
  ></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 は、 使用します。

    <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ファイルを使用してください ad を追加し、ヘッダーのコードを、 使用するアド マネージャー ネットワークの広告枠を収益化できます。

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

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

    <head>
  <meta charset="utf-8">
  <title>Hello GPT</title>
  <script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></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 ファイルを保存し、ウェブブラウザで開きます。

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