이 페이지는 Cloud Translation API를 통해 번역되었습니다.

IMA DAI SDK 시작하기

IMA SDK를 사용하면 멀티미디어 광고를 웹사이트와 앱에 쉽게 통합할 수 있습니다. IMA SDK는 VAST 호환 광고 서버에서 광고를 요청하고, 앱에서 광고 재생을 관리할 수 있습니다. IMA DAI SDK를 사용하면 앱에서 광고 및 콘텐츠 동영상(VOD 또는 라이브 콘텐츠)의 스트림을 요청합니다. 그러면 SDK가 결합된 동영상 스트림을 반환하므로 앱 내에서 광고와 콘텐츠 동영상 간의 전환을 관리할 필요가 없습니다.

관심 있는 DAI 솔루션 선택하기

전체 서비스 DAI

이 가이드에서는 IMA DAI SDK를 간단한 동영상 플레이어 앱에 통합하는 방법을 설명합니다. 완료된 샘플 통합을 보거나 따라 하려면 GitHub에서 간단한 예를 다운로드하세요.

IMA DAI 개요

IMA DAI 구현에는 이 가이드에 설명된 두 가지 주요 SDK 구성요소가 필요합니다.

StreamRequest—VODStreamRequest 또는 LiveStreamRequest: 스트림 요청을 정의하는 객체입니다. 스트림 요청은 VOD 또는 실시간 스트림일 수 있습니다. 요청에서 콘텐츠 ID, API 키 또는 인증 토큰, 기타 매개변수를 지정합니다.
StreamManager: 동적 광고 삽입 스트림 및 DAI 백엔드와의 상호작용을 처리하는 객체입니다. 또한 스트림 관리자는 추적 핑을 처리하고 스트림 및 광고 이벤트를 게시자에게 전달합니다.

기본 요건

빈 파일 3개
- dai.html
- dai.css
- dai.js
컴퓨터에 설치된 Python 또는 테스트에 사용할 웹 서버

개발 서버 시작

IMA DAI SDK는 로드되는 페이지와 동일한 프로토콜을 사용하여 종속 항목을 로드하므로 웹 서버를 사용하여 앱을 테스트해야 합니다. 로컬 개발 서버를 시작하는 가장 간단한 방법은 Python의 내장 서버를 사용하는 것입니다.

명령줄을 사용하여 index.html 파일이 있는 디렉터리에서 다음을 실행합니다.
```
python -m http.server 8000
```
참고: http.server은 Python 3.x에서만 사용할 수 있습니다.
웹브라우저에서 http://localhost:8000/으로 이동합니다.

Apache HTTP 서버와 같은 다른 웹 서버도 사용할 수 있습니다.

간단한 동영상 플레이어 만들기

먼저 dai.html을 수정하여 간단한 HTML5 동영상 요소와 클릭연결에 사용할 div를 만듭니다. 또한 dai.css 및 dai.js 파일을 로드하는 데 필요한 태그를 추가하고 hls.js 동영상 플레이어를 가져옵니다. 그런 다음 dai.css를 수정하여 페이지 요소의 크기와 위치를 지정합니다. 마지막으로 dai.js에서 스트림 요청 정보를 저장할 변수와 페이지 로드 시 실행할 initPlayer() 함수를 정의합니다.

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA DAI SDK DAI Demo (HLS.JS)</h2>
    <video id="video"></video>
    <div id="ad-ui"></div>
</body>
</html>

dai.css

#video,
#ad-ui {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#ad-ui {
  cursor: pointer;
}

dai.js

var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
}

IMA DAI SDK 로드

그런 다음 dai.html의 스크립트 태그를 사용하여 dai.js의 태그 앞에 IMA 프레임워크를 추가합니다.

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>

StreamManager 초기화 및 스트림 요청

광고 세트를 요청하려면 DAI 스트림 요청 및 관리를 담당하는 ima.dai.api.StreamManager를 만듭니다. 생성자는 동영상 요소를 가져오고 결과 인스턴스는 광고 UI 요소를 사용하여 광고 클릭을 처리합니다.

그런 다음 스트림을 요청하는 함수를 정의합니다. 이 예에는 각각 VODStreamRequest 및 LiveStreamRequest 인스턴스를 만든 다음 streamRequest 매개변수를 사용하여 streamManager.requestStream()를 호출하는 VOD 및 라이브 스트림용 함수가 포함되어 있습니다. 실시간 스트림의 경우 시간이 지정된 메타데이터 이벤트를 수신 대기하고 이벤트를 StreamManager에 전달하는 핸들러도 추가해야 합니다. 사용 사례에 맞게 코드에 주석을 달거나 주석 처리를 삭제할 수 있습니다. 두 메서드 모두 선택적 API 키를 사용합니다. 보호된 스트림을 사용하는 경우 DAI 인증 키를 생성해야 합니다.

이 예의 두 스트림은 모두 보호되지 않으므로 apiKey가 사용되지 않습니다.

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in the metadata, pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null);
}

function requestVODStream(cmsId, videoId, apiKey) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

스트림 이벤트 처리

마지막으로 주요 동영상 이벤트에 대한 이벤트 리스너를 구현해야 합니다. 이 간단한 예에서는 onStreamEvent() 함수를 호출하여 LOADED, ERROR, AD_BREAK_STARTED, AD_BREAK_ENDED 이벤트를 처리합니다. 이 함수는 스트림 로드 및 오류를 처리할 뿐만 아니라 SDK에 필요한 광고 재생 중에 플레이어 컨트롤을 사용 중지합니다. 스트림이 로드되면 동영상 플레이어는 loadUrl() 함수를 사용하여 제공된 URL을 로드하고 재생합니다.

또한 광고 시간 중에 IMA가 일시중지될 때 사용자가 재생을 재개할 수 있도록 동영상 요소의 pause 및 start 이벤트에 관한 이벤트 리스너를 설정하는 것이 좋습니다.

DAI를 사용하려면 맞춤 플레이어에서 샘플 코드와 같이 실시간 스트림의 ID3 이벤트를 IMA DAI SDK에 전달해야 합니다.

dai.js

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     google.ima.dai.api.StreamEvent.Type.ERROR,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
    onStreamEvent,
    false);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

function onStreamPause() {
  console.log('paused');
  if (isAdBreak) {
    videoElement.controls = true;
    adUiElement.style.display = 'none';
  }
}

function onStreamPlay() {
  console.log('played');
  if (isAdBreak) {
    videoElement.controls = false;
    adUiElement.style.display = 'block';
  }
}

작업이 끝났습니다. 이제 IMA DAI SDK를 사용하여 광고를 요청하고 표시합니다. 고급 SDK 기능에 관한 자세한 내용은 다른 가이드 또는 GitHub 샘플을 참조하세요.