本頁面由 Cloud Translation API 翻譯而成。

開始使用 Tizen (Samsung)

如要查看使用 PAL 產生 Nonce 的範例應用程式，請從 GitHub 下載 CTV (Tizen) 範例。

本指南將 PAL SDK 納入 Samsung (Tizen) 應用程式中，並記錄廣告曝光

必要條件

開始本指南之前，您必須建立基本的 Tizen 應用程式。別擔心！您可以使用 Tizen IDE 可讓您設定應用程式。在此觀看此影片：開始使用 Tizen 瞭解詳情

產生 Nonce

一個「nonce」是 PAL 使用 NonceLoader 產生的單一加密字串。 PAL SDK 規定每個新的串流請求都必須搭配新的產生的 Nonce但是，一個 Nonce 值可重複用於同一個串流。

為應用程式建立 HTML 檔案。在 HTML 檔案中加入 webapis.js 依附元件。PAL 需要此依附元件才能運作。詳情請參閱 Samsung WebApi 說明文件。

在 index.html 檔案中加入 CTV PAL SDK 的依附元件。載入 webapis.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">
 <script src="$WEBAPIS/webapis/webapis.js"></script>
 <script src="//imasdk.googleapis.com/pal/sdkloader/pal_ctv.js"></script>
 <script src="app.js"></script>
</head>
<body>
  <header>
    <hgroup>
      <h1>Tizen app for PAL sdk</h1>
    </hgroup>
  </header>
  <div id="placeholder-video"></div>
</body>
</html>

為了讓 PAL 垃圾訊息信號正常運作，您必須擁有特定的 Tizen 權限。撰寫 config.xml 檔案包含以下權限宣告：

"http://tizen.org/privilege/internet"
"http://tizen.org/privilege/system"
"http://tizen.org/privilege/telephony"
"http://tizen.org/privilege/tv.inputdevice"
"http://developer.samsung.com/privilege/network.public"
"http://developer.samsung.com/privilege/productinfo"

如需 config.xml 檔案範例，請參閱下列程式碼片段：

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/BasicProject" version="1.0.0" viewmodes="maximized">
    <tizen:application id="PACKAGE_STRING.BasicProject" package="PACKAGE_STRING" required_version="2.3"/>
    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
    <icon src="icon.png"/>
    <tizen:metadata key="http://tizen.org/metadata/app_ui_type/base_screen_resolution" value="extensive"/>
    <name>BasicProject</name>
    <tizen:privilege name="http://tizen.org/privilege/internet"/>
    <tizen:privilege name="http://tizen.org/privilege/system"/>
    <tizen:privilege name="http://tizen.org/privilege/telephony"/>
    <tizen:privilege name='http://tizen.org/privilege/tv.inputdevice'/>
    <tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
    <tizen:privilege name="http://developer.samsung.com/privilege/productinfo"/>
    <tizen:profile name="tv-samsung"/>
    <tizen:setting screen-orientation="landscape" context-menu="enable" background-support="disable" encryption="disable" install-location="auto" hwkey-event="enable"/>
    <access origin="*" subdomains="true"/>
</widget>

接著，請建立 JavaScript 檔案來產生 Nonce。這個步驟包含 PAL 建立 NonceLoader、建立 NonceRequest，然後使用 NonceLoader.loadNonceManager() 要求 Nonce。

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', 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();
  });

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

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

  generateNonce();
}

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

追蹤播放事件

最後，您需要為播放器實作各種事件處理常式。為了測試，您可以將這些事件附加至按鈕點擊事件，但在實際實作中，這些事件會由適當的播放器事件觸發：

/**
 * 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 請求。

設定第三方廣告伺服器，將 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 查詢參數。進一步瞭解如何完成這項作業相關資訊。

大功告成！您現在應該已將 Nonce 參數從 PAL SDK 傳播至 Google Ad Manager，並透過中介伺服器傳播。這可讓您透過 Google Ad Manager 更有效地營利。