PAL을 사용하여 nonce를 생성하는 샘플 앱을 보려면 GitHub에서 CTV Samsung Tizen 예시를 다운로드하세요.
이 가이드에서는 PAL SDK를 Samsung Tizen 애플리케이션에 통합하고, nonce를 요청하고, 광고 노출을 등록합니다.
기본 요건
이 가이드를 시작하기 전에 기본 Tizen 앱을 만들어야 합니다. Tizen IDE를 사용하여 앱을 설정할 수 있습니다. 자세한 내용은 Tizen 시작하기에 관한 이 동영상을 참고하세요.
nonce 생성
'nonce'는 PAL이 NonceLoader를 사용하여 생성한 단일 암호화 문자열입니다.
PAL SDK에서는 각 새 스트림 요청에 새로 생성된 nonce가 포함되어야 합니다. 하지만 동일한 스트림 내에서 여러 광고 요청에 대해 nonce가 재사용될 수 있습니다.
앱의 HTML 파일을 만듭니다. HTML 파일에 webapis.js 종속 항목을 포함합니다. PAL이 작동하려면 이 종속 항목이 필요합니다. 자세한 내용은 Samsung WebApi 문서를 참고하세요.
index.html 파일에 CTV PAL SDK의 종속 항목을 포함합니다. 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>Samsung 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를 생성합니다. 이 단계에는 NonceLoader 생성, NonceRequest 생성, NonceLoader.loadNonceManager()를 사용한 nonce 요청의 PAL 워크플로가 포함됩니다.
let videoElement;
let nonceLoader;
let managerPromise;
let nonceManager;
let playbackStarted = false;
/**
* 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 the `allowStorage` parameter is false. You must
// set this value to true to let PAL determine whether limited ads applies
// based on the TCF data. You can optionlly use the `forceLimitedAds`
// parameter to enable limited ads regardless of the TCF data.
const consentSettings = new goog.pal.ConsentSettings();
consentSettings.allowStorage = true;
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에 대한 서드 파티 광고 서버의 요청을 구성합니다.
서버가 Ad Manager에 요청할 때 nonce를 포함하도록 서드 파티 광고 서버를 구성합니다. 다음은 외부 광고 서버 내에서 구성된 광고 태그의 예입니다.
'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 쿼리 매개변수로 대체해야 합니다. 이 작업을 수행하는 방법에 관한 자세한 내용은 서드 파티 광고 서버의 문서를 참고하세요.
작업이 끝났습니다. 이제 PAL SDK에서 중간 서버를 거쳐 Google Ad Manager로 전파된 nonce 매개변수가 있어야 합니다. 이를 통해 Google Ad Manager를 통한 수익 창출을 개선할 수 있습니다.