เริ่มต้นใช้งาน

ข้อกำหนดเบื้องต้น

หากต้องการผสานรวมและทดสอบ PAL SDK สำหรับ Cast คุณต้องมีสิ่งต่อไปนี้

เนื่องจากคุณเพียงต้องอัปเดตแอปตัวรับเพื่อผสานรวม PAL SDK คุณจึงใช้เครื่องมือคำสั่งและการควบคุม (CAC) ของ Cast เป็นตัวส่งเว็บเพื่อทดสอบตัวรับได้

คุณเรียกใช้ตัวอย่างได้ในตอนท้ายของแต่ละขั้นตอนโดยเปิดแอป Web Receiver ในเครื่องมือ CAC ก่อน แล้วจึงส่งคำขอโหลด

สร้าง Nonce

"Nonce" คือสตริงที่เข้ารหัสรายการเดียวซึ่ง PAL สร้างขึ้นผ่าน NonceManager loadNonceManager NonceManager สร้างขึ้นโดยใช้วิธี NonceLoader ของ NonceRequest ตามการตั้งค่าที่ส่งผ่าน หากต้องการดู แอปตัวอย่างที่ใช้ PAL เพื่อสร้าง Nonce ให้ดาวน์โหลดตัวอย่าง Cast จาก GitHub

คำขอสตรีมใหม่แต่ละรายการต้องมี Nonce ใหม่ คำขอโฆษณาหลายรายการภายใน สตรีมเดียวกันสามารถใช้ Nonce เดียวกันได้ หากต้องการสร้าง Nonce โดยใช้ 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> แสดงถึง UI ของเพลเยอร์ในตัวที่ API ของ Cast Web Receiver มีให้ โปรแกรมเล่นที่ใช้จริงอาจแตกต่างกันไปตามประเภทสตรีม คุณดูเวอร์ชันที่แน่นอนของเพลเยอร์เหล่านี้ได้ในบันทึกประจำรุ่นของ Google Cast SDK

จากนั้นเพิ่มโค้ดต่อไปนี้เพื่อสกัดกั้นเหตุการณ์ LOAD และสร้าง Nonce ทุกครั้งที่ตัวรับโหลดออบเจ็กต์ 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();

เมื่อทำการเรียก VAST โดยตรง (DVC) ให้ตั้งค่า Nonce นี้เป็นค่าในพารามิเตอร์ givn Nonce นี้ปลอดภัยสำหรับ URL คุณจึงไม่ต้องเข้ารหัส URL

หากขอและแสดงโฆษณาจาก Google คุณต้องแสดงผลไอคอนและการซ้อนทับAdChoices ดูรายละเอียดเกี่ยวกับการแยกวิเคราะห์การตอบกลับด้วย VAST และการแสดงผลไอคอนได้ที่ไอคอนตัวเลือกโฆษณาและภาพซ้อนทับ

ติดตามการโต้ตอบกับวิดีโอ

นอกเหนือจากการสร้าง Nonce แล้ว ระบบยังต้องแจ้งให้ 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 Ad Manager ผ่านเซิร์ฟเวอร์โฆษณาบุคคลที่สาม

กำหนดค่าคำขอของเซิร์ฟเวอร์โฆษณาบุคคลที่สามสำหรับ Ad Manager หลังจากทำตามขั้นตอนต่อไปนี้แล้ว พารามิเตอร์ Nonce จะแพร่กระจายจาก PAL SDK ผ่านเซิร์ฟเวอร์ตัวกลาง แล้วไปยัง Google Ad Manager ซึ่งจะช่วยให้สร้างรายได้ได้ดีขึ้นผ่าน Google 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 ที่คุณระบุในขั้นตอนก่อนหน้า ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีดำเนินการนี้ได้ในเอกสารประกอบของเซิร์ฟเวอร์โฆษณาของบุคคลที่สาม