Erste Schritte mit LG

In diesem Leitfaden wird das PAL SDK in eine LG webOS-Anwendung eingebunden, eine Nonce angefordert und Anzeigenimpressionen registriert.

Vorbereitung

Bevor Sie mit dieser Anleitung beginnen, erstellen Sie eine einfache webOS-App für LG. Sie können die App entweder mit der webOS CLI oder mit webOS Studio einrichten. Weitere Informationen finden Sie in der Anleitung zum Erstellen Ihrer ersten App.

Nonce generieren

Eine „Nonce“ ist ein einzelner verschlüsselter String, der von PAL mit dem NonceLoader generiert wird. Das PAL SDK erfordert, dass jede neue Streamanfrage von einer neu generierten Nonce begleitet wird. Nonces können jedoch für mehrere Anzeigenanfragen innerhalb desselben Streams wiederverwendet werden.

Wenn Sie eine App mit der webOS CLI oder webOS Studio generieren, wird eine HTML-Datei erstellt, die die webOSTV.js-Abhängigkeit enthält. Für PAL ist diese Abhängigkeit erforderlich. Weitere Informationen finden Sie in der Dokumentation zu webOSTV.js.

Fügen Sie der Datei index.html eine Abhängigkeit für das CTV PAL SDK hinzu. Laden Sie das Script-Tag nach dem Script-Tag für webOSTV.js. Ein Beispiel finden Sie in der folgenden index.html-Datei.

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

Erstellen Sie dann eine JavaScript-Datei, um einen Nonce zu generieren. Dieser Schritt umfasst den PAL-Ablauf zum Erstellen einer NonceLoader, einer NonceRequest und zum Anfordern eines Nonce mit 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();
});

Nonce an die Anzeigenanfrage anhängen

Wenn Sie die generierte Nonce verwenden möchten, hängen Sie vor dem Senden Ihrer Anzeigenanfragen den Parameter givn und den Nonce-Wert an Ihr Anzeigen-Tag an.

Achtung :Wenn Sie zuvor eine Nonce mit dem Parameter paln angegeben haben, sollten Sie dringend zu givn migrieren und paln nicht mehr senden. Wenn beide Parameter enthalten sind, ist nicht definiert, welche Nonce verwendet wird.

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

Wenn Sie Anzeigen von Google anfordern und rendern, müssen Sie das AdChoices-Symbol und das Overlay rendern.

Wiedergabeereignisse erfassen

Schließlich müssen Sie verschiedene Ereignishandler für Ihren Player implementieren. Zu Testzwecken können Sie diese an Schaltflächen-Click-Events anhängen. In einer echten Implementierung werden sie jedoch durch die entsprechenden Player-Events ausgelöst:

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

In Ihrer Implementierung sollte sendPlaybackStart aufgerufen werden, sobald die Videowiedergabe beginnt. sendPlaybackEnd sollte aufgerufen werden, sobald die Videowiedergabe beendet ist. sendAdClick sollte jedes Mal aufgerufen werden, wenn der Zuschauer auf eine Anzeige klickt. sendAdTouch sollte bei jeder Touch-Interaktion mit dem Player aufgerufen werden.

(Optional) Google Ad Manager-Signale über Ad-Server von Drittanbietern senden

Konfigurieren Sie die Anfrage des Drittanbieter-Ad-Servers für Ad Manager.

Hinweis :Wenn Sie mehrere Drittanbieterlösungen verwenden, z. B. einen Drittanbieter-SSAI-Server, der einen anderen Drittanbieter-Ad-Server aufruft, müssen Sie dafür sorgen, dass die verschlüsselte Nonce des PAL SDK an jeden Drittanbieter weitergeleitet wird.

Konfigurieren Sie den Ad-Server eines Drittanbieters so, dass die Nonce in die Serveranfrage an Ad Manager aufgenommen wird. Hier ein Beispiel für ein Anzeigen-Tag, das auf dem Ad-Server eines Drittanbieters konfiguriert ist:

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

Weitere Informationen finden Sie im Leitfaden zur serverseitigen Implementierung von Google Ad Manager.

In Ad Manager wird nach givn= gesucht, um den Nonce-Wert zu ermitteln. Der Ad‑Server des Drittanbieters muss ein eigenes Makro wie %%custom_key_for_google_nonce%% unterstützen und es durch den Nonce-Abfrageparameter ersetzen, den Sie im vorherigen Schritt angegeben haben. Weitere Informationen dazu finden Sie in der Dokumentation des Drittanbieter-Ad-Servers.

Geschafft! Der Nonce-Parameter sollte jetzt vom PAL SDK über Ihre Vermittlungsserver an Google Ad Manager weitergegeben werden. So lässt sich die Monetarisierung über Google Ad Manager verbessern.