Hướng dẫn này kết hợp PAL SDK vào một ứng dụng webOS của LG, yêu cầu một số chỉ dùng một lần và đăng ký 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, hãy tạo một ứng dụng webOS cơ bản của LG. Bạn có thể dùng webOS CLI hoặc webOS Studio để thiết lập ứng dụng. Để biết thêm thông tin chi tiết, hãy xem hướng dẫn Tạo ứng dụng đầu tiên
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 được mã hoá duy nhất do PAL tạo bằng cách sử dụng NonceLoader.
PAL SDK yêu cầu mỗi yêu cầu phát trực tiếp mới phải đi kèm với một số chỉ dùng một lần mới được tạo. Tuy nhiên, bạn có thể dùng lại số chỉ dùng một lần cho nhiều yêu cầu quảng cáo trong cùng một luồng.
Khi bạn tạo một ứng dụng bằng webOS CLI hoặc webOS Studio, ứng dụng đó sẽ tạo một tệp HTML có chứa phần phụ thuộc webOSTV.js. PAL cần có 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ề webOSTV.js.
Thêm một phần phụ thuộc cho CTV PAL SDK vào tệp index.html. Tải thẻ tập lệnh sau thẻ tập lệnh cho webOSTV.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">
<meta name="description" content="LG app for PAL sdk"/>
<title>LG app for PAL sdk</title>
<link rel="stylesheet" href="style.css"/>
<script src="path/to/webOSTVjs/webOSTV.js" charset="utf-8"></script>
<script src="https://imasdk.googleapis.com/pal/sdkloader/pal_ctv.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<hgroup>
<h1>LG app for PAL sdk</h1>
</hgroup>
</header>
<div id="placeholder-video"></div>
</body>
</html>
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 PAL tạo NonceLoader, tạo NonceRequest, rồi yêu cầu số chỉ dùng một lần bằng cách sử dụng NonceLoader.loadNonceManager().
let videoElement;
let nonceLoader;
let managerPromise;
let nonceManager;
let playbackStarted = false;
/**
* Initializes the PAL loader.
*/
function init() {
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();
});
// 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.ctv.pal.NonceLoader(consentSettings);
generateNonce();
}
/**
* Generates a nonce with sample arguments.
*
* 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 đưa ra 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);
})
Nếu đang yêu cầu và hiển thị quảng cáo của Google, bạn phải hiển thị biểu tượng và lớp phủ AdChoices.
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. Để kiểm thử, bạn có thể đính kèm các sự kiện này vào sự kiện nhấp vào nút, nhưng trong quá trình triển khai thực tế, các sự kiện này sẽ được kích hoạt bởi các sự kiện trình phát 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, sendPlaybackStart sẽ được gọi khi phiên phát video của bạn bắt đầu. sendPlaybackEnd sẽ được gọi khi phiên phát video của bạn kết thúc. sendAdClick phải được gọi mỗi khi người xem nhấp vào một quảng cáo. sendAdTouch phải được gọi trong mọi hoạt động tương tác bằng thao 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 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 đối với 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ủ gửi đến Ad Manager. Sau đây là ví dụ về 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, hãy xem Hướng dẫn triển khai phía máy chủ của Google Ad Manager.
Ad Manager tìm kiếm givn= để xác định giá trị số chỉ dùng một lần. Máy chủ quảng cáo của bên thứ ba cần hỗ trợ một số macro của riêng mình, chẳng hạn như %%custom_key_for_google_nonce%% và thay thế macro đó 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! Giờ đây, bạn sẽ có tham số số chỉ dùng một lần được truyền từ PAL SDK, thông qua các máy chủ trung gian của bạn, 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.