광고 로드 관리 및 새로고침

시작하기 및 기본 개념 예에서 Google 게시자 태그는 (GPT) 라이브러리의 display() 메서드가 사용됨 광고 슬롯을 등록하고 표시할 수 있습니다. 하지만 광고 콘텐츠가 로드되는 시점을 더 정확하게 제어하기 위해 이러한 작업을 분리하는 것이 좋거나 필요할 수 있습니다. 예를 들어 동의 관리 플랫폼을 사용하거나 사용자 작업의 결과로 광고 콘텐츠를 요청하는 경우입니다.

이 가이드에서는 광고 콘텐츠의 로드를 제어하고 주문형으로 새 광고 콘텐츠를 가져올 수 있습니다. 전체 코드 이 예의 경우 이벤트 기반 요청에서 확인할 수 있습니다. 샘플 페이지로 이동합니다.

광고 로드 제어

기본적으로 display() 메서드의 동작은 광고 콘텐츠를 광고 슬롯에 등록, 요청, 렌더링하는 것입니다. 자동 광고 콘텐츠 요청 및 렌더링을 비활성화하려면 PubAdsService.disableInitialLoad() 메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다.

초기 로드가 사용 중지된 경우 display() 호출은 광고 슬롯만 등록합니다. 두 번째 작업을 실행할 때까지 광고 콘텐츠가 로드되지 않습니다. 이렇게 하면 광고 요청이 이루어지는 시기를 정확하게 제어할 수 있습니다.

의도하지 않은 광고 요청을 방지하려면 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"
      crossorigin="anonymous"
    ></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");
      });
    </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"
      crossorigin="anonymous"
    ></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()를 사용할 때 따라야 할 몇 가지 권장사항이 있습니다. 을 준수해야 합니다.

  1. 너무 빨리 새로고침하지 마세요.

    광고 슬롯을 너무 빨리 새로고침하면 광고 요청이 제한될 수 있습니다. 이를 방지하려면 슬롯을 30초마다 한 번 이상 새로고침하지 마세요. 초 단위입니다.

  2. 불필요하게 clear()를 호출하지 않음

    광고 슬롯을 새로고침할 때는 먼저 PubAdsService.clear()를 호출하지 마세요. 이 작업은 필요하지 않습니다. refresh()는 슬롯 크기와 상관없이 지정된 슬롯의 콘텐츠를 광고 콘텐츠가 이전에 로드된 적이 있는지 여부 refresh()를 호출하기 직전에 clear()를 호출하면 빈 슬롯이 사용자에게 표시되는 시간이 늘어날 뿐입니다.

  3. 조회 가능한 광고 슬롯만 새로고침

    refresh()를 사용하여 볼 수 없는 광고 슬롯의 콘텐츠 대체 ActiveView 비율을 크게 낮출 수 있습니다 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();
});