Untuk melihat aplikasi contoh yang menggunakan PAL untuk membuat nonce, download contoh CTV Samsung Tizen dari GitHub.
Panduan ini menggabungkan PAL SDK ke dalam aplikasi Samsung Tizen, meminta nonce, dan mendaftarkan tayangan iklan.
Prasyarat
Sebelum memulai panduan ini, Anda perlu membuat aplikasi Tizen dasar. Anda dapat menggunakan Tizen IDE untuk menyiapkan aplikasi. Tonton video ini tentang cara memulai Tizen untuk mengetahui informasi selengkapnya.
Membuat nonce
"Nonce" adalah string terenkripsi tunggal yang dibuat oleh PAL menggunakan NonceLoader.
PAL SDK mewajibkan setiap permintaan streaming baru disertai dengan nonce yang baru
dibuat. Namun, nonce dapat digunakan kembali untuk beberapa permintaan iklan dalam
streaming yang sama.
Buat file HTML untuk aplikasi Anda. Sertakan dependensi webapis.js dalam file HTML Anda. PAL memerlukan dependensi ini agar dapat berfungsi. Untuk mengetahui informasi selengkapnya, lihat
dokumentasi Samsung WebApi.
Sertakan dependensi untuk CTV PAL SDK dalam file index.html Anda. Muat tag skrip setelah tag skrip untuk webapis.js. Lihat contoh dalam file
index.html berikut.
<!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>Samsung Tizen app for PAL sdk</h1>
</hgroup>
</header>
<div id="placeholder-video"></div>
</body>
</html>
Sinyal spam PAL memerlukan hak istimewa Tizen tertentu agar dapat berfungsi dengan baik. Buat
file config.xml dengan deklarasi hak istimewa berikut:
"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"
Lihat cuplikan kode berikut untuk contoh file 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>
Kemudian, buat file JavaScript untuk membuat nonce. Langkah ini mencakup alur kerja PAL
untuk membuat NonceLoader, membuat NonceRequest, lalu
meminta nonce menggunakan NonceLoader.loadNonceManager().
let videoElement;
let nonceLoader;
let managerPromise;
let nonceManager;
let playbackStarted = false;
/**
* 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 the `allowStorage` parameter is false. You must
// set this value to true to let PAL determine whether limited ads applies
// based on the TCF data. You can optionlly use the `forceLimitedAds`
// parameter to enable limited ads regardless of the TCF data.
const consentSettings = new goog.pal.ConsentSettings();
consentSettings.allowStorage = true;
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();
});
Lampirkan nonce Anda ke permintaan iklan
Untuk menggunakan nonce yang dihasilkan, tambahkan tag iklan Anda dengan parameter givn dan nilai nonce, sebelum membuat permintaan iklan.
/**
* 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);
})
Melacak peristiwa pemutaran
Terakhir, Anda perlu menerapkan berbagai pengendali peristiwa untuk pemutar. Untuk tujuan pengujian, Anda dapat melampirkan ini ke peristiwa klik tombol, tetapi dalam penerapan sebenarnya, ini akan dipicu oleh peristiwa pemutar yang sesuai:
/**
* 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();
}
}
Dalam penerapan Anda, sendPlaybackStart harus dipanggil setelah sesi pemutaran video Anda dimulai. sendPlaybackEnd harus dipanggil setelah sesi pemutaran video Anda berakhir. sendAdClick harus dipanggil setiap kali penonton mengklik iklan. sendAdTouch harus dipanggil pada setiap interaksi sentuh dengan pemutar.
(Opsional) Mengirim sinyal Google Ad Manager melalui server iklan pihak ketiga
Konfigurasi permintaan server iklan pihak ketiga untuk Ad Manager.
Konfigurasi server iklan pihak ketiga Anda untuk menyertakan nonce dalam permintaan server 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 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.
Selesai! Sekarang Anda akan memiliki parameter nonce yang diteruskan dari PAL SDK, melalui server perantara, lalu ke Google Ad Manager. Hal ini memungkinkan monetisasi yang lebih baik melalui Google Ad Manager.