Erste Schritte mit Tizen (Samsung)

Wenn Sie sich eine Beispiel-App ansehen möchten, die PAL zum Generieren einer Nonce verwendet, laden Sie CTV (Tizen) herunter. Beispiel von GitHub

In diesem Leitfaden wird beschrieben, wie du das PAL SDK in eine Samsung-Anwendung (Tizen) einbindest, eine Nonce anforderst und Anzeigenimpressionen registrierst.

Vorbereitung

Bevor Sie mit dieser Anleitung beginnen, müssen Sie eine einfache Tizen-App erstellen. Sie können die Tizen-IDE, um die App einzurichten. Dieses Video ansehen auf Erste Schritte mit Tizen .

Nonce generieren

Ein „Nonce“ ist ein einzelner verschlüsselter String, der von PAL mithilfe der NonceLoader generiert wird. Für das PAL SDK muss jede neue Streamanfrage von einer neu generierten Nonce begleitet sein. Nonces können jedoch für mehrere Anzeigenanfragen innerhalb denselben Stream ansehen.

Erstellen Sie eine HTML-Datei für Ihre App. Fügen Sie die webapis.js-Abhängigkeit in die HTML-Datei ein. Diese Abhängigkeit ist für PAL erforderlich. Weitere Informationen finden Sie in der Samsung WebApi-Dokumentation.

Füge eine Abhängigkeit für das CTV PAL SDK in deine index.html-Datei ein. Laden Sie das Script-Tag nach dem Script-Tag für webapis.js. Die folgende index.html-Datei ist ein Beispiel.

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

Für die ordnungsgemäße Funktion von PAL-Spamsignalen sind bestimmte Tizen-Berechtigungen erforderlich. Erstellen: 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"

Das folgende Code-Snippet zeigt eine config.xml-Beispieldatei:

<?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 Einmalcode zu generieren. Dieser Schritt umfasst den PAL-Workflow zum Erstellen einer NonceLoader, einer NonceRequest und dann zum Anfordern einer Nonce mit 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();
});

Nonce an die Anzeigenanfrage anhängen

Um die generierte Nonce zu verwenden, hängen Sie Ihr Anzeigen-Tag mit einem givn-Parameter und dem Nonce-Wert zu verwenden, bevor Sie Ihre Anzeigenanfragen stellen.

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

Wiedergabeereignisse erfassen

Schließlich musst du verschiedene Ereignishandler für deinen Player implementieren. Für können Sie sie an Schaltflächen-Click-Events anhängen. Implementierung, werden sie durch die entsprechenden Player-Ereignisse 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 deiner Implementierung sollte sendPlaybackStart aufgerufen werden, sobald die Videowiedergabe beginnt. sendPlaybackEnd sollte aufgerufen werden, wenn die Videowiedergabe beendet ist. sendAdClick sollte jedes Mal aufgerufen werden, wenn der wenn der Nutzer auf eine Anzeige klickt. sendAdTouch sollte bei jeder Berührungsinteraktion aufgerufen werden. mit dem Player.

(Optional) Google Ad Manager-Signale über Ad-Server eines Drittanbieters senden

Konfigurieren Sie die Anfrage des Ad-Servers eines Drittanbieters an Ad Manager.

Konfigurieren Sie den Ad-Server eines Drittanbieters so, dass die Nonce im an Ad Manager senden. Hier sehen Sie ein Beispiel für ein Anzeigen-Tag, das im eines Drittanbieter-Ad-Servers:

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

Weitere Informationen finden Sie unter Serverseitige Google Ad Manager-Implementierung .

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 im vorherigen Schritt angegebenen Abfrageparameter „nonce“ ersetzen. Weitere Informationen dazu, wie Sie dies erreichen in der Dokumentation des Drittanbieter-Ad-Servers verfügbar sein.

Fertig! Der Nonce-Parameter sollte nun vom PAL SDK weitergegeben werden. zwischen den Servern und dann an Google Ad Manager übertragen werden. So lässt sich die Monetarisierung über Google Ad Manager optimieren.