LG 시작하기

이 가이드에서는 PAL SDK를 LG webOS 애플리케이션에 통합하고, nonce를 요청하고, 광고 노출을 등록합니다.

기본 요건

이 가이드를 시작하기 전에 기본 LG webOS 앱을 만드세요. webOS CLI 또는 webOS Studio를 사용하여 앱을 설정할 수 있습니다. 자세한 내용은 첫 번째 앱 빌드 가이드를 참고하세요.

nonce 생성

'nonce'는 PAL이 NonceLoader를 사용하여 생성한 단일 암호화 문자열입니다. PAL SDK에서는 각 새 스트림 요청에 새로 생성된 nonce가 함께 제공되어야 합니다. 하지만 동일한 스트림 내에서 여러 광고 요청에 대해 nonce가 재사용될 수 있습니다.

webOS CLI 또는 webOS Studio를 사용하여 앱을 생성하면 webOSTV.js 종속 항목이 포함된 HTML 파일이 생성됩니다. PAL이 작동하려면 이 종속 항목이 필요합니다. 자세한 내용은 webOSTV.js 문서를 참고하세요.

index.html 파일에 CTV PAL SDK의 종속 항목을 포함합니다. webOSTV.js 스크립트 태그 다음에 스크립트 태그를 로드합니다. 예는 다음 index.html 파일을 참고하세요.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="LG app for PAL sdk"/>
  <title>LG app for PAL sdk</title>
  <link rel="stylesheet" href="style.css"/>
  <script src="path/to/webOSTVjs/webOSTV.js" charset="utf-8"></script>
  <script src="https://imasdk.googleapis.com/pal/sdkloader/pal_ctv.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <header>
    <hgroup>
      <h1>LG app for PAL sdk</h1>
    </hgroup>
  </header>
  <div id="placeholder-video"></div>
</body>
</html>

그런 다음 JavaScript 파일을 만들어 nonce를 생성합니다. 이 단계에는 NonceLoader 생성, NonceRequest 생성, NonceLoader.loadNonceManager()를 사용한 nonce 요청 등의 PAL 워크플로가 포함됩니다.

let videoElement;
let nonceLoader;
let managerPromise;
let nonceManager;
let playbackStarted = false;

/**
 * Initializes the PAL loader.
 */
function init() {
  videoElement = document.getElementById('placeholder-video');
  videoElement.addEventListener('mousedown', onVideoTouch);
  videoElement.addEventListener('touchstart', onVideoTouch);
  videoElement.addEventListener('play', function() {
    if (!playbackStarted) {
      sendPlaybackStart();
      playbackStarted = true;
    }
  });
  videoElement.addEventListener('ended', sendPlaybackEnd);
  videoElement.addEventListener('error', function() {
    // Handle video error.
    sendPlaybackEnd();
  });

  // PAL automatically determines whether limited ads apply based on the TCF
  // data found on the page. You can optionally use the `forceLimitedAds`
  // parameter to manually enable limited ads regardless of the TCF data.
  const consentSettings = new goog.pal.ConsentSettings();

  nonceLoader = new goog.ctv.pal.NonceLoader(consentSettings);

  generateNonce();
}

/**
 * Generates a nonce with sample arguments.
 *
 * The NonceRequest parameters set here are example parameters.
 * You should set your parameters based on your own app characteristics.
 */
function generateNonce() {
  const request = new goog.ctv.pal.NonceRequest();
  request.adWillAutoPlay = true;
  request.adWillPlayMuted = false;
  request.continuousPlayback = false;
  request.descriptionUrl = 'https://example.com';
  request.iconsSupported = true;
  request.playerType = 'Sample Player Type';
  request.playerVersion = '1.0';
  request.ppid = 'Sample PPID';
  request.sessionId = 'Sample SID';
  // Player support for VPAID 2.0, OMID 1.0, and SIMID 1.1
  request.supportedApiFrameworks = '2,7,9';
  request.url = 'https://developers.google.com/ad-manager/pal/ctv';
  request.videoHeight = 480;
  request.videoWidth = 640;

  managerPromise = nonceLoader.loadNonceManager(request);
  managerPromise
      .then(function(manager) {
        nonceManager = manager;
      })
      .catch((error) => {
        // Handle nonce generating error.
      });
}

window.addEventListener("load", function(event) {
  init();
});

광고 요청에 nonce 첨부

생성된 nonce를 사용하려면 광고 요청을 하기 전에 givn 매개변수와 nonce 값을 사용하여 광고 태그를 추가하세요.

  /**
   * The ad tag for your ad request, for example:
   * https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=
   *
   * For more sample ad tags, see https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/tags
   */
  const DEFAULT_AD_TAG = "Your ad tag";

  ...

  managerPromise = nonceLoader.loadNonceManager(request);
  managerPromise
      .then(function(manager) {
        nonceManager = manager;
        
        // Append the nonce to the ad tag URL.
        makeAdRequest(DEFAULT_AD_TAG + "&givn=" + nonceString);
        
      })

Google에서 광고를 요청하고 렌더링하는 경우 AdChoices 아이콘과 오버레이를 렌더링해야 합니다.

재생 이벤트 추적

마지막으로 플레이어에 다양한 이벤트 핸들러를 구현해야 합니다. 테스트 목적으로 버튼 클릭 이벤트에 이를 연결할 수 있지만 실제 구현에서는 적절한 플레이어 이벤트에 의해 트리거됩니다.

/**
 * Informs PAL that an ad click has occurred. How this function is
 * called will vary depending on your ad implementation.
 */
function sendAdClick() {
  if (nonceManager) {
    nonceManager.sendAdClick();
  }
}

/**
 * Handles the user touching on the video element, passing it to PAL.
 * @param {!TouchEvent|!MouseEvent} touchEvent
 */
function onVideoTouch(touchEvent) {
  if (nonceManager) {
    nonceManager.sendAdTouch(touchEvent);
  }
}

/** Informs PAL that playback has started. */
function sendPlaybackStart() {
  if (nonceManager) {
    nonceManager.sendPlaybackStart();
  }
}

/** Informs PAL that playback has ended. */
function sendPlaybackEnd() {
  if (nonceManager) {
    nonceManager.sendPlaybackEnd();
  }
}

구현에서 동영상 재생 세션이 시작되면 sendPlaybackStart를 한 번 호출해야 합니다. 동영상 재생 세션이 종료되면 sendPlaybackEnd을 호출해야 합니다. sendAdClick는 시청자가 광고를 클릭할 때마다 호출해야 합니다. sendAdTouch는 플레이어와의 모든 터치 상호작용에서 호출되어야 합니다.

(선택사항) 서드 파티 광고 서버를 통해 Google Ad Manager 신호 전송

Ad Manager에 대한 서드 파티 광고 서버의 요청을 구성합니다.

서버가 Ad Manager에 요청할 때 nonce를 포함하도록 서드 파티 광고 서버를 구성합니다. 다음은 서드 파티 광고 서버 내에서 구성된 광고 태그의 예입니다.

'https://pubads.serverside.net/gampad/ads?givn=%%custom_key_for_google_nonce%%&...'

자세한 내용은 Google Ad Manager 서버 측 구현 가이드를 참고하세요.

Ad Manager는 givn=를 찾아 nonce 값을 식별합니다. 서드 파티 광고 서버는 %%custom_key_for_google_nonce%%와 같은 자체 매크로를 지원하고 이를 이전 단계에서 제공한 nonce 쿼리 매개변수로 대체해야 합니다. 이 작업을 수행하는 방법에 관한 자세한 내용은 서드 파티 광고 서버의 문서를 참고하세요.

작업이 끝났습니다. 이제 PAL SDK에서 중간 서버를 거쳐 Google Ad Manager로 전파된 nonce 매개변수가 있어야 합니다. 이를 통해 Google Ad Manager를 통한 수익 창출을 개선할 수 있습니다.