広告の読み込みと更新を制御する

基本的な概念概念の例では、Google パブリッシャータグ（GPT）の display() メソッドを使用して広告スロットを登録して表示します。ただし、広告コンテンツがいつ読み込まれるかをより正確に制御するために、これらのアクションを分離することが望ましい、または必要になる場合があります。たとえば、同意管理プラットフォームと連携する場合や、ユーザーアクションの結果として広告コンテンツをリクエストする場合などです。

このガイドでは、広告コンテンツの読み込みを管理し、オンデマンドで新しい広告コンテンツを取得するための GPT の仕組みについて説明します。この例の完全なコードは、イベントベースのリクエストのサンプルページにあります。

広告の読み込みを制御する

デフォルトでは、display() メソッドの動作は、広告のコンテンツを登録、リクエスト、レンダリングすることです。広告コンテンツの自動リクエストとレンダリングは、PubAdsService.disableInitialLoad() メソッドで無効にできます。

初期読み込みが無効になっている場合、display() の呼び出しでは広告スロットのみが登録されます。2 回目のアクションが行われるまで、広告コンテンツは読み込まれません。これにより、広告リクエストが行われるタイミングを厳密に制御できます。

意図しない広告リクエストが行われないようにするため、サービスを有効にする前と display() を呼び出す前に、disableInitialLoad() を呼び出してください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Request GPT ads based on events." />
    <title>Event-based ad requests</title>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(() => {
        // Define the ad slot.
        googletag
          .defineSlot("/6355419/Travel", [728, 90], "div-for-slot")
          .setTargeting("test", "event")
          .addService(googletag.pubads());

        // Disable initial load.
        // This prevents GPT from automatically fetching ads when display is called.
        googletag.pubads().disableInitialLoad();
        googletag.enableServices();
      });
    </script>
    <style></style>
  </head>
  <body>
    <div id="div-for-slot" style="width: 300px; height: 250px"></div>
    <script>
      googletag.cmd.push(() => {
        // Register the ad slot.
        // An ad will not be fetched until refresh is called.
        googletag.display("div-for-slot");

        // Register click event handler.
        document.getElementById("showAdButton").addEventListener("click", () => {
          googletag.cmd.push(() => {
            googletag.pubads().refresh();
          });
        });
      });
    </script>
  </body>
</html>

この例では、初期読み込みが無効になっているため、display() が呼び出されても、広告リクエストは行われず、広告コンテンツもレンダリングされません。スロットは広告を受け入れて表示する準備ができていますが、スロットが更新されるまで広告リクエストは行われません。

更新

PubAdsService.refresh() メソッドは、スロットに新しい広告コンテンツを取り込むために使用されます。このメソッドは、disableInitialLoad() を理由にまだコンテンツを読み込んでいないスロットに対して使用したり、すでにデータが入力されているスロットのコンテンツを置き換えたりするのに使用できます。ただし、更新できるのは、display() を呼び出して登録されたスロットのみです。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Request GPT ads based on events." />
    <title>Event-based ad requests</title>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(() => {
        // Define the ad slot.
        googletag
          .defineSlot("/6355419/Travel", [728, 90], "div-for-slot")
          .setTargeting("test", "event")
          .addService(googletag.pubads());

        // Disable initial load.
        // This prevents GPT from automatically fetching ads when display is called.
        googletag.pubads().disableInitialLoad();
        googletag.enableServices();
      });
    </script>
    <style></style>
  </head>
  <body>
    <div id="div-for-slot" style="width: 300px; height: 250px"></div>
    <button id="showAdButton">Show/Refresh Ad</button>
    <script>
      googletag.cmd.push(() => {
        // Register the ad slot.
        // An ad will not be fetched until refresh is called.
        googletag.display("div-for-slot");

        // Register click event handler.
        document.getElementById("showAdButton").addEventListener("click", () => {
          googletag.cmd.push(() => {
            googletag.pubads().refresh();
          });
        });
      });
    </script>
  </body>
</html>

この例のユーザーが [広告を表示/更新] ボタンをクリックすると、refresh() メソッドが呼び出されます。これにより、新しい広告コンテンツを取得して登録済みのスロットに読み込むリクエストがトリガーされ、既存のコンテンツがすべて上書きされます。

上の例では、refresh() メソッドはパラメータなしで呼び出されています。これにより、登録済みのすべての広告スロットが更新されます。ただし、スロットの配列を refresh() メソッドに渡すことで、特定の広告スロットを更新することもできます。例については、広告スロットを更新するをご覧ください。

おすすめの方法

refresh() を使用する際は、いくつかのベストプラクティスに従ってください。

あまり頻繁に更新しないでください。

広告スロットの更新頻度が速すぎると、広告リクエストがスロットル調整されることがあります。これを防ぐには、30 秒に 1 回を超える頻度でスロットを更新しないようにしてください。
clear() を不必要に呼び出さないでください。

広告スロットを更新するときは、最初に PubAdsService.clear() を呼び出さないでください。refresh() は、以前に広告コンテンツが読み込まれたかどうかにかかわらず、指定したスロットのコンテンツを置換するため、これは不要です。refresh() を呼び出す直前に clear() を呼び出すと、ユーザーに空のスロットが表示される時間が増加します。

視認可能な広告スロットのみ更新する

refresh() を使用して表示できない広告スロットのコンテンツを置き換えると、アクティブビュー率が大幅に低下する場合があります。以下の例のように、ImpressionViewableEvent を使用すると、広告スロットが視認可能になったタイミングを特定できます。

googletag.cmd.push(function() {
  var REFRESH_KEY = 'refresh';
  var REFRESH_VALUE = 'true';

  googletag.defineSlot('/6355419/Travel',[728, 90], 'div-for-slot')
      .setTargeting(REFRESH_KEY, REFRESH_VALUE)
      .setTargeting('test', 'event')
      .addService(googletag.pubads());

  // Number of seconds to wait after the slot becomes viewable.
  var SECONDS_TO_WAIT_AFTER_VIEWABILITY = 60;

  googletag.pubads().addEventListener('impressionViewable', function(event) {
    var slot = event.slot;
    if (slot.getTargeting(REFRESH_KEY).indexOf(REFRESH_VALUE) > -1) {
      setTimeout(function() {
        googletag.pubads().refresh([slot]);
      }, SECONDS_TO_WAIT_AFTER_VIEWABILITY * 1000);
    }
  });

  googletag.enableServices();
});