PAL을 사용하여 nonce를 생성하는 샘플 앱을 보려면 CTV (Tizen)를 다운로드하세요. 예시: GitHub
이 가이드에서는 PAL SDK를 삼성(Tizen) 애플리케이션에 통합하고 nonce를 요청하고 광고 노출을 등록하는 방법을 설명합니다.
기본 요건
이 가이드를 시작하기 전에 기본 Tizen 앱을 만들어야 합니다. Tizen IDE를 사용하여 앱을 설정할 수 있습니다. 자세한 내용은 Tizen 시작하기에 관한 동영상을 참고하세요.
nonce 생성
'nonce' NonceLoader를 사용하여 PAL에서 생성한 암호화된 단일 문자열입니다.
PAL SDK에서는 각 새 스트림 요청에 새로 생성된 nonce가 포함되어야 합니다. 하지만 nonce는 동일한 스트림 내의 여러 광고 요청에 재사용될 수 있습니다.
앱의 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>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를 생성합니다. 이 단계에는 PAL이 포함됩니다.
NonceLoader를 만들고 NonceRequest를 만든 다음
NonceLoader.loadNonceManager()를 사용하여 nonce를 요청합니다.
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();
});
광고 요청에 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 쿼리 매개변수로 바꿉니다.
사용할 수 있습니다 이를 실행하는 방법에 관한 자세한 내용은 서드 파티 광고 서버 문서를 참고하세요.
작업이 끝났습니다. 이제 nonce 매개변수가 PAL SDK에서 전파되도록 합니다. 중간 서버를 통해 전달되고 Google Ad Manager로 전달됩니다. 이렇게 하면 Google Ad Manager를 통해 수익을 창출할 수 있습니다