Iniziare a utilizzare LG

Questa guida incorpora l'SDK PAL in un'applicazione LG webOS, richiede un nonce e registra le impressioni degli annunci.

Prerequisiti

Prima di iniziare questa guida, crea un'app webOS LG di base. Puoi utilizzare webOS CLI o webOS Studio per configurare l'app. Per maggiori dettagli, consulta la guida Crea la tua prima app.

Genera 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.

Quando generi un'app utilizzando webOS CLI o webOS Studio, viene creato un file HTML che include la dipendenza webOSTV.js. PAL richiede questa dipendenza per funzionare. Per saperne di più, consulta la documentazione di webOSTV.js.

Includi una dipendenza per l'SDK PAL CTV nel file index.html. Carica il tag di script dopo il tag di script per webOSTV.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">
  <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>

Poi, crea un file JavaScript per generare un nonce. Questo passaggio include il flusso di lavoro PAL per creare un NonceLoader, un NonceRequest e poi richiedere un nonce utilizzando 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();
});

Allega 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.

Attenzione: se in precedenza hai fornito un nonce utilizzando il parametro paln, ti consigliamo vivamente di eseguire la migrazione a givn e di interrompere l'invio di paln. Se sono inclusi entrambi i parametri, il comportamento non è definito in merito al nonce utilizzato.

  /**
   * 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);
        
      })

Se richiedi e visualizzi annunci di Google, devi visualizzare l'icona e l'overlay AdChoices.

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 touch con il player.

(Facoltativo) Inviare indicatori di Google Ad Manager tramite ad server di terze parti

Configura la richiesta del server pubblicitario di terze parti per Ad Manager.

Nota :se utilizzi più soluzioni di terze parti, ad esempio un server SSAI di terze parti che chiama un altro ad server di terze parti, devi assicurarti che il nonce criptato dell'SDK PAL venga inoltrato a ogni terza parte.

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 maggiori 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 macro propria, ad esempio %%custom_key_for_google_nonce%%, e sostituirla con il parametro di query nonce che hai fornito nel passaggio precedente. Maggiori informazioni su come eseguire questa operazione dovrebbero essere disponibili nella documentazione del server pubblicitario di terze parti.

È tutto. Ora dovresti aver propagato il parametro nonce dall'SDK PAL, tramite i server intermediari, fino a Google Ad Manager. Ciò consente una migliore monetizzazione tramite Google Ad Manager.