Bu kılavuzda, PAL SDK'sını bir LG webOS uygulamasına dahil etme, tek seferlik rastgele sayı isteme ve reklam gösterimlerini kaydetme konuları ele alınmaktadır.
Ön koşullar
Bu kılavuza başlamadan önce temel bir LG webOS uygulaması oluşturun. Uygulamayı ayarlamak için webOS KSA'yı veya webOS Studio'yu kullanabilirsiniz. Daha fazla bilgi için İlk Uygulamanızı Oluşturma Kılavuzu'na bakın.
Tek seferlik rastgele sayı oluşturma
"Nonce", PAL tarafından NonceLoader kullanılarak oluşturulan tek bir şifrelenmiş dizedir.
PAL SDK'sı, her yeni akış isteğinin yeni oluşturulmuş bir nonce ile birlikte gönderilmesini gerektirir. Ancak aynı akış içindeki birden fazla reklam isteği için nonce'lar yeniden kullanılabilir.
webOS CLI veya webOS Studio'yu kullanarak bir uygulama oluşturduğunuzda, webOSTV.js bağımlılığını içeren bir HTML dosyası oluşturulur. PAL'ın çalışması için bu bağımlılık gerekir. Daha fazla bilgi için webOSTV.js dokümanlarına bakın.
index.html dosyanıza CTV PAL SDK için bir bağımlılık ekleyin. webOSTV.js için komut dosyası etiketinden sonra komut dosyası etiketini yükleyin. Örnek için aşağıdaki index.html dosyasına bakın.
<!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>
Ardından, nonce oluşturmak için bir JavaScript dosyası oluşturun. Bu adımda, NonceLoader oluşturma, NonceRequest oluşturma ve ardından NonceLoader.loadNonceManager() kullanarak nonce isteme gibi PAL iş akışı yer alır.
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();
});
Tek seferlik rastgele sayınızı reklam isteğine ekleyin
Oluşturulan nonce'u kullanmak için reklam isteklerinizi yapmadan önce reklam etiketinize givn parametresini ve nonce değerini ekleyin.
/**
* 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);
})
Google'dan reklam isteğinde bulunuyor ve reklam oluşturuyorsanız AdChoices simgesini ve yer paylaşımını oluşturmanız gerekir.
Oynatma etkinliklerini izleme
Son olarak, oynatıcınız için çeşitli etkinlik işleyicileri uygulamanız gerekir. Test amacıyla bunları düğme tıklama etkinliklerine ekleyebilirsiniz ancak gerçek bir uygulamada bunlar uygun oynatıcı etkinlikleriyle tetiklenir:
/**
* 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();
}
}
Uygulamanızda, video oynatma oturumunuz başladıktan sonra sendPlaybackStart çağrılmalıdır. Video oynatma oturumunuz sona erdiğinde sendPlaybackEnd çağrılmalıdır. sendAdClick, izleyici bir reklamı her tıkladığında çağrılmalıdır. sendAdTouch, oynatıcıyla her dokunma etkileşiminde çağrılmalıdır.
(İsteğe bağlı) Google Ad Manager sinyallerini üçüncü taraf reklam sunucuları üzerinden gönderme
Üçüncü taraf reklam sunucusunun Ad Manager isteğini yapılandırın.
Üçüncü taraf reklam sunucunuzu, sunucunun Ad Manager'a yaptığı isteğe nonce'ı dahil edecek şekilde yapılandırın. Üçüncü taraf reklam sunucusunda yapılandırılmış bir reklam etiketi örneğini aşağıda bulabilirsiniz:
'https://pubads.serverside.net/gampad/ads?givn=%%custom_key_for_google_nonce%%&...'
Daha fazla bilgi için Google Ad Manager sunucu tarafı uygulama kılavuzuna bakın.
Ad Manager, nonce değerini belirlemek için givn= öğesini arar. Üçüncü taraf reklam sunucusunun, %%custom_key_for_google_nonce%% gibi kendi makrolarından birini desteklemesi ve bunu önceki adımda sağladığınız nonce sorgu parametresiyle değiştirmesi gerekir. Bunu nasıl yapacağınızla ilgili daha fazla bilgiyi üçüncü taraf reklam sunucusunun belgelerinde bulabilirsiniz.
İşte bu kadar. Artık tek seferlik rastgele sayı parametresinin PAL SDK'sından, aracı sunucularınızdan ve ardından Google Ad Manager'a iletilmesi gerekir. Bu sayede Google Ad Manager üzerinden daha iyi para kazanma olanağı elde edebilirsiniz.