Làm quen với Tizen (Samsung)

Để xem một ứng dụng mẫu sử dụng PAL để tạo số chỉ dùng một lần, hãy tải ví dụ về CTV (Tizen) xuống từ GitHub.

Hướng dẫn này kết hợp SDK PAL vào ứng dụng Samsung (Tizen), yêu cầu một số chỉ dùng một lần và đăng ký số lượt hiển thị quảng cáo.

Điều kiện tiên quyết

Trước khi bắt đầu hướng dẫn này, bạn cần tạo một ứng dụng Tizen cơ bản. Bạn có thể sử dụng IDE Tizen để thiết lập ứng dụng. Hãy xem video này về cách bắt đầu sử dụng Tizen để biết thêm thông tin.

Tạo một số chỉ dùng một lần

"Số chỉ dùng một lần" là một chuỗi đã mã hoá duy nhất do PAL tạo bằng NonceLoader. SDK PAL đòi hỏi mỗi yêu cầu luồng mới phải đi kèm với một số chỉ dùng một lần đã tạo. Tuy nhiên, số chỉ dùng một lần có thể được sử dụng lại cho nhiều yêu cầu quảng cáo trong cùng một luồng.

Tạo tệp HTML cho ứng dụng. Thêm phần phụ thuộc webapis.js vào tệp HTML. PAL yêu cầu phần phụ thuộc này để hoạt động. Để biết thêm thông tin, hãy xem tài liệu về Samsung WebApi.

Thêm phần phụ thuộc cho SDK CTV PAL vào tệp index.html. Tải thẻ tập lệnh theo thẻ tập lệnh cho webapis.js. Hãy xem tệp index.html sau đây để biết ví dụ.

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

Tín hiệu thư rác PAL yêu cầu một số đặc quyền của Tizen để hoạt động đúng cách. Tạo tệp config.xml có các nội dung khai báo đặc quyền sau:

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

Hãy xem đoạn mã sau đây để biết ví dụ về tệp 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>

Sau đó, hãy tạo một tệp JavaScript để tạo số chỉ dùng một lần. Bước này bao gồm quy trình công việc của PAL để tạo NonceLoader, tạo NonceRequest, sau đó yêu cầu số chỉ dùng một lần bằng 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();
});

Đính kèm số chỉ dùng một lần vào yêu cầu quảng cáo

Để sử dụng số chỉ dùng một lần đã tạo, hãy thêm thông số givn và giá trị số chỉ dùng một lần vào thẻ quảng cáo trước khi tạo yêu cầu quảng cáo.

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

Theo dõi sự kiện phát

Cuối cùng, bạn cần triển khai nhiều trình xử lý sự kiện cho trình phát của mình. Để cho mục đích thử nghiệm, bạn có thể đính kèm chúng vào các sự kiện nhấp vào nút, nhưng trong , những sự kiện này sẽ được kích hoạt bởi các sự kiện người chơi thích hợp:

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

Trong quá trình triển khai, bạn nên gọi sendPlaybackStart sau khi phiên phát video bắt đầu. sendPlaybackEnd sẽ được gọi sau khi video của bạn phiên phát lại kết thúc. Bạn nên gọi sendAdClick mỗi khi người xem nhấp vào một quảng cáo. sendAdTouch phải được gọi trên mọi tương tác chạm với trình phát.

(Không bắt buộc) Gửi tín hiệu Google Ad Manager thông qua máy chủ quảng cáo của bên thứ ba

Định cấu hình yêu cầu của máy chủ quảng cáo bên thứ ba cho Ad Manager.

Định cấu hình máy chủ quảng cáo của bên thứ ba để đưa số chỉ dùng một lần vào yêu cầu của máy chủ đến Ad Manager. Dưới đây là ví dụ về một thẻ quảng cáo được định cấu hình bên trong máy chủ quảng cáo của bên thứ ba:

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

Để biết thêm thông tin chi tiết, hãy xem phần triển khai phía máy chủ Google Ad Manager hướng dẫn.

Ad Manager tìm givn= để xác định giá trị số chỉ dùng một lần. Quảng cáo của bên thứ ba máy chủ cần hỗ trợ một số macro của riêng mình, chẳng hạn như %%custom_key_for_google_nonce%% rồi thay thế bằng tham số truy vấn số chỉ dùng một lần mà bạn đã cung cấp ở bước trước. Bạn có thể xem thêm thông tin về cách thực hiện việc này trong tài liệu của máy chủ quảng cáo bên thứ ba.

Vậy là xong! Bây giờ, bạn sẽ thấy thông số số chỉ dùng một lần được truyền từ SDK PAL, thông qua các máy chủ trung gian rồi đến Google Ad Manager. Điều này giúp bạn kiếm tiền hiệu quả hơn thông qua Google Ad Manager.