Introducción a Tizen (Samsung)

Para ver una app de ejemplo que usa PAL para generar un nonce, descarga el ejemplo de CTV (Tizen) de GitHub.

Esta guía incorpora el SDK de la PAL en una solicitud de Samsung (Tizen) un nonce y registra impresiones de anuncios.

Requisitos previos

Antes de comenzar esta guía, debes crear una app básica de Tizen. Puedes usar IDE de Tizen para configurar la app. Mira este video sobre cómo comenzar a usar Tizen para obtener más información.

Cómo generar un nonce

Un "nonce" es una sola cadena encriptada que genera PAL con NonceLoader. El SDK de PAL requiere que cada solicitud de transmisión nueva esté acompañada de un nonce generado recientemente. Sin embargo, los nonces pueden reutilizarse para varias solicitudes de anuncios en la misma transmisión.

Crea un archivo HTML para tu app. Incluye la dependencia webapis.js en el archivo HTML. PAL requiere esta dependencia para funcionar. Para obtener más información, consulta el Documentación de Samsung WebApi.

Incluye una dependencia para el SDK de CTV PAL en tu archivo index.html. Carga la etiqueta de secuencia de comandos después de la etiqueta de secuencia de comandos para webapis.js. Consulta lo siguiente 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">
 <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>

Los indicadores de spam de PAL requieren ciertos privilegios de Tizen para funcionar correctamente. Crea un config.xml con las siguientes declaraciones de privilegios:

  • "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"

Consulta el siguiente fragmento de código para ver un archivo config.xml de ejemplo:

<?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>

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 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();
});

Adjunta el nonce a la solicitud de anuncio

Para usar el nonce generado, agrega un parámetro givn a tu etiqueta de anuncio y el 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);
        
      })

Realiza un seguimiento de los eventos de reproducción

Por último, debes implementar varios controladores de eventos para tu reproductor. Para con fines de prueba, puedes adjuntarlos a eventos de clic en botones, pero estas se activarán con los eventos del jugador 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 tu video comienza la sesión de reproducción. 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 hace 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 incluir el nonce en el a Ad Manager. A continuación, le mostramos un ejemplo de una etiqueta de anuncio configurada en el servidor de anuncios de terceros:

'https://pubads.serverside.net/gampad/ads?givn=%%custom_key_for_google_nonce%%&...'

Para obtener más información, consulta la guía de implementación del lado del servidor de Google Ad Manager.

Ad Manager busca givn= para identificar el valor del 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 de nonce que proporcionaste en el paso anterior. Debería haber más información para lograrlo en la documentación del servidor de anuncios de terceros.

Eso es todo. Ahora deberías tener el parámetro nonce propagado desde el SDK de PAL. a través de sus servidores intermediarios y, luego, a Google Ad Manager. Esto permite una mejor monetización con Google Ad Manager.