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

Googleアドマネージャーを使用する際に「Googleパブリッシャータグ(GPT)」を触る機会があったので、その際に調べたことをメモしておきます。

広告の表示

まずはシンプルに広告を表示する方法を試してみます。
基本的には公式のガイドに記載されている流れと同じです。

head内でGPTライブラリを読み込みます。

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

同じくhead内で広告スロットを定義します。

window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
  googletag
    .defineSlot(【adUnitPath】, [【width】, 【height】], 【ID】)
    .addService(googletag.pubads());
  googletag.enableServices();
});

defineSlot()の第一引数に広告ユニットのパス、第二引数に広告サイズ、第三引数に広告を埋め込む先のIDを指定します。

広告の埋め込み先を用意します。
idでdefineSlot()の第三引数で指定した値を設定します。

<div id="【ID】"></div>

最後に埋め込み先に広告を表示します。

googletag.cmd.push(function() {
  googletag.display(【ID】);
});

display()の引数に埋め込み先のIDを指定します。

これで広告の表示ができました。
以下のようにdivとiframeで出力されます。

<div id="ad01" data-google-query-id="XXXXXXXXXX">
  <div id="google_ads_iframe_【adUnitPath】_0__container__" style="border: 0pt none;">
    <iframe id="google_ads_iframe_【adUnitPath】_0" name="google_ads_iframe_【adUnitPath】_0" title="3rd party ad content" width="300" height="250" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" role="region" aria-label="Advertisement" tabindex="0" style="border: 0px; vertical-align: bottom;" data-load-complete="true" data-google-container-id="1"></iframe>
  </div>
</div>

埋め込み先のdiv内が置き換わる仕組みになっているので、静的ページでシンプルに埋め込むのみであれば埋め込み先のdiv内に広告表示のscriptを入れておくでも問題ないです。

<div id="【ID】">
<script>
googletag.cmd.push(function() {
  googletag.display(【ID】);
});
<script>
</div>

1ページ内に複数の広告の埋め込む場合は、広告スロットの定義や埋め込み部分を増やせばOKです。

window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
  googletag
    .defineSlot(【adUnitPath】, [【width】, 【height】], 【ID】)
    .addService(googletag.pubads());
  googletag
    .defineSlot(【adUnitPath2】, [【width2】, 【height2】], 【ID2】)
    .addService(googletag.pubads());
  googletag.enableServices();
});

<div id="【ID】"></div>
<div id="【ID2】"></div>

googletag.cmd.push(function() {
  googletag.display(【ID】);
  googletag.display(【ID2】);
});

広告のサイズ設定

マルチサイズ広告

広告のサイズを複数指定することもできます。

window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
  googletag
    .defineSlot(【adUnitPath】, [[300, 250], [728, 90], [750, 200]], 【ID】)
    .addService(googletag.pubads());
  googletag.enableServices();
});

この場合は300×250と728×90と750×200が設定されているため、このいずれかのサイズの広告が表示されることになりますが、埋め込み先のサイズに応じた一番大きな広告が表示されるというわけではないようです。
例えば埋め込み先のdivのサイズが1000×500の場合も、300×250の広告は表示されます。

レスポンシブ広告

ブラウザのビューポートのサイズに応じて、表示する広告サイズを指定することもできます。

window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
  var adSlot = googletag
    .defineSlot(【adUnitPath】, [[300, 250], [750, 200]], 【ID】)
    .addService(googletag.pubads());

  var mapping = googletag.sizeMapping()
    .addSize([992, 300], [])
    .addSize([768, 200], [750, 200])
    .addSize([0, 0], [300, 250])
    .build();
  adSlot.defineSizeMapping(mapping);
  googletag.enableServices();
});

上記の例だと、ビューポートが992×300以上の場合は広告配信なし、768×200以上の場合は750×200の広告表示、768×200未満の場合は300×250の広告表示になります。

addSize()がビューポートと広告サイズの指定で、第一引数がビューポートのサイズ、第二引数が広告サイズになります。

ビューポートの指定に0も設定できるようなので、高さの指定を0にすることで幅のみを使った設定も行えます。

window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
  var adSlot = googletag
    .defineSlot(【adUnitPath】, [[300, 250], [750, 200]], 【ID】)
    .addService(googletag.pubads());

  var mapping = googletag.sizeMapping()
    .addSize([992, 0], [])
    .addSize([768, 0], [750, 200])
    .addSize([0, 0], [300, 250])
    .build();
  adSlot.defineSizeMapping(mapping);
  googletag.enableServices();
});

これで先ほどの例から高さの制限がなくなり、ビューポート幅992以上の場合は広告配信なし、幅768以上の場合は750×200の広告表示、幅768未満の場合は300×250の広告が表示されます。

広告の表示タイミングの制御

サイト構成がSPAの場合やユーザーアクションの結果に応じて広告を表示する場合など、広告の表示タイミングを実装側で制御したい場合がありますが、そういった対応も可能です。
任意のタイミングで広告を表示・更新する方法として、refresh()を使用してみます。

refresh()で広告を表示するために、まずはdisplay()の呼び出しで広告の表示を行わないようにします。

window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
  googletag
    .defineSlot(【adUnitPath】, [【width】, 【height】], 【ID】)
    .addService(googletag.pubads());
  googletag.pubads().disableInitialLoad();
  googletag.enableServices();
});

disableInitialLoad()によってdisplay()での広告リクエストが無効になりますが、refresh()でのリクエストは可能です。

任意のタイミングでの表示とするため、ボタンクリック時にrefresh()を実行するようにします。

<button onclick="googletag.cmd.push(function() { googletag.pubads().refresh(); });">広告の表示・更新</button>

これでボタンクリックのタイミングで広告の表示・更新が行えるようになりました。

前述のレスポンシブ広告はページアクセスのタイミングのビューポートサイズに応じて広告の出し分けを行っていましたが、refresh()を組み合わせることで、ビューポートサイズ変更時に広告バナーを変更するということも可能です。
ただし、広告配信をしている状態から広告配信なしの状態には変更できなそうだったので、その点は注意が必要そうです。

任意のタイミングでの更新が必要でない場合、最初にdisplay()を呼び出さないようにした上で、任意のタイミングでdisplay()を呼び出すようにするだけでもよさそうです。

<button onclick="googletag.cmd.push(function() { googletag.display(【ID】); }); ">広告表示</button>

広告の破棄にはdestroySlots()を使用します。

<button onclick="googletag.cmd.push(function() { googletag.destroySlots(); });">広告の破棄</button>

destroySlots()で破棄した後に再度表示する場合、広告スロットの再定義が必要になります。

window.googletag = window.googletag || {cmd: []};

ad_define();

function ad_define() {
  googletag.cmd.push(function() {
    googletag
      .defineSlot(【adUnitPath】, [【width】, 【height】], 【ID】)
      .addService(googletag.pubads());
    googletag.enableServices();
  });
}

広告スロットの定義を関数にした上で、再表示のタイミングで関数を呼び出すようにします。

<button onclick="ad_define(); googletag.cmd.push(function() { googletag.display(【ID】); }); ">広告破棄後の再表示</button>

これで広告破棄後の再表示ができました。

広告スロットの定義を関数にした上で、再表示のタイミングで関数を呼び出すようにします。

<button onclick="ad_define(); googletag.cmd.push(function() { googletag.display(【ID】); }); ">広告破棄後の再表示</button>

これで広告破棄後の再表示ができました。

Googleパブリッシャーコンソール

Googleパブリッシャーコンソールを使うことで、GPTを使った広告配信のデバックができます。
広告配信を行っているページでデベロッパーツールを開き、consoleタブから下記を実行します。

googletag.openConsole()

もしくはページURLの末尾にクエリパラメータを追加します。

?google_console=1

これでページ下部にはページ内で配信している広告に関する情報が、広告表示部分には該当広告に関する情報が表示されます。