เริ่มต้นใช้งาน Tizen (Samsung)

ดาวน์โหลด CTV (Tizen) เพื่อดูตัวอย่างแอปที่ใช้ PAL ในการสร้างค่า Nonce ตัวอย่างจาก GitHub

คู่มือนี้รวม PAL SDK เข้ากับแอปพลิเคชัน Samsung (Tizen) ตามคำขอ Nonce และลงทะเบียนการแสดงโฆษณา

ข้อกำหนดเบื้องต้น

คุณต้องสร้างแอป Tizen พื้นฐานก่อนเริ่มต้นคู่มือนี้ คุณสามารถใช้ Tizen IDE เพื่อตั้งค่าแอป ดูวิดีโอนี้บน เริ่มต้นใช้งาน Tizen เพื่อดูข้อมูลเพิ่มเติม

สร้าง Nonce

"Nonce" คือสตริงที่เข้ารหัสรายการเดียวที่ PAL สร้างขึ้นโดยใช้ NonceLoader PAL SDK กำหนดให้คำขอสตรีมใหม่แต่ละรายการต้องมีแท็ก Nonce ที่สร้างขึ้น อย่างไรก็ตาม อาจมีการนำ nonces ไปใช้ซ้ำสำหรับคำขอโฆษณาหลายรายการภายใน สตรีมเดียวกัน

สร้างไฟล์ HTML สำหรับแอปของคุณ รวมทรัพยากร Dependency webapis.js ไว้ใน HTML PAL ต้องใช้ทรัพยากรนี้ในการทำงาน สำหรับข้อมูลเพิ่มเติม โปรดดู เวลา เอกสารประกอบของ Samsung WebApi

รวมไฟล์ CTV PAL SDK ไว้ในไฟล์ index.html โหลดแท็กสคริปต์ตามหลังแท็กสคริปต์สําหรับ webapis.js โปรดดูข้อมูลต่อไปนี้ index.html เป็นตัวอย่าง

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

สัญญาณสแปม PAL ต้องใช้สิทธิ์บางอย่างของ Tizen จึงจะทำงานได้อย่างถูกต้อง สร้างไฟล์ config.xml ที่มีประกาศสิทธิ์ต่อไปนี้

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

ดูตัวอย่างไฟล์ 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>

จากนั้นสร้างไฟล์ JavaScript เพื่อสร้าง Nonce ขั้นตอนนี้ประกอบด้วยเวิร์กโฟลว์ PAL ในการสร้าง NonceLoader, การสร้าง NonceRequest และส่งคําขอ Nonce โดยใช้ 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 กับคำขอโฆษณา

หากต้องการใช้ค่า Nonce ที่สร้างขึ้น ให้เพิ่มแท็กโฆษณาด้วยพารามิเตอร์ givn และพารามิเตอร์ ค่า 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);
        
      })

ติดตามเหตุการณ์การเล่น

สุดท้าย คุณต้องใช้ตัวแฮนเดิลเหตุการณ์ต่างๆ สําหรับโปรแกรมเล่น สำหรับ คุณสามารถแนบเหตุการณ์เหล่านี้กับเหตุการณ์การคลิกปุ่มได้ แต่จริงๆ แล้ว เหตุการณ์เหล่านี้จะเกิดขึ้นจากเหตุการณ์ของผู้เล่นที่เหมาะสม

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

ในการใช้งาน ควรเรียก sendPlaybackStart เมื่อวิดีโอของคุณ เริ่มต้นเซสชันการเล่น sendPlaybackEnd ควรเรียกใช้เมื่อเซสชันการเล่นวิดีโอสิ้นสุดลง sendAdClick ควรเรียกใช้ทุกครั้งที่ผู้ชมคลิกโฆษณา ควรเรียก sendAdTouch ทุกครั้งที่โต้ตอบด้วยการสัมผัส กับโปรแกรมเล่น

(ไม่บังคับ) ส่งสัญญาณ Google Ad Manager ผ่านเซิร์ฟเวอร์โฆษณาบุคคลที่สาม

กําหนดค่าคําขอของเซิร์ฟเวอร์โฆษณาบุคคลที่สามสําหรับ Ad Manager

กำหนดค่าเซิร์ฟเวอร์โฆษณาบุคคลที่สามให้รวมค่า Nonce ไว้ใน ไปยัง Ad Manager ต่อไปนี้คือตัวอย่างแท็กโฆษณาที่กําหนดค่าภายในเซิร์ฟเวอร์โฆษณาของบุคคลที่สาม

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

โปรดดูรายละเอียดเพิ่มเติมที่การใช้งานฝั่งเซิร์ฟเวอร์ของ Google Ad Manager

Ad Manager จะมองหา givn= เพื่อระบุค่า Nonce เซิร์ฟเวอร์โฆษณาของบุคคลที่สามต้องรองรับมาโครบางอย่างของตนเอง เช่น %%custom_key_for_google_nonce%% และแทนที่ด้วยพารามิเตอร์การค้นหา Nonce ที่คุณระบุไว้ในขั้นตอนก่อนหน้า ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีดำเนินการนี้ได้ในเอกสารประกอบของเซิร์ฟเวอร์โฆษณาบุคคลที่สาม

เท่านี้ก็เรียบร้อย ตอนนี้คุณควรมีพารามิเตอร์ Nonce ที่เผยแพร่จาก PAL SDK ผ่านเซิร์ฟเวอร์ตัวกลาง จากนั้นไปยัง Google Ad Manager ซึ่งจะช่วยให้สร้างรายได้ได้ดีขึ้นผ่าน Google Ad Manager