NonLinear 광고 처리하기

1. NonLinear 광고 설정하기

1-1. NonLineaer adContainer 설정하기

instreamAd.setNonLinearAdContainer()를 사용하여 NonLinear 광고가 렌더링될 adContainer를 설정할 수 있습니다.

nonLinearAdContainer

• nonLinear 광고가 렌더링될 HTML Element 영역

nonLinearExtraInfo

• optional, object
  • containerType
    • optional, "INNER" | "OUTER" (string)
    • nonLinear container 타입(NDA.RemindText 유형일 때만 설정)
  • isShareType
    • optional, boolean, default: false
    • 퍼가기 플레이어 여부

1-2. NonLinear 광고 정보 얻기

instreamAd.getNonLinearAdInfo()를 사용하여 NonLinear의 광고 정보를 얻을 수 있습니다.

interface NonLinearAdInfo {
  id: string;
  width: number;
  height: number;
  apiFramework: string;
  content: string;
  contentType: string;
  creativeViewUrl?: string;
  clickThrough?: string;
  clickTrackingUrls?: string[];
  offset: number;
  duration: number;
  started: boolean;
  complete: boolean;
}

2. NonLinear 광고 컨트롤하기

NonLinear 광고가 준비되었을 때 GfpAdEvent.NON_LINEAR_AD_START_READY 이벤트가 발생합니다.

파라미터로 전달되는 instreamAd객체를 사용하여 NonLinear 광고를 처리할 수 있습니다.

2-1. NonLinear 광고 그리기

instreamAd.showNonLinearAd()를 사용하여 NonLinear 광고를 노출할 수 있습니다.

2-2. NonLinear 광고 숨기기

instreamAd.hideNonLinearAd()를 사용하여 NonLinear 광고를 숨길 수 있습니다.

3. NonLinear 광고 처리 샘플 코드

videoAdScheduleManager.addEventListener(gfpInstream.GfpAdEvent.NON_LINEAR_AD_START_READY, function ({ ad }) {
  handleNonLinearAd(ad, adPlayerType);
});

var nonLinearAdContainerInfo = {
  innerContainer: document.getElementById('nonLinearInnerContainer'),
  outerContainer: document.getElementById('nonLinearOuterContainer'),
};

function handleNonLinearAd(ad, adPlayerType) {
  var nonLinearAdInfo = ad.getNonLinearAdInfo();
  var apiFramework = nonLinearAdInfo.apiFramework;
  var nonLinearAdContainer;

  var nonLinearExtraInfo = {
    isShareType: false, // 퍼가기 플레이어 여부
  };

  if (apiFramework === 'NDA.RemindBanner') {
    // RemindBanner 처리
    nonLinearAdContainer = nonLinearAdContainerInfo.innerContainer;
  } else if (apiFramework === 'NDA.RemindText') {
    // RemindText 처리
    if (adPlayerType === 'HTML5_PC') {
      // PC
      nonLinearAdContainer = nonLinearAdContainerInfo.innerContainer;
      nonLinearExtraInfo.containerType = 'INNER';
    } else if (adPlayerType === 'HTML5_MO') {
      if (window.matchMedia('(orientation: portrait)').matches) {
        // 모바일 세로 모드
        nonLinearAdContainer = nonLinearAdContainerInfo.outerContainer;
        nonLinearExtraInfo.containerType = 'OUTER';
      } else if (window.matchMedia('(orientation: landscape)').matches) {
        // 모바일 가로 모드
        nonLinearAdContainer = nonLinearAdContainerInfo.innerContainer;
        nonLinearExtraInfo.containerType = 'INNER';
      }
    }
  }

  ad.setNonLinearAdContainer(nonLinearAdContainer, nonLinearExtraInfo);
  ad.showNonLinearAd();
}