시작하기

nonce 생성

'nonce' NonceLoader를 사용하여 PAL에서 생성한 암호화된 단일 문자열입니다. 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 storageConsent = true;
let playbackStarted = false;

/**
 * A placeholder for the publisher's own method of obtaining user
 * consent, either by integrating with a CMP or based on other
 * methods the publisher chooses to handle storage consent.
 * @return {boolean} Whether storage consent has been given.
 */
function getConsentToStorage() {
  return storageConsent;
}

/**
 * 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);

  // The default value for `allowStorage` is false, but can be
  // changed once the appropriate consent has been gathered.
  const consentSettings = new goog.pal.ConsentSettings();
  consentSettings.allowStorage = getConsentToStorage();

  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);
      })

재생 이벤트 추적

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

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에 요청하는 것입니다 다음은 외부 애드 서버인

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

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

Ad Manager는 nonce 값을 식별하기 위해 givn=를 찾습니다. 타사 광고 서버는 자체 매크로를 지원해야 함(예: %%custom_key_for_google_nonce%%)하고 nonce 쿼리 매개변수로 바꿉니다. 사용할 수 있습니다 이 작업을 수행하는 방법에 대해 자세히 알아보기 외부 광고 서버 설명서에 나와 있습니다.

작업이 끝났습니다. 이제 PAL SDK에서 nonce 매개변수가 전파되어야 합니다. 중간 서버를 통해 전달되고 Google Ad Manager로 전달됩니다. 이렇게 하면 Google Ad Manager를 통해 수익을 창출할 수 있습니다