開始する

前提条件

Cast 用 PAL SDK を統合してテストするには、次のものが必要です。

PAL SDK を統合するためにレシーバー アプリを更新するだけで済む場合は、Cast Command and Control（CAC）ツールをウェブ送信者として使用して、レシーバーをテストできます。

各ステップの最後にサンプルを実行するには、まず CAC ツールでウェブ レシーバー アプリを起動してから、読み込みリクエストを行います。

ノンスを生成する

「nonce」は、NonceManager を介して PAL によって生成される単一の暗号化された文字列です。NonceManager は、NonceLoader の loadNonceManager メソッドによって、NonceRequest で渡された設定に基づいて生成されます。PAL を使用して nonce を生成するサンプルアプリについては、GitHub から Cast のサンプルをダウンロードしてください。

新しいストリーム リクエストごとに新しいノンスが必要です。同じストリーム内の複数の広告リクエストで同じノンスを使用できます。PAL SDK を使用してノンスを生成するには、まずカスタマイズされたウェブ レシーバ アプリを作成し、次のコードを追加します。

receiver.html

<!DOCTYPE html>
<html>
<head>
  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/pal/sdkloader/cast_pal.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <footer>
    <script src="js/receiver.js" type="module"></script>
  </footer>
</body>
</html>

<cast-media-player> 要素は、Cast Web Receiver API によって提供される組み込みプレーヤー UI を表します。ストリームの種類によって、実際に使用されるプレーヤーは異なります。これらのプレーヤーの正確なバージョンについては、Google Cast SDK のリリースノートをご覧ください。

次に、次のコードを追加して LOAD イベントをインターセプトし、レシーバーが新しい MediaInformation オブジェクトを読み込むたびに nonce を生成します。

js/receiver.js

const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();

const consentSettings = new goog.cast.pal.ConsentSettings();
// For the correct usage of the allowStorage property, See
// developers.google.com/ad-manager/pal/cast/reference/js/ConsentSettings#allowStorage.
consentSettings.allowStorage = true;

// You need a nonce loader to request your stream's nonceManager. The
// nonceManager provides your nonce. You should reuse the same nonce loader for
// the entire lifecycle of the receiver.
const nonceLoader = new goog.cast.pal.NonceLoader(consentSettings);

// You need a reference to the NonceManager to track when an ad is shown or
// clicked.
let nonceManager;

/**
 * Sends a debug message to the CAF sender.
 *
 * @param {String} message - The message to send
 */
const log = (message) => {
  // Use CastDebugLogger to log a message to the sender. See
  // https://developers.google.com/cast/docs/debugging/cast_debug_logger.
}

/**
 * Stores the nonce manager in the outer scoped variable and retrieves a nonce,
 * so it can be used to build your ad request URL
 *
 * @param {NonceManager} loadedNonceManager - The loaded nonce manager
 */
const buildAdRequest = (loadedNonceManager) => {
  nonceManager = loadedNonceManager;

  const nonce = nonceManager.getNonce();
  log('received nonce:' + nonce);

  // TODO: Set this nonce as the value for the `givn` parameter of your ad
  // request URL. For example:
  // const adRequestURL = 'https://myadserver.com/ads?givn=' + nonce;
}

/**
 * Configures a new nonce request, then requests a nonce.
 *
 * @param {LoadRequestData} loadRequestData - the load request object,
 * which contains the MediaInformation object from the sender. See
 * developers.google.com/cast/docs/reference/web_receiver/cast.framework.messages.LoadRequestData
 * @return {(Promise<LoadRequestData>)} - A Promise to build an ad request.
 */
const handleLoadRequest = (loadRequestData) => {
  // Clear any old nonceManager before loading new media.
  nonceManager = null;

  // See developers.google.com/ad-manager/pal/cast/reference/js/NonceRequest
  // for details about each property. The NonceRequest parameters set here are
  // example parameters. You should set your parameters based on your own app
  // characteristics.
  const nonceRequest = new goog.cast.pal.NonceRequest();
  nonceRequest.adWillAutoPlay = true;
  // A URL describing the video stream.
  nonceRequest.descriptionUrl = 'https://example.com';
  nonceRequest.iconsSupported = true;
  nonceRequest.ppid = 'Sample PPID';
  nonceRequest.sessionId = 'Sample SID';
  nonceRequest.url = loadRequestData.media.contentUrl;
  // The height of the player in physical pixels.
  // For a fullscreen player on a 1080p screen, the video height would be 1080.
  nonceRequest.videoHeight = window.devicePixelRatio * window.screen.height;
  // The width of the player in physical pixels.
  // For a fullscreen player on a 1080p screen, the video width would be 1920.
  nonceRequest.videoWidth = window.devicePixelRatio * window.screen.width;

  return nonceLoader.loadNonceManager(nonceRequest)
    .then(buildAdRequest)
    .catch((e) => {
      log("Error: " + e.message);
    });
};

// Set up the event handler for the LOAD event type.
playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD, handleLoadRequest);

castContext.start();

VAST の直接呼び出し（DVC）を行う場合は、このノンスを givn パラメータの値として設定します。ノンスの URL はそのまま指定でき、URL エンコードは必要ありません。

Google から広告をリクエストしてレンダリングする場合は、AdChoices アイコンとオーバーレイをレンダリングする必要があります。VAST レスポンスの解析とアイコンのレンダリングについて詳しくは、AdChoices アイコンとオーバーレイをご覧ください。

動画のアクティビティをトラッキングする

PAL SDK は、ノンスを生成するだけでなく、特定の動画インタラクションについて通知を受ける必要があります。Cast レシーバーとのインタラクションをトラッキングするには、カスタム レシーバーに次のコードを追加します。

js/receiver.js

const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();

const consentSettings = new goog.cast.pal.ConsentSettings();
// For the correct usage of the allowStorage property, See
// developers.google.com/ad-manager/pal/cast/reference/js/ConsentSettings#allowStorage.
consentSettings.allowStorage = true;

// You need a nonce loader to request your stream's nonceManager. The
// nonceManager provides your nonce. You should reuse the same nonce loader for
// the entire lifecycle of the receiver.
const nonceLoader = new goog.cast.pal.NonceLoader(consentSettings);

// You need a reference to the NonceManager for sending ad events.
let nonceManager;

// Track playback status.
let playbackDidStart = false;

...

// Register the start of playback.
playerManager.addEventListener(cast.framework.events.EventType.PLAYING, () => {
  if (playbackDidStart) return;

  playbackDidStart = true;
  if (nonceManager) {
    log('Registered playback start');
    nonceManager.sendPlaybackStart();
  } else {
    log("Error: There is no nonce manager for this media.");
  }
});

// Register any interactions with the player.
const interactionEvents = [
  cast.framework.events.EventType.REQUEST_SEEK,
  cast.framework.events.EventType.REQUEST_STOP,
  cast.framework.events.EventType.REQUEST_PAUSE,
  cast.framework.events.EventType.REQUEST_PLAY,
  cast.framework.events.EventType.REQUEST_SKIP_AD,
  cast.framework.events.EventType.REQUEST_PLAY_AGAIN,
  cast.framework.events.EventType.REQUEST_PLAYBACK_RATE_CHANGE,
  cast.framework.events.EventType.REQUEST_VOLUME_CHANGE,
  cast.framework.events.EventType.REQUEST_USER_ACTION,
  cast.framework.events.EventType.REQUEST_FOCUS_STATE,
];
playerManager.addEventListener(interactionEvents, (interactionEvent) => {
  if (nonceManager) {
    log('Registered interaction: ' + interactionEvent);
    nonceManager.sendAdTouch(interactionEvent);
  } else {
    log("Error: There is no nonce manager for this media.");
  }
});

// Register the end of playback.
playerManager.addEventListener(cast.framework.events.EventType.MEDIA_FINISHED, () => {
  playbackDidStart = false;
  if (nonceManager) {
    log('Registered playback end');
    nonceManager.sendPlaybackEnd();
  } else {
    log("Error: There is no nonce manager for this media.");
  }
});

castContext.start();

（省略可）第三者広告サーバー経由で Google アド マネージャーのシグナルを送信する

アド マネージャーに対するサードパーティ広告サーバーのリクエストを設定します。以下の手順を完了すると、nonce パラメータが PAL SDK から仲介サーバーを経由して Google アド マネージャーに伝播されます。これにより、Google アド マネージャーを通じて収益化を促進できます。

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

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

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

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