Pour voir un exemple d'application qui utilise PAL pour générer un nonce, téléchargez l'exemple CTV Samsung Tizen depuis GitHub.
Ce guide explique comment intégrer le SDK PAL dans une application Samsung Tizen, demander un nonce et enregistrer les impressions d'annonces.
Prérequis
Avant de commencer ce guide, vous devez créer une application Tizen de base. Vous pouvez utiliser l'IDE Tizen pour configurer l'application. Pour en savoir plus, consultez cette vidéo sur Premiers pas avec Tizen.
Générer un nonce
Un "nonce" est une chaîne chiffrée unique générée par PAL à l'aide de NonceLoader.
Le SDK PAL exige que chaque nouvelle demande de flux soit accompagnée d'un nonce nouvellement généré. Toutefois, les nonces peuvent être réutilisés pour plusieurs demandes d'annonces dans le même flux.
Créez un fichier HTML pour votre application. Incluez la dépendance webapis.js dans votre fichier HTML. PAL nécessite cette dépendance pour fonctionner. Pour en savoir plus, consultez la documentation de l'API Web Samsung.
Incluez une dépendance pour le SDK CTV PAL dans votre fichier index.html. Chargez la balise de script après celle de webapis.js. Consultez l'exemple de fichier index.html ci-dessous.
<!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>
Les signaux de spam PAL nécessitent certains privilèges Tizen pour fonctionner correctement. Créez un fichier config.xml avec les déclarations de privilèges suivantes :
"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"
Consultez l'extrait de code suivant pour obtenir un exemple de fichier 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>
Créez ensuite un fichier JavaScript pour générer un nonce. Cette étape inclut le workflow PAL de création d'un NonceLoader, d'un NonceRequest, puis de demande d'un nonce à l'aide de 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();
});
Joindre votre nonce à la demande d'annonce
Pour utiliser le nonce généré, ajoutez un paramètre givn et la valeur du nonce à votre tag d'annonce avant d'envoyer vos demandes d'annonces.
/**
* 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);
})
Suivre les événements de lecture
Enfin, vous devez implémenter différents gestionnaires d'événements pour votre lecteur. À des fins de test, vous pouvez les associer à des événements de clic sur un bouton, mais dans une implémentation réelle, ils seraient déclenchés par les événements de lecteur appropriés :
/**
* 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();
}
}
Dans votre implémentation, sendPlaybackStart doit être appelé au début de votre session de lecture vidéo. sendPlaybackEnd doit être appelé une fois votre session de lecture vidéo terminée. sendAdClick doit être appelé chaque fois que le spectateur clique sur une annonce. sendAdTouch doit être appelé à chaque interaction tactile avec le lecteur.
(Facultatif) Envoyer des signaux Google Ad Manager via des ad servers tiers
Configurez la demande de l'ad server tiers pour Ad Manager.
Configurez votre ad server tiers pour qu'il inclue le nonce dans la demande du serveur envoyée à Ad Manager. Voici un exemple de tag d'annonce configuré dans l'ad server tiers :
'https://pubads.serverside.net/gampad/ads?givn=%%custom_key_for_google_nonce%%&...'
Pour en savoir plus, consultez le guide d'implémentation côté serveur de Google Ad Manager.
Ad Manager recherche givn= pour identifier la valeur du nonce. Le serveur publicitaire tiers doit accepter une macro qui lui est propre, telle que %%custom_key_for_google_nonce%%, et la remplacer par le paramètre de requête nonce que vous avez fourni à l'étape précédente. Pour en savoir plus, consultez la documentation de l'ad server tiers.
Et voilà ! Le paramètre nonce devrait maintenant être propagé depuis le SDK PAL, via vos serveurs intermédiaires, puis vers Google Ad Manager. Cela permet une meilleure monétisation grâce à Google Ad Manager.