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

Google パブリッシャータグ（GPT）は、 Google アドマネージャー

GPT を使用して、広告リクエストを動的に作成できます。 GPT では、広告ユニットコード、広告サイズ、カスタムターゲティングを設定してリクエストを作成し、ウェブページに広告を表示する。

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

GPT の使用を開始するために使用できるサンプルをいくつか紹介します。条件 GPT について詳しくは、サポートオプションをご覧ください。

テスト広告を表示する

次のサンプルは、次のサンプルをは GPT を使用して、Google のテストネットワークから汎用広告を読み込みます。

この例のコードの全文は、テスト広告を表示のサンプルページを確認します。

基本的な 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>

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>

広告スロットを定義する

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

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

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

<ph type="x-smartling-placeholder">
</ph> 広告ユニットのパスは /network-code/[parent-ad-unit-code/.../]ad-unit-code, ここで
- network-code は一意の ID です。広告ユニットが属するアドマネージャーネットワーク
- parent-ad-unit-code は、すべての親広告ユニットのコードです（最上位以外の広告ユニットに適用）
- ad-unit-code は、表示される広告ユニットのコードです。
広告ユニットのパスに含まれるすべての広告ユニットコードは、 formatting rules. アドマネージャー
```
<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>
```

広告を表示する場所を指定する

次のコードをページ内のどこに表示するかを指定します。 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>

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

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

注意: 広告が表示されない場合は、ページの <head> が、追加した <div> 要素の ID と一致しているページの <body>。

独自の広告を表示する

独自の広告を掲載するには、テストの表示hello-gpt.htmlファイルを使用してください ad を追加し、ヘッダーのコードを、使用するアドマネージャーネットワークの広告枠を収益化できます。

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

[ドキュメントヘッダー] セクションで提供されている広告タグコードをコピーして使用します。 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>

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

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

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

テスト広告を表示する

独自の広告を表示する

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