Per visualizzare un'app di esempio che utilizza PAL per generare un nonce, scarica l'esempio di Tizen per CTV Samsung da GitHub.
Questa guida incorpora l'SDK PAL in un'applicazione Samsung Tizen, richiede un nonce e registra le impressioni degli annunci.
Prerequisiti
Prima di iniziare questa guida, devi creare un'app Tizen di base. Puoi utilizzare Tizen IDE per configurare l'app. Per ulteriori informazioni, guarda questo video su come iniziare a utilizzare Tizen.
Generare un nonce
Un "nonce" è una singola stringa criptata generata da PAL utilizzando NonceLoader.
L'SDK PAL richiede che ogni nuova richiesta di stream sia accompagnata da un nonce appena
generato. Tuttavia, i nonce possono essere riutilizzati per più richieste di annuncio all'interno dello stesso stream.
Crea un file HTML per la tua app. Includi la dipendenza webapis.js nel file HTML. PAL richiede questa dipendenza per funzionare. Per saperne di più, consulta la
documentazione di Samsung WebApi.
Includi una dipendenza per l'SDK CTV PAL nel file index.html. Carica il
tag script dopo il tag script per webapis.js. Vedi il seguente
file index.html per un esempio.
<!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>
Gli indicatori di spam PAL richiedono determinati privilegi Tizen per funzionare correttamente. Crea un file
config.xml con le seguenti dichiarazioni di privilegi:
"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"
Vedi il seguente snippet di codice per un esempio di 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>
Poi, crea un file JavaScript per generare un nonce. Questo passaggio include il flusso di lavoro PAL
di creazione di un NonceLoader, di un NonceRequest e poi
la richiesta di un nonce utilizzando 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();
});
Allegare il nonce alla richiesta di annuncio
Per utilizzare il nonce generato, aggiungi il parametro givn e il valore nonce al tag annuncio prima di effettuare le richieste di annuncio.
/**
* 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);
})
Monitorare gli eventi di riproduzione
Infine, devi implementare vari gestori di eventi per il tuo player. A scopo di test, puoi allegarli agli eventi di clic sui pulsanti, ma in un'implementazione reale, questi verrebbero attivati dagli eventi del player appropriati:
/**
* 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();
}
}
Nell'implementazione, sendPlaybackStart deve essere chiamato all'inizio della sessione di riproduzione video. sendPlaybackEnd deve essere chiamato al termine della sessione di riproduzione video. sendAdClick deve essere chiamato ogni volta che lo spettatore fa clic su un annuncio. sendAdTouch deve essere chiamato a ogni interazione tattile
con il player.
(Facoltativo) Inviare indicatori di Google Ad Manager tramite ad server di terze parti
Configura la richiesta dell'ad server di terze parti per Ad Manager.
Configura l'ad server di terze parti in modo che includa il nonce nella richiesta del server ad Ad Manager. Ecco un esempio di tag annuncio configurato all'interno dell'ad server di terze parti:
'https://pubads.serverside.net/gampad/ads?givn=%%custom_key_for_google_nonce%%&...'
Per ulteriori dettagli, consulta la guida all'implementazione lato server di Google Ad Manager.
Ad Manager cerca givn= per identificare il valore nonce. L'ad server di terze parti
deve supportare una propria macro, ad esempio
%%custom_key_for_google_nonce%%, e sostituirla con il parametro di query nonce
che hai fornito nel passaggio precedente. Per maggiori informazioni su come eseguire questa operazione,
consulta la documentazione dell'ad server di terze parti.
È tutto. Ora dovresti aver propagato il parametro nonce dall'SDK PAL, tramite i server intermedi, fino a Google Ad Manager. Ciò consente una migliore monetizzazione tramite Google Ad Manager.