このガイドでは、PAL SDK を LG webOS アプリケーションに組み込み、ノンスをリクエストして、広告のインプレッションを登録します。
前提条件
このガイドを開始する前に、基本的な LG webOS アプリを作成します。アプリの設定には、webOS CLI または webOS Studio を使用できます。詳細については、初めてのアプリを作成するガイドをご覧ください。
ノンスを生成する
「ノンス」は、PAL が NonceLoader を使用して生成する単一の暗号化された文字列です。PAL SDK では、新しいストリーム リクエストごとに、新しく生成されたノンスを付加する必要があります。ただし、同じストリーム内の複数の広告リクエストで nonce を再利用することは可能です。
webOS CLI または webOS Studio を使用してアプリを生成すると、webOSTV.js 依存関係を含む HTML ファイルが作成されます。PAL が機能するには、この依存関係が必要です。詳細については、webOSTV.js のドキュメントをご覧ください。
index.html ファイルに CTV PAL SDK の依存関係を含めます。webOSTV.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">
<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>
次に、JavaScript ファイルを作成して nonce を生成します。このステップには、NonceLoader の作成、NonceRequest の作成、NonceLoader.loadNonceManager() を使用した nonce のリクエストという PAL ワークフローが含まれます。
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();
});
ノンスを広告リクエストに添付する
生成されたノンスを使用するには、広告リクエストを行う前に、広告タグに givn パラメータとノンス値を追加します。
/**
* 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 から広告をリクエストしてレンダリングする場合は、AdChoices アイコンとオーバーレイをレンダリングする必要があります。
再生イベントをトラッキングする
最後に、プレーヤーにさまざまなイベント ハンドラを実装する必要があります。テスト目的で、これらをボタンのクリック イベントに関連付けることができますが、実際の実装では、適切なプレーヤー イベントによってトリガーされます。
/**
* 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 を 1 回呼び出す必要があります。sendPlaybackEnd は、動画再生セッションが終了したときに呼び出す必要があります。sendAdClick は、視聴者が広告をクリックするたびに呼び出す必要があります。sendAdTouch は、プレーヤーとのタッチ操作ごとに呼び出す必要があります。
（省略可）第三者広告サーバー経由で Google アド マネージャーのシグナルを送信する
アド マネージャーに対するサードパーティ広告サーバーのリクエストを設定します。
アド マネージャーへのサーバーのリクエストに nonce を含めるように、第三者広告サーバーを設定します。以下に、第三者広告サーバー内で構成された広告タグの例を示します。
'https://pubads.serverside.net/gampad/ads?givn=%%custom_key_for_google_nonce%%&...'
詳しくは、Google アド マネージャーのサーバーサイド実装ガイドをご覧ください。
アド マネージャーは、givn= を探して nonce 値を特定します。第三者広告サーバーは、%%custom_key_for_google_nonce%% などの独自のマクロをサポートし、前の手順で指定した nonce クエリ パラメータに置き換える必要があります。この方法について詳しくは、サードパーティ広告サーバーのドキュメントをご覧ください。
これで、これで、PAL SDK から仲介サーバーを経由して Google アド マネージャーに nonce パラメータが伝播されるようになります。これにより、Google アド マネージャーを通じて収益化を促進できます。