Mulai

Membuat nonce

"Nonce" adalah satu string terenkripsi yang dibuat oleh PAL menggunakan NonceLoader. PAL SDK mewajibkan setiap permintaan streaming baru disertai dengan nonce yang baru dibuat. Namun, nonce dapat digunakan kembali untuk beberapa permintaan iklan dalam streaming yang sama. Untuk melihat aplikasi contoh yang menggunakan PAL untuk membuat nonce, download contoh HTML5 dari GitHub.

Untuk membuat nonce menggunakan PAL SDK, buat file HTML dan tambahkan berikut:

pal.html

<html>
<head></head>
<body>
  <div id="placeholder-video"></div>
  <button id="generate-nonce">Generate Nonce</button>
  <script src="//imasdk.googleapis.com/pal/sdkloader/pal.js"></script>
  <script src="pal.js"></script>
</body>
</html>

Kemudian, buat file JavaScript dan tambahkan kode berikut:

pal.js

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', (e) => void onVideoTouch(e));
  videoElement.addEventListener('touchstart', (e) => void onVideoTouch(e));
  videoElement.addEventListener('play', () => {
    if (!playbackStarted) {
      sendPlaybackStart();
      playbackStarted = true;
    }
  });
  videoElement.addEventListener('ended', () => void sendPlaybackEnd());
  videoElement.addEventListener('error', () => {
    console.log("Video error: " + videoElement.error.message);
    sendPlaybackEnd();
  });

  document.getElementById('generate-nonce')
      .addEventListener('click', generateNonce);

  // 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.pal.NonceLoader(consentSettings);
}

/**
 * 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.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/html5';
  request.videoHeight = 480;
  request.videoWidth = 640;

  managerPromise = nonceLoader.loadNonceManager(request);
  managerPromise
      .then((manager) => {
        nonceManager = manager;
        console.log('Nonce generated: ' + manager.getNonce());
      })
      .catch((error) => {
        console.log('Error generating nonce: ' + error);
      });
}

init();

Lampirkan nonce Anda ke panggilan iklan

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

pal.js

  /**
   * 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((manager) => {
        nonceManager = manager;
        console.log('Nonce generated: ' + manager.getNonce());
        
        // Append the nonce to the ad tag URL.
        makeAdRequest(DEFAULT_AD_TAG + "&givn=" + nonceString);
      })

Jika Anda meminta dan merender iklan dari Google, Anda harus merender ikon dan overlay AdChoices. Untuk mengetahui detail tentang mengurai respons VAST dan merender ikon, lihat Ikon dan overlay AdChoices.

Melacak peristiwa pemutaran

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

pal.js

/**
 * Informs PAL that an ad click has occurred. How this function is
 * called will vary depending on your ad implementation.
 */
function sendAdClick() {
  nonceManager?.sendAdClick();
}

/**
 * Handles the user touching on the video element, passing it to PAL.
 * @param {!TouchEvent|!MouseEvent} touchEvent
 */
function onVideoTouch(touchEvent) {
  nonceManager?.sendAdTouch(touchEvent);
}

/** Informs PAL that playback has started. */
function sendPlaybackStart() {
  nonceManager?.sendPlaybackStart();
}

/** Informs PAL that playback has ended. */
function sendPlaybackEnd() {
  nonceManager?.sendPlaybackEnd();
}

Dalam penerapan Anda, sendPlaybackStart harus dipanggil setelah sesi pemutaran video Anda 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

Konfigurasi permintaan server iklan pihak ketiga untuk Ad Manager.

Konfigurasi server iklan pihak ketiga Anda untuk menyertakan nonce dalam permintaan server ke Ad Manager. Berikut adalah 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. Server iklan pihak ketiga 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 seharusnya tersedia dalam dokumentasi server iklan pihak ketiga.

Selesai! Sekarang Anda akan 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.