Halaman ini diterjemahkan oleh Cloud Translation API.

Mulai menggunakan Tizen (Samsung)

Untuk melihat contoh aplikasi yang menggunakan PAL untuk membuat nonce, download contoh CTV (Tizen) dari GitHub.

Panduan ini menyertakan PAL SDK ke dalam aplikasi Samsung (Tizen), permintaan nonce, dan mencatat tayangan iklan.

Prasyarat

Sebelum memulai panduan ini, Anda perlu membuat aplikasi Tizen dasar. Anda dapat menggunakan Tizen IDE untuk menyiapkan aplikasi. Lihat video ini di mulai menggunakan Tizen untuk informasi selengkapnya.

Membuat nonce

"Nonce" adalah satu string terenkripsi yang dihasilkan oleh PAL menggunakan NonceLoader. PAL SDK mewajibkan setiap permintaan streaming baru untuk disertai dengan nonce yang baru dibuat. Namun, nonce dapat digunakan kembali untuk beberapa permintaan iklan dalam {i>stream<i} yang sama.

Buat file HTML untuk aplikasi Anda. Sertakan dependensi webapis.js di file HTML. PAL memerlukan dependensi ini agar dapat berfungsi. Untuk informasi selengkapnya, lihat tindakan Dokumentasi Samsung WebApi.

Sertakan dependensi untuk CTV PAL SDK dalam file index.html Anda. Muat tag skrip setelah tag skrip untuk webapis.js. Lihat yang berikut ini File index.html sebagai contoh.

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

Sinyal spam PAL memerlukan hak istimewa Tizen tertentu agar berfungsi dengan baik. Buat File config.xml dengan deklarasi hak istimewa berikut:

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

Lihat cuplikan kode berikut untuk contoh file config.xml:

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

Kemudian, buat file JavaScript untuk membuat nonce. Langkah ini mencakup PAL alur kerja pembuatan NonceLoader, pembuatan NonceRequest, lalu meminta nonce menggunakan 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();
});

Lampirkan nonce Anda ke permintaan iklan

Untuk menggunakan nonce yang dihasilkan, tambahkan tag iklan Anda dengan parameter givn dan nilai nonce, sebelum membuat permintaan iklan.

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

Melacak peristiwa pemutaran

Terakhir, Anda perlu menerapkan berbagai pengendali peristiwa untuk pemutar. Untuk tujuan pengujian, Anda dapat melampirkan peristiwa ini ke peristiwa klik tombol, tetapi dalam penerapan yang sebenarnya, peristiwa ini akan dipicu oleh peristiwa pemain yang sesuai:

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

Dalam penerapan Anda, sendPlaybackStart harus dipanggil setelah sesi pemutaran video dimulai. sendPlaybackEnd harus dipanggil setelah sesi pemutaran video Anda berakhir. sendAdClick harus dipanggil setiap kali penonton mengklik iklan. sendAdTouch harus dipanggil pada setiap interaksi sentuh dengan pemutar.

(Opsional) Mengirim sinyal Google Ad Manager melalui server iklan pihak ketiga

Konfigurasikan permintaan server iklan pihak ketiga untuk Ad Manager.

Konfigurasikan server iklan pihak ketiga Anda untuk menyertakan nonce dalam permintaan server ke Ad Manager. Berikut contoh tag iklan yang dikonfigurasi di dalam server iklan pihak ketiga:

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

Untuk mengetahui detail selengkapnya, lihat Panduan penerapan sisi server Google Ad Manager.

Ad Manager mencari givn= untuk mengidentifikasi nilai nonce. Iklan pihak ketiga server tersebut harus mendukung beberapa makronya sendiri, seperti %%custom_key_for_google_nonce%%, dan menggantinya dengan parameter kueri nonce yang Anda berikan pada langkah sebelumnya. Informasi selengkapnya tentang cara melakukannya akan tersedia di dokumentasi server iklan pihak ketiga.

Selesai. Sekarang Anda seharusnya memiliki parameter nonce yang disebarkan dari PAL SDK, melalui server perantara Anda, lalu ke Google Ad Manager. Hal ini memungkinkan monetisasi yang lebih baik melalui Google Ad Manager.