선형 디스플레이 광고 사용 설정

HTML5용 IMA SDK는 선형 동영상 광고 외에도 선형 디스플레이 광고를 지원합니다. 선형 동영상 광고에 대한 자세한 내용은 동영상 솔루션 광고 개요를 참고하세요.

선형 디스플레이 광고를 사용 설정하면 광고 공간에 대한 수요가 추가로 발생할 수 있습니다. 선형 디스플레이 광고는 광고 공간을 두고 선형 동영상 광고와 경쟁하기 때문입니다. IMA는 선형 디스플레이 광고의 렌더링을 처리하지만 동영상 콘텐츠 감지를 설정해야 합니다. IMA 콘텐츠 감지 구현은 광고 플레이어와 동일한 출처 프레임에 콘텐츠 플레이어를 만드는지 또는 교차 출처 프레임에 광고 플레이어를 만드는지에 따라 다릅니다.

이 가이드에서는 선형 디스플레이 광고를 사용 설정하기 위한 콘텐츠 감지 설정, 콘텐츠 동영상 플레이어 변경, 콘텐츠 신호 수집 중지에 대해 설명합니다.

콘텐츠 감지 설정하기

광고 요청에 선형 디스플레이 광고를 사용 설정하려면 다음 단계를 따르세요.

동일한 출처

IMA SDK가 콘텐츠 플레이어와 동일한 출처를 공유하는 경우 다음 중 하나를 실행합니다.

권장 동영상 플레이어를 AdsManagerLoadedEvent.getAdsManager() 호출에 전달합니다. getAdsManager()를 사용하면 currentTime 속성이 포함된 객체를 전달할 수 있지만 콘텐츠 감지를 지원하려면 HTMLVideoElement 인스턴스를 getAdsManager()에 전달해야 합니다.

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  // Set any AdsRenderingSettings here.
  const adsRenderingSettings = new google.ima.AdsRenderingSettings();

  // Get the ads manager.
  adsManager =
    adsManagerLoadedEvent.getAdsManager(videoElement, adsRenderingSettings);
}

AdsManagerLoadedEvent.getAdsManager() 호출 중에 콘텐츠 플레이어를 제공할 수 없는 경우 동영상 플레이어로 AdsManager.configureAdsManager() 메서드를 호출합니다. 콘텐츠 감지가 작동하려면 HTMLVideoElement여야 합니다.

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager =
    adsManagerLoadedEvent.getAdsManager(null);
  adsManager.configureAdsManager(videoElement);
}

콘텐츠 감지를 설정하지 않으면 Google 광고 서버에서 선형 디스플레이 광고 게재를 중지할 수 있습니다.

콘텐츠 플레이어가 IMA SDK를 로드하는 동일한 출처에 있는 경우 콘텐츠 플레이어 변경 또는 콘텐츠 신호 수집 중지를 처리하기 위해 IMA 구현을 변경할 필요가 없습니다.

교차 출처

IMA SDK가 콘텐츠 플레이어와 교차 출처인 경우 IMA는 CrossOriginProxy 클래스를 통해 콘텐츠 감지 신호를 수집할 수 있습니다. 이 클래스를 사용하면 IMA SDK가 올바른 선형 디스플레이 광고 게재위치를 확인하고 동영상 콘텐츠의 주제와 관련된 신호를 수집할 수 있습니다. 교차 도메인 iframe에 IMA SDK를 배치하는 경우 CrossOriginProxy 클래스를 구현해야 합니다.

CrossOriginProxy 클래스를 구현하지 않고 콘텐츠 플레이어를 IMA SDK에 교차 출처로 계속 배치하면 Google 광고 서버에서 선형 디스플레이 광고 게재를 중지할 수 있습니다.

CrossOriginProxy 클래스를 앱에 로드하려면 다음 단계를 따르세요.

HTML 파일에서 ima_proxy.js 파일을 가져옵니다.

<html>
  <head>
    <title>IMA HTML5 cross-origin iframe sample</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="mainContainer">
      <div id="content">
        <video id="contentElement">
          <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
        </video>
      </div>

      <!-- The cross-origin iframe where you load IMA SDK and play ads. -->
      <iframe id="adContainerIframe"
              src="https://cross-origin-domain.com/ads-sandbox.html" >
      </iframe>

    </div>
    <button id="playButton">Play</button>

    <script src="//imasdk.googleapis.com/js/sdkloader/ima_proxy.js"></script>
    <script src="main.js"></script>
  </body>
</html>

main.js 파일에서 CrossOriginProxy 인스턴스를 가져옵니다.
페이지 또는 앱에 광고를 표시하는 모든 동영상 플레이어의 배열을 사용하여 setVideoElements() 메서드를 호출합니다.

광고를 요청하기 전에 setVideoElements() 호출을 사용하여 동영상 요소를 CrossOriginProxy 인스턴스에 전달해야 합니다. 다음 예에서는 단일 콘텐츠 동영상 플레이어가 포함된 배열을 전달합니다.

// On window load attach an event to the play button click
// that triggers playback of the content video element.
window.addEventListener('load', function(event) {
videoContent = document.getElementById('contentElement');
ima.crossOriginProxy.getInstance().setVideoElements([videoContent]);
playButton = document.getElementById('playButton');
playButton.addEventListener('click', playAds);
});

콘텐츠 동영상 플레이어 변경

다른 콘텐츠 동영상 플레이어로 변경하거나 추가하는 경우 setVideoElements() 메서드에 새 배열을 전달해야 합니다. 새로운 setVideoElements() 호출을 하면 IMA는 새 콘텐츠 플레이어에 대한 신호를 수집하기 시작하고 이전 호출에서 전달된 콘텐츠 플레이어에 대한 신호 수집을 중지합니다.

다음 예에서는 새 동영상 요소를 CrossOriginProxy 클래스에 전달합니다.

function createNewContentPlayer(newPlayerId) {
newVideoContent = document.getElementById(newPlayerId);
ima.crossOriginProxy.getInstance().setVideoElements([newVideoContent]);

// Continue with any other steps needed to initiate the content player
}

광고가 완료되면 신호 수집 중지

광고 재생을 완료하고 AdsLoader.destroy() 메서드를 호출할 때 빈 배열로 setVideoElements() 메서드도 호출해야 합니다. 빈 배열로 setVideoElements() 호출을 실행하면 IMA가 보유한 콘텐츠 플레이어에 대한 참조가 삭제되고 메모리 누수 문제가 방지됩니다.