Per vedere un'app di esempio che utilizza PAL per generare un nonce, scarica la TV connessa a internet (CTV) (Tizen) esempio da GitHub.
Questa guida incorpora l'SDK PAL in un'applicazione Samsung (Tizen), un nonce e registrare le impressioni degli annunci.
Prerequisiti
Prima di iniziare questa guida, devi creare un'app Tizen di base. Puoi utilizzare l'IDE Tizen per configurare l'app. Guarda questo video su iniziare a utilizzare Tizen per ulteriori informazioni.
Genera un nonce
Un "nonce" è una singola stringa criptata generata da PAL utilizzando il NonceLoader.
L'SDK PAL richiede che ogni nuova richiesta di streaming sia accompagnata da un nuovo
nonce generato. Tuttavia, i nonce possono essere riutilizzati per più richieste di annunci in
lo stesso flusso.
Crea un file HTML per la tua app. Includi la dipendenza webapis.js nel
file HTML. PAL richiede questa dipendenza per funzionare. Per ulteriori informazioni, consulta la documentazione di Samsung WebApi.
Includi una dipendenza per l'SDK CTV PAL nel file index.html. Carica il
tag script che segue il tag script per webapis.js. Consulta quanto segue:
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>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
config.xml con le seguenti dichiarazioni dei 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>
Quindi, crea un file JavaScript per generare un nonce. Questo passaggio include il flusso di lavoro di PAL per la creazione di un NonceLoader, di un NonceRequest e poi della richiesta di un nonce utilizzando NonceLoader.loadNonceManager().
let videoElement;
let nonceLoader;
let managerPromise;
let nonceManager;
let storageConsent = true;
let playbackStarted = false;
/**
* A placeholder for the publisher's own method of obtaining user
* consent, either by integrating with a CMP or based on other
* methods the publisher chooses to handle storage consent.
* @return {boolean} Whether storage consent has been given.
*/
function getConsentToStorage() {
return storageConsent;
}
/**
* 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 `allowStorage` is false, but can be
// changed once the appropriate consent has been gathered.
const consentSettings = new goog.ctv.pal.ConsentSettings();
consentSettings.allowStorage = getConsentToStorage();
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();
});
Allega il nonce alla richiesta di annuncio
Per utilizzare il nonce generato, aggiungi al tag annuncio un parametro givn e la macro
nonce prima di effettuare le richieste di annunci.
/**
* 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 player. Per scopi di test, puoi associarli agli eventi di clic sui pulsanti, ma in un'implementazione reale 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 del video. sendPlaybackEnd dovrebbe essere chiamato dopo che il tuo video
la sessione di riproduzione al termine. sendAdClick deve essere chiamato ogni volta che
Uno spettatore fa clic su un annuncio. sendAdTouch deve essere chiamato a ogni interazione con il tocco
con il player.
(Facoltativo) Invia gli 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 da includere il nonce nella richiesta del server ad Ad Manager. Di seguito è riportato un esempio di un tag annuncio configurato all'interno della ad server di terze parti:
'https://pubads.serverside.net/gampad/ads?givn=%%custom_key_for_google_nonce%%&...'
Per ulteriori dettagli, consulta Implementazione lato server di Google Ad Manager .
Ad Manager cerca givn= per identificare il valore nonce. L'annuncio di terze parti
server deve supportare alcune macro, come
%%custom_key_for_google_nonce%% e sostituiscilo con il parametro di query nonce
che hai fornito nel passaggio precedente. Ulteriori informazioni su come eseguire questa operazione dovrebbero essere disponibili nella documentazione dell'ad server di terze parti.
È tutto. A questo punto dovresti propagare il parametro nonce dall'SDK PAL. tramite i server intermediari e poi a Google Ad Manager. In questo modo, puoi migliorare la monetizzazione tramite Google Ad Manager.