開始使用

產生 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 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 請求。

設定第三方廣告伺服器，將 Nonce 加入伺服器的 向 Ad Manager 發出請求以下是 第三方廣告伺服器：

'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 傳播 Nonce 參數， 或是透過中介伺服器 傳送至 Google Ad Manager這樣一來， 透過 Google Ad Manager 賺取更多收益