En esta guía, se incorpora el SDK de PAL en una aplicación de webOS de LG, se solicita un nonce y se registran las impresiones de anuncios.
Requisitos previos
Antes de comenzar con esta guía, crea una app básica para LG webOS. Puedes usar la CLI de webOS o webOS Studio para configurar la app. Para obtener más detalles, consulta la guía para crear tu primera app.
Cómo generar un nonce
Un "nonce" es una sola cadena encriptada que PAL genera con NonceLoader.
El SDK de PAL requiere que cada solicitud de transmisión nueva se acompañe de un nonce recién generado. Sin embargo, los nonces se pueden reutilizar para varias solicitudes de anuncios dentro del mismo flujo.
Cuando generas una app con la CLI de webOS o webOS Studio, se crea un archivo HTML que incluye la dependencia webOSTV.js. PAL requiere esta dependencia para funcionar. Para obtener más información, consulta la documentación de webOSTV.js.
Incluye una dependencia para el SDK de PAL de CTV en tu archivo index.html. Carga la etiqueta de secuencia de comandos después de la etiqueta de secuencia de comandos para webOSTV.js. Consulta el siguiente archivo index.html para ver un ejemplo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="LG app for PAL sdk"/>
<title>LG app for PAL sdk</title>
<link rel="stylesheet" href="style.css"/>
<script src="path/to/webOSTVjs/webOSTV.js" charset="utf-8"></script>
<script src="https://imasdk.googleapis.com/pal/sdkloader/pal_ctv.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<hgroup>
<h1>LG app for PAL sdk</h1>
</hgroup>
</header>
<div id="placeholder-video"></div>
</body>
</html>
Luego, crea un archivo JavaScript para generar un nonce. Este paso incluye el flujo de trabajo de PAL para crear un NonceLoader, crear un NonceRequest y, luego, solicitar un nonce con NonceLoader.loadNonceManager().
let videoElement;
let nonceLoader;
let managerPromise;
let nonceManager;
let playbackStarted = false;
/**
* Initializes the PAL loader.
*/
function init() {
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();
});
// PAL automatically determines whether limited ads apply based on the TCF
// data found on the page. You can optionally use the `forceLimitedAds`
// parameter to manually enable limited ads regardless of the TCF data.
const consentSettings = new goog.pal.ConsentSettings();
nonceLoader = new goog.ctv.pal.NonceLoader(consentSettings);
generateNonce();
}
/**
* Generates a nonce with sample arguments.
*
* 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();
});
Adjunta tu nonce a la solicitud de anuncio
Para usar el nonce generado, agrega a tu etiqueta del anuncio un parámetro givn y el valor del nonce antes de realizar tus solicitudes de anuncios.
/**
* 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);
})
Si solicitas y renderizas anuncios de Google, debes renderizar el ícono y la superposición de AdChoices.
Realiza un seguimiento de los eventos de reproducción
Por último, debes implementar varios controladores de eventos para tu reproductor. Para realizar pruebas, puedes adjuntar estos elementos a eventos de clic en botones, pero, en una implementación real, se activarían con los eventos del reproductor correspondientes:
/**
* 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();
}
}
En tu implementación, se debe llamar a sendPlaybackStart una vez que comience la sesión de reproducción de video. Se debe llamar a sendPlaybackEnd una vez que finalice la sesión de reproducción de video. Se debe llamar a sendAdClick cada vez que el usuario haga clic en un anuncio. Se debe llamar a sendAdTouch en cada interacción táctil con el reproductor.
(Opcional) Envía indicadores de Google Ad Manager a través de servidores de anuncios de terceros
Configura la solicitud del servidor de anuncios de terceros para Ad Manager.
Configura tu servidor de anuncios de terceros para que incluya el nonce en la solicitud del servidor a Ad Manager. Este es un ejemplo de una etiqueta de anuncio configurada dentro del servidor de anuncios de terceros:
'https://pubads.serverside.net/gampad/ads?givn=%%custom_key_for_google_nonce%%&...'
Para obtener más detalles, consulta la guía de implementación del servidor de Google Ad Manager.
Ad Manager busca givn= para identificar el valor de nonce. El servidor de anuncios de terceros debe admitir alguna macro propia, como %%custom_key_for_google_nonce%%, y reemplazarla por el parámetro de consulta nonce que proporcionaste en el paso anterior. En la documentación del servidor de anuncios externo, debería haber más información sobre cómo lograr esto.
Eso es todo. Ahora deberías tener el parámetro nonce propagado desde el SDK de PAL, a través de tus servidores intermediarios y, luego, a Google Ad Manager. Esto permite una mejor monetización a través de Google Ad Manager.