Mulai

Prasyarat

Untuk mengintegrasikan dan menguji PAL SDK untuk Cast, Anda memerlukan hal berikut:

Karena Anda hanya perlu memperbarui aplikasi penerima untuk mengintegrasikan PAL SDK, Anda dapat menggunakan Alat Cast Command and Control (CAC) sebagai pengirim web untuk menguji penerima Anda.

Anda dapat menjalankan contoh di akhir setiap langkah dengan meluncurkan web Anda terlebih dahulu aplikasi penerima di CAC. , lalu membuat permintaan pemuatan apa pun.

Buat nonce

"Nonce" adalah satu string terenkripsi yang dihasilkan oleh PAL NonceManager Tujuan NonceManager dibuat oleh loadNonceManager NonceLoader, berdasarkan setelan yang diteruskan dalam NonceRequest. Untuk melihat aplikasi contoh yang menggunakan PAL untuk membuat nonce, download contoh Cast dari GitHub.

Setiap permintaan streaming baru memerlukan nonce baru. Beberapa permintaan iklan dalam streaming yang sama bisa menggunakan nonce yang sama. Untuk membuat nonce menggunakan PAL SDK, pertama-tama buat penerima web yang disesuaikan aplikasi dan tambahkan kode berikut:

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>

Elemen <cast-media-player> merepresentasikan UI pemutar bawaan yang disediakan oleh Cast Web Receiver API. Bergantung pada jenis streaming, pemutar sebenarnya yang digunakan bisa bervariasi. Anda dapat menemukan versi persis dari pemutar ini di Google Cast Catatan rilis SDK.

Berikutnya, tambahkan kode berikut untuk menangkap LOAD peristiwa dan menghasilkan nonce setiap kali penerima memuat MediaInformation :

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

Saat membuat panggilan VAST langsung (DVC), tetapkan nonce ini sebagai nilai di Parameter givn. Nonce tersebut aman untuk URL; Anda tidak perlu mengenkodenya ke URL.

Melacak interaksi video

Selain membuat nonce, PAL SDK perlu diberi tahu tentang interaksi video. Untuk melacak interaksi dengan penerima Cast, tambahkan kode berikut ke penerima kustom Anda:

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

(Opsional) Mengirim sinyal Google Ad Manager melalui server iklan pihak ketiga

Konfigurasikan permintaan server iklan pihak ketiga untuk Ad Manager. Setelah Anda selesaikan langkah-langkah berikut, parameter nonce yang disebarkan dari PAL SDK, melalui server perantara Anda, lalu ke Google Ad Manager. Hal ini memungkinkan monetisasi yang lebih baik melalui Google Ad Manager.

Konfigurasikan server iklan pihak ketiga untuk menyertakan nonce di kolom ke Ad Manager. Berikut contoh tag iklan yang dikonfigurasi di dalam server iklan pihak ketiga:

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

Untuk detail selengkapnya, lihat Penerapan sisi Server Google Ad Manager panduan kami.

Ad Manager mencari givn= untuk mengidentifikasi nilai nonce. Iklan pihak ketiga server tersebut harus mendukung beberapa makronya sendiri, seperti %%custom_key_for_google_nonce%%, dan menggantinya dengan parameter kueri nonce yang Anda berikan pada langkah sebelumnya. Informasi selengkapnya tentang cara melakukannya harus tersedia dalam dokumentasi server iklan pihak ketiga.