Erste Schritte mit Samsung Tizen

Eine Beispiel-App, in der mit PAL eine Nonce generiert wird, finden Sie auf GitHub. Dort können Sie das CTV-Beispiel für Samsung Tizen herunterladen.

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

Vorbereitung

Bevor Sie mit dieser Anleitung beginnen, müssen Sie eine einfache Tizen-App erstellen. Sie können die Tizen IDE verwenden, um die App einzurichten. Weitere Informationen finden Sie in diesem Video zum Einstieg in Tizen.

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.

Erstellen Sie eine HTML-Datei für Ihre App. Fügen Sie die webapis.js-Abhängigkeit in Ihre HTML-Datei ein. PAL benötigt diese Abhängigkeit, um zu funktionieren. Weitere Informationen finden Sie in der Samsung WebApi-Dokumentation.

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 webapis.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">
 <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>

Für PAL-Spamsignale sind bestimmte Tizen-Berechtigungen erforderlich, damit sie richtig funktionieren. Erstellen Sie eine config.xml-Datei mit den folgenden Berechtigungserklärungen:

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

Hier ein Beispiel für eine config.xml-Datei:

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

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

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

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.