시작하기

nonce 생성

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

PAL SDK를 사용하여 nonce를 생성하려면 HTML 파일을 만들고 다음을 추가하세요.

pal.html

<html>
<head></head>
<body>
  <div id="placeholder-video"></div>
  <button id="generate-nonce">Generate Nonce</button>
  <script src="//imasdk.googleapis.com/pal/sdkloader/pal.js"></script>
  <script src="pal.js"></script>
</body>
</html>

그런 다음 JavaScript 파일을 만들고 다음을 추가합니다.

pal.js

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

/**
 * Initializes the PAL loader.
 */
function init() {
  const videoElement = document.getElementById('placeholder-video');
  videoElement.addEventListener('mousedown', (e) => void onVideoTouch(e));
  videoElement.addEventListener('touchstart', (e) => void onVideoTouch(e));
  videoElement.addEventListener('play', () => {
    if (!playbackStarted) {
      sendPlaybackStart();
      playbackStarted = true;
    }
  });
  videoElement.addEventListener('ended', () => void sendPlaybackEnd());
  videoElement.addEventListener('error', () => {
    console.log("Video error: " + videoElement.error.message);
    sendPlaybackEnd();
  });

  document.getElementById('generate-nonce')
      .addEventListener('click', generateNonce);

  // 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.pal.NonceLoader(consentSettings);
}

/**
 * Generates a nonce with sample arguments and logs it to the console.
 *
 * 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.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/html5';
  request.videoHeight = 480;
  request.videoWidth = 640;

  managerPromise = nonceLoader.loadNonceManager(request);
  managerPromise
      .then((manager) => {
        nonceManager = manager;
        console.log('Nonce generated: ' + manager.getNonce());
      })
      .catch((error) => {
        console.log('Error generating nonce: ' + error);
      });
}

init();

광고 요청에 nonce 첨부

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

pal.js

  /**
   * 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((manager) => {
        nonceManager = manager;
        console.log('Nonce generated: ' + manager.getNonce());
        
        // Append the nonce to the ad tag URL.
        makeAdRequest(DEFAULT_AD_TAG + "&givn=" + nonceString);
      })

Google의 광고를 요청하고 렌더링하는 경우 AdChoices 아이콘과 오버레이를 렌더링해야 합니다. VAST 응답을 파싱하고 아이콘을 렌더링하는 방법에 관한 자세한 내용은 AdChoices 아이콘 및 오버레이를 참고하세요.

재생 이벤트 추적

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

pal.js

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

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

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

/** Informs PAL that playback has ended. */
function sendPlaybackEnd() {
  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를 통한 수익 창출을 개선할 수 있습니다.