ননস তৈরি করতে PAL ব্যবহার করে এমন একটি নমুনা অ্যাপ দেখতে, GitHub থেকে CTV (Tizen) উদাহরণ ডাউনলোড করুন।
এই নির্দেশিকাটি PAL SDK-কে একটি Samsung (Tizen) অ্যাপ্লিকেশনে অন্তর্ভুক্ত করে, একটি ননস অনুরোধ করে এবং বিজ্ঞাপন ইম্প্রেশন নিবন্ধন করে।
পূর্বশর্ত
এই নির্দেশিকা শুরু করার আগে, আপনাকে একটি মৌলিক Tizen অ্যাপ তৈরি করতে হবে। আপনি অ্যাপ সেট আপ করতে Tizen IDE ব্যবহার করতে পারেন। আরও তথ্যের জন্য Tizen এর সাথে শুরু করার এই ভিডিওটি দেখুন।
একটি nonce জেনারেট
একটি "nonce" হল একটি একক এনক্রিপ্ট করা স্ট্রিং যা PAL দ্বারা NonceLoader ব্যবহার করে তৈরি করা হয়। PAL SDK-এর জন্য প্রতিটি নতুন স্ট্রিম অনুরোধের সাথে একটি নতুন জেনারেট করা ননস প্রয়োজন। যাইহোক, একই স্ট্রীমের মধ্যে একাধিক বিজ্ঞাপনের অনুরোধের জন্য ননসেস পুনরায় ব্যবহার করা হতে পারে।
আপনার অ্যাপের জন্য একটি 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>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>
তারপরে, একটি নন্স জেনারেট করতে একটি জাভাস্ক্রিপ্ট ফাইল তৈরি করুন। এই ধাপে একটি NonceLoader তৈরি করা, একটি NonceRequest তৈরি করা এবং তারপর NonceLoader.loadNonceManager() ব্যবহার করে একটি ননস অনুরোধ করার PAL ওয়ার্কফ্লো অন্তর্ভুক্ত রয়েছে।
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();
});
বিজ্ঞাপনের অনুরোধে আপনার ননস সংযুক্ত করুন
জেনারেটেড নন্স ব্যবহার করতে, আপনার বিজ্ঞাপনের অনুরোধ করার আগে একটি 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);
})
প্লেব্যাক ঘটনা ট্র্যাক
অবশেষে, আপনাকে আপনার প্লেয়ারের জন্য বিভিন্ন ইভেন্ট হ্যান্ডলার প্রয়োগ করতে হবে। পরীক্ষার উদ্দেশ্যে, আপনি এগুলিকে বোতাম ক্লিক ইভেন্টগুলিতে সংযুক্ত করতে পারেন, কিন্তু বাস্তব বাস্তবায়নে, উপযুক্ত প্লেয়ার ইভেন্টগুলির দ্বারা এগুলি ট্রিগার হবে:
/**
* 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 সংকেত পাঠান
অ্যাড ম্যানেজারের জন্য তৃতীয় পক্ষের বিজ্ঞাপন সার্ভারের অনুরোধ কনফিগার করুন।
অ্যাড ম্যানেজারের কাছে সার্ভারের অনুরোধে ননস অন্তর্ভুক্ত করতে আপনার তৃতীয় পক্ষের বিজ্ঞাপন সার্ভার কনফিগার করুন। তৃতীয় পক্ষের বিজ্ঞাপন সার্ভারের ভিতরে কনফিগার করা একটি বিজ্ঞাপন ট্যাগের উদাহরণ এখানে দেওয়া হল:
'https://pubads.serverside.net/gampad/ads?givn=%%custom_key_for_google_nonce%%&...'
আরও বিশদ বিবরণের জন্য, Google অ্যাড ম্যানেজার সার্ভার-সাইড বাস্তবায়ন নির্দেশিকা দেখুন।
বিজ্ঞাপন ম্যানেজার নন্স ভ্যালু সনাক্ত করতে givn= খোঁজে। তৃতীয় পক্ষের বিজ্ঞাপন সার্ভারের নিজস্ব কিছু ম্যাক্রো সমর্থন করতে হবে, যেমন %%custom_key_for_google_nonce%% , এবং এটিকে আপনার পূর্ববর্তী ধাপে দেওয়া ননস কোয়েরি প্যারামিটার দিয়ে প্রতিস্থাপন করতে হবে। এটি কীভাবে সম্পন্ন করা যায় সে সম্পর্কে আরও তথ্য তৃতীয় পক্ষের বিজ্ঞাপন সার্ভারের ডকুমেন্টেশনে পাওয়া উচিত।
তাই তো! আপনার এখন PAL SDK থেকে আপনার মধ্যস্থতাকারী সার্ভারের মাধ্যমে এবং তারপর Google Ad Manager-এর মাধ্যমে ননস প্যারামিটার প্রচার করা উচিত। এটি Google Ad Manager-এর মাধ্যমে আরও ভাল নগদীকরণ সক্ষম করে৷