開始使用 LG

本指南將 PAL SDK 併入 LG webOS 應用程式、要求隨機碼，並註冊廣告曝光。

必要條件

開始閱讀本指南前，請先建立基本的 LG webOS 應用程式。您可以使用 webOS CLI 或 webOS Studio 設定應用程式。詳情請參閱「建構第一個應用程式」指南。

產生 Nonce

「隨機碼」是 PAL 使用 NonceLoader 產生的單一加密字串。PAL SDK 要求每個新的串流請求都必須附上新產生的隨機值。不過，在同一個串流中，隨機碼可能會重複用於多個廣告請求。

使用 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。這個步驟包括 PAL 工作流程，也就是建立 NonceLoader、建立 NonceRequest，然後使用 NonceLoader.loadNonceManager() 要求隨機值。

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 附加至廣告請求

如要使用產生的隨機值，請在發送廣告請求前，將 givn 參數和隨機值附加至廣告代碼。

  /**
   * 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 發出的請求中加入隨機碼。以下是在第三方廣告伺服器中設定的廣告代碼範例：

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

詳情請參閱 Google Ad Manager 伺服器端導入指南。

Ad Manager 會尋找 givn=，以找出隨機碼值。第三方廣告伺服器必須支援自己的巨集 (例如 %%custom_key_for_google_nonce%%)，並將其替換為您在上一個步驟中提供的隨機值查詢參數。如要進一步瞭解如何完成這項操作，請參閱第三方廣告伺服器的說明文件。

大功告成！您現在應該已透過中繼伺服器，將 Nonce 參數從 PAL SDK 傳播至 Google Ad Manager。這有助於透過 Google Ad Manager 提高營利。