본문으로 건너뛰기

스케줄러

1. 역할​

스케줄러를 통해서 아래 기능들을 사용할 수 있습니다.

2. 스케줄러 생성하기​

gfpInstream.createAdScheduleManager()를 통해 스케줄러를 생성합니다.

const videoAdScheduleManager = gfpInstream.createAdScheduleManager(props);

2-1. 생성 파라미터​

정보

HTML 계층은 아래와 같은 구조로 이루어져있습니다.

|-- BaseElement
    |-- ContentVideo // 콘텐츠 영역
    |-- AdVideoContainer // 광고 영역

baseElementId​

  • required, string
  • BaseElement의 id 값

contentVideo​

  • required, HTMLVideoElement
  • ContentVideo 영역의 HTMLVideoElement 레퍼런스

adVideoContainer​

  • required, HTMLDivElement
  • AdVideoContainer 영역의 HTMLDivElement 레퍼런스

adPlayerType​

  • required, string
  • 'HTML5_PC', 'HTML5_MO', 'SMART_TV' 중 선택
  • 광고 인터페이스 환경

adScheduleParam​

  • required, object
    • adSchduleId
      • required, string
      • 스케줄 아이디
    • contentDuration
      • required, number
      • 콘텐츠 재생시간 (second 단위)
    • adNoticeDuration
      • optional, number
      • 중간 광고 알림 문구 노출 시간 (second 단위)
    • contentsStartOffset
      • optional, number
      • 0초부터 시작되지 않는 특수한 콘텐츠인 경우 설정 (second 단위)

adSchedulePolicy​

  • required, object
    • pre
      • required, boolean
      • 전광고 요청 여부
    • mid
      • required, boolean
      • 중간광고 요청 여부
    • post
      • required, boolean
      • 후광고 요청 여부

customParam​

  • optional, object
  • 커스텀한 파라미터 전달 필요 시 사용
정보

(참조) 타입스크립트 인터페이스 코드

interface SchedulerProperties {
  baseElementId: string;
  contentVideo: HTMLVideoElement;
  adVideoContainer: HTMLDivElement;
  adPlayerType: 'HTML5_PC' | 'HTML5_MO' | 'SMART_TV';
  adScheduleParam: {
    adScheduleId: string;
    contentDuration: number;
    adNoticeDuration?: number;
    contentsStartOffset?: number;
  };
  adSchedulePolicy: {
    pre: boolean;
    mid: boolean;
    post: boolean;
  };
  customParam?: Record<string, string | string[] | number>;
}

2-2. AdDisplayContainer 초기화하기​

스케줄러를 생성하고 광고를 재생하기 전 반드시 AdDisplayContainer가 초기화되어야합니다.

AdDisplayContainer는 AdVideoContainer 하위에서 광고 비디오 영역을 준비하고 감싸는 역할을 합니다.

  • 방법 1. VideoAdScheduleManager 생성 후 AdDisplayContainer 초기화
videoAdScheduleManager.initializeAdDisplayContainer();
  • 방법 2. AdDisplayContainer 생성 및 초기화 이후 VideoAdScheduleManager 내 주입
const adDisplayContaierInfo = gfpInstream.createAdDisplayContainerInfo({
   adVideoContainer,
   contentVideo,
   adPlayerType
});
adDisplayContaienr.initialize();

videoAdScheduleManager.setAdDisplayContainerInfo(adDisplayContainerInfo);
정보

광고의 사운드 재생을 최대한 보장하기 위해 유저의 클릭 이벤트 스코프 내에서 초기화 함수가 호출되어야합니다.

자세한 내용은 사운드 재생를 참고해주세요.

3. 스케줄 요청하기​

인스트림 광고의 노출 시점은 광고 스케줄 정보를 통해서 결정됩니다. 광고 스케줄은 광고 서버에 요청하거나 직접 스케줄러에 주입할 수 있습니다.

3-1. 광고 서버에 요청하기​

videoAdScheduleManager.load()를 통해 광고 스케줄 정보를 서버에 요청합니다.

videoAdScheduleManager.load();

3-2. 직접 스케줄러에 주입하기​

videoAdScheduleManager.loadWithAdSchedule()를 통해 광고 스케줄 정보를 직접 스케줄러에 주입합니다.

videoAdScheduleManager.loadWithAdSchedule(adSchedule);

4. 광고 스케줄의 구성​

광고 스케줄은 복수의 AdBreak로 이루어져있으며, AdBreak는 복수의 AdSource로 이루어져있습니다.

  • AdBreak
    • 특정 시점에 재생되는 광고 묶음입니다.
    • 콘텐츠 재생 이전에 재생되는 광고는 전광고, 중간에 재생되는 광고는 중간광고, 콘텐츠 재생 완료 후에 재생되는 광고는 후광고라고 합니다.
  • AdSource
    • 통상적인 동영상 광고입니다.

5. 스케줄러 삭제하기​

destroy()를 호출하여 스케줄러를 삭제할 수 있습니다.

videoAdScheduleManager.destroy();