Prasyarat
Untuk mengintegrasikan dan menguji PAL SDK untuk Cast, Anda memerlukan hal berikut:
Aplikasi penerima untuk membuat nonce menggunakan intersepsi pesan.
Aplikasi pengirim untuk memicu penerima memuat konten yang berisi panggilan iklan.
Karena Anda hanya perlu mengupdate aplikasi penerima untuk mengintegrasikan PAL SDK, Anda dapat menggunakan Alat Kontrol dan Perintah Cast (CAC) sebagai pengirim web untuk menguji penerima.
Anda dapat menjalankan contoh di akhir setiap langkah dengan terlebih dahulu meluncurkan aplikasi penerima web di Alat CAC, lalu membuat permintaan pemuatan.
Buat nonce
"Nonce" adalah string terenkripsi tunggal yang dihasilkan oleh PAL melalui
NonceManager. NonceManager dihasilkan oleh metode loadNonceManager dari 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 dapat menggunakan nonce yang sama. Untuk membuat nonce menggunakan PAL SDK, pertama-tama buat aplikasi penerima web yang disesuaikan 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 yang sebenarnya digunakan
dapat bervariasi. Anda dapat menemukan versi persis dari pemutar ini di catatan rilis SDK Google Cast.
Selanjutnya, tambahkan kode berikut untuk mencegat peristiwa LOAD
dan membuat nonce setiap kali penerima memuat objek
MediaInformation
baru:
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 pada parameter
givn. Nonce aman untuk URL; Anda tidak perlu mengenkodenya ke URL.
Jika Anda meminta dan merender iklan dari Google, Anda harus merender ikon dan overlay AdChoices. Untuk mengetahui detail tentang mengurai respons VAST dan merender ikon, lihat Ikon dan overlay AdChoices.
Melacak interaksi video
Selain membuat nonce, PAL SDK perlu diberi tahu tentang interaksi video tertentu. 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
Konfigurasi permintaan server iklan pihak ketiga untuk Ad Manager. Setelah Anda menyelesaikan langkah-langkah berikut, parameter nonce akan diteruskan dari PAL SDK, melalui server perantara Anda, lalu ke Google Ad Manager. Hal ini memungkinkan monetisasi yang lebih baik melalui Google Ad Manager.
Konfigurasi server iklan pihak ketiga Anda untuk menyertakan nonce dalam permintaan server ke Ad Manager. Berikut adalah contoh tag iklan yang dikonfigurasi di dalam server iklan pihak ketiga:
'https://pubads.serverside.net/gampad/ads?givn=%%custom_key_for_google_nonce%%&...'
Untuk mengetahui detail selengkapnya, lihat Panduan penerapan sisi server Google Ad Manager.
Ad Manager mencari givn= untuk mengidentifikasi nilai nonce. Server iklan pihak ketiga 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
seharusnya tersedia dalam dokumentasi server iklan pihak ketiga.