Pierwsze kroki z systemem Tizen (Samsung)

Aby zobaczyć przykładową aplikację, która wykorzystuje PAL do generowania liczby jednorazowej, pobierz CTV (Tizen). przykład z GitHub

Ten przewodnik zawiera informacje o włączaniu pakietu PAL SDK w aplikacji Samsung (Tizen), wysyłaniu zapytania o nonce i rejestrowaniu wyświetleń reklam.

Wymagania wstępne

Przed rozpoczęciem tego przewodnika musisz utworzyć podstawową aplikację Tizen. Za pomocą w Tizen IDE. Zobacz ten film na Pierwsze kroki z Tizen .

Generowanie wartości jednorazowej

Liczba jednorazowa to pojedynczy zaszyfrowany ciąg znaków wygenerowany przez PAL za pomocą NonceLoader. Pakiet SDK PAL wymaga, aby każde nowe żądanie strumienia było poprzedzone nowo wygenerowanym identyfikatorem nonce. Liczby jednorazowe można jednak wykorzystać ponownie w wielu żądaniach w ramach ten sam strumień.

Utwórz plik HTML aplikacji. W pliku HTML uwzględnij zależność webapis.js. Aby działać, PAL wymaga tej zależności. Więcej informacji znajdziesz w dokumentacji interfejsu WebApi Samsunga.

Dodaj w pliku index.html zależność pakietu SDK CTV PAL. Załaduj tag skryptu po tagu skryptu webapis.js. Przykładowy plik index.html znajdziesz poniżej.

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

Do prawidłowego działania sygnały PAL wymagają określonych uprawnień Tizen. Utwórz config.xml z tymi deklaracjami uprawnień:

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

Przykładowy plik config.xml zawiera ten fragment kodu:

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

Następnie utwórz plik JavaScript, aby wygenerować nonce. Ten krok obejmuje PAL proces tworzenia: NonceLoader, NonceRequest, a następnie żądania liczby jednorazowej za pomocą funkcji 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();
});

Dołączanie nonce do żądania reklamy

Aby użyć wygenerowanego identyfikatora nonce, przed wysłaniem żądań reklamy dodaj do tagu reklamy parametr givn i wartość nonce.

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

Śledzenie zdarzeń odtwarzania

Na koniec musisz zaimplementować różne moduły obsługi zdarzeń dla odtwarzacza. W celu przetestowania możesz je dołączyć do zdarzeń kliknięcia przycisku, ale w rzeczywistej implementacji powinny być one wywoływane przez odpowiednie zdarzenia odtwarzacza:

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

W Twojej implementacji obiekt sendPlaybackStart powinien być wywoływany po wyświetleniu reklamy wideo. rozpocznie się sesja odtwarzania. Aplikacja sendPlaybackEnd powinna zostać wywołana po odtworzeniu filmu sesja odtwarzania dobiega końca. Funkcja sendAdClick powinna być wywoływana za każdym razem, gdy użytkownik kliknie reklamę. Aplikacja sendAdTouch powinna być wywoływana przy każdej interakcji dotykiem z odtwarzaczem.

(Opcjonalnie) Wysyłanie sygnałów Google Ad Managera za pomocą serwerów reklamowych firm zewnętrznych

Skonfiguruj żądanie serwera reklam zewnętrznych dla Ad Managera.

Skonfiguruj serwer reklamowy firmy zewnętrznej, aby uwzględniał wartość nonce w żądaniu wysyłanym do Ad Managera. Oto przykład tagu reklamy skonfigurowanego w serwerze reklamowym firmy zewnętrznej:

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

Więcej informacji znajdziesz w artykule o implementacji Google Ad Managera po stronie serwera .

Ad Manager wyszukuje wartość jednorazową za pomocą parametru givn=. Serwer reklam zewnętrzny musi obsługiwać własne makro, np. %%custom_key_for_google_nonce%%, i zastępować je parametrem zapytania nonce podanym w poprzednim kroku. Więcej informacji, jak to zrobić powinny być dostępne w dokumentacji serwera reklamowego firmy zewnętrznej.

Znakomicie. Teraz parametr jednorazowy powinien zostać rozpowszechniony z pakietu SDK PAL, przez serwery pośrednie, a potem do Google Ad Manager. Umożliwia to lepszą monetyzację za pomocą Google Ad Managera.