このページは Cloud Translation API によって翻訳されました。

Tizen のスタートガイド（Samsung）

PAL を使用してノンスを生成するサンプルアプリを確認するには、CTV（Tizen）をダウンロードしてください。サンプルに含まれる GitHub。

このガイドでは、PAL SDK を Samsung（Tizen）アプリケーションに組み込み、ノンス、広告のインプレッションを登録します。

前提条件

このガイドを始める前に、基本的な Tizen アプリを作成する必要があります。次を使用: Tizen IDE を使用してアプリを設定します。この動画をご覧ください。 Tizen スタートガイドをご覧ください。

ノンスを生成する

「ノンス」は、NonceLoader を使用して PAL によって生成される単一の暗号化文字列です。PAL SDK では、新しいストリームリクエストごとに新しく生成されたノンスが必要です。ただし、ノンスは同じストリーム内の複数の広告リクエストで再利用できます。

アプリの 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 ファイルを作成してノンスを生成します。このステップには、NonceLoader の作成、NonceRequest の作成、NonceLoader.loadNonceManager() を使用したノンスのリクエストという PAL ワークフローが含まれます。

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

広告リクエストにノンスを添付する

生成されたノンスを使用するには、広告リクエストを行う前に、広告タグに 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);
        
      })

再生イベントを追跡する

最後に、プレーヤーのさまざまなイベントハンドラを実装する必要があります。対象テスト用にこれらをボタンクリックイベントにアタッチできますが、実装すると、これらは適切なプレーヤーイベントによってトリガーされます。

/**
 * 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 アドマネージャーのシグナルを送信する

アドマネージャーに対する第三者広告サーバーのリクエストを設定します。

アドマネージャーへのサーバーリクエストにノンスを含めるように、第三者広告サーバーを設定します。第三者広告サーバー内で設定された広告タグの例を次に示します。

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

詳しくは、Google アドマネージャーのサーバーサイド実装ガイドをご覧ください。

アドマネージャーは givn= を探してノンス値を特定します。サードパーティ広告サーバーは、%%custom_key_for_google_nonce%% などの独自のマクロをサポートし、それを前の手順で指定したノンスクエリパラメータに置き換える必要があります。詳細な手順第三者広告サーバーのドキュメントをご覧ください

これで、これで、nonce パラメータが PAL SDK から中間サーバー経由で Google アドマネージャーに伝播されるようになりました。これにより、 Google アドマネージャーを通じた収益化