আপনি আপনার ইন-পেজ HTML বিজ্ঞাপন স্লটগুলোকে ভিডিও বা ওভারলে বিজ্ঞাপন স্লটের সাথে যুক্ত করতে চাইতে পারেন। সংযুক্ত বিজ্ঞাপন স্লটগুলোর মধ্যকার এই সম্পর্ককে মাস্টার-কম্প্যানিয়ন সম্পর্ক বলা হয়।
ভিডিও এবং ওভারলে মাস্টার অ্যাড অনুরোধ করার পাশাপাশি, আপনি IMA SDK ব্যবহার করে সহযোগী HTML অ্যাডও প্রদর্শন করতে পারেন। এই অ্যাডগুলো একটি HTML পরিবেশে প্রদর্শিত হয়।
সহযোগী বিজ্ঞাপন ব্যবহার করুন
সহযোগী বিজ্ঞাপন ব্যবহার করতে, নিম্নলিখিত ধাপগুলি অনুসরণ করুন:
১. আপনার সঙ্গীর বিজ্ঞাপন বুক করুন
আপনার মাস্টার অ্যাডের সাথে যে কম্প্যানিয়ন অ্যাডগুলো দেখাতে চান, সেগুলো আপনাকে প্রথমে বুক করতে হবে। অ্যাড ম্যানেজার-এ কম্প্যানিয়ন অ্যাড ট্র্যাফিক করা যায়। আপনি প্রতিটি মাস্টার অ্যাডের জন্য সর্বোচ্চ ছয়টি কম্প্যানিয়ন অ্যাড পরিবেশন করতে পারেন। এই কৌশলটি, যেখানে একজন ক্রেতাই পেজের সমস্ত অ্যাড নিয়ন্ত্রণ করেন, তাকে রোডব্লকিং নামেও পরিচিত।
২. আপনার সহযোগী বিজ্ঞাপনগুলির জন্য অনুরোধ করুন
ডিফল্টরূপে, প্রতিটি বিজ্ঞাপন অনুরোধের জন্য সহযোগী বিজ্ঞাপন সক্রিয় থাকে।
৩. সহযোগী বিজ্ঞাপন প্রদর্শন করুন
সহযোগী বিজ্ঞাপন রেন্ডার করার দুটি উপায় আছে:
স্বয়ংক্রিয়ভাবে গুগল পাবলিশার ট্যাগ (GPT) ব্যবহার করে ।
আপনি যদি আপনার কম্প্যানিয়ন অ্যাডগুলো বাস্তবায়নের জন্য GPT ব্যবহার করেন, তাহলে সেগুলো স্বয়ংক্রিয়ভাবে প্রদর্শিত হয়, যদি HTML পেজে কম্প্যানিয়ন অ্যাড স্লট ঘোষিত থাকে এবং এই অ্যাডগুলো API-এর সাথে নিবন্ধিত থাকে (অর্থাৎ, জাভাস্ক্রিপ্ট এবং HTML-এর div ID অবশ্যই একই হতে হবে)। GPT ব্যবহারের কিছু সুবিধা হলো:
- সঙ্গী স্লট সম্পর্কে সচেতনতা।
- যদি VAST রেসপন্সে HTML পেজে নির্ধারিত স্লটের চেয়ে কম কম্প্যানিয়ন অ্যাড থাকে, তাহলে পাবলিশারের নেটওয়ার্ক থেকে কম্প্যানিয়ন অ্যাড দিয়ে তা পূরণ করা হবে।
- ভিডিও বিজ্ঞাপন অনুপস্থিত থাকলে সহযোগী বিজ্ঞাপনটি স্বয়ংক্রিয়ভাবে পূরণ হয়ে যাবে।
- ক্লিক-টু-প্লে ভিডিও প্লেয়ারের জন্য আগে থেকে লোড করা সহযোগী বিজ্ঞাপন স্লট।
- স্বয়ংক্রিয় সহযোগী রেন্ডারিং, যার মধ্যে
HTMLResourceএবংiFrameResourceঅন্তর্ভুক্ত।
ম্যানুয়ালি Ad API ব্যবহার করে ।
গুগল পাবলিশার ট্যাগের সাথে সহযোগী বিজ্ঞাপন ব্যবহার করুন
গুগল পাবলিশার ট্যাগ (GPT) আপনার সাইটে HTML কম্প্যানিয়ন বিজ্ঞাপন প্রদর্শনকে স্বয়ংক্রিয় করে। আমরা বেশিরভাগ পাবলিশারকে GPT ব্যবহার করার পরামর্শ দিই। HTML5 SDK, GPT স্লটগুলোকে শনাক্ত করে যদি GPT মূল ওয়েব পেজে (কোনো IFrame-এর ভেতরে নয়) লোড করা হয়। IMA SDK-এর সাথে GPT ব্যবহারের বিষয়ে আরও বিস্তারিত তথ্য আপনি GPT ডক্স- এ খুঁজে পেতে পারেন।
যদি আপনি একটি IFrame-এর মধ্যে HTML5 SDK হোস্ট করেন
যদি আপনি নিম্নলিখিত উভয় শর্তই পূরণ করেন, তাহলে আপনার GPT কম্প্যানিয়নগুলো সঠিকভাবে প্রদর্শিত হওয়ার জন্য একটি অতিরিক্ত প্রক্সি স্ক্রিপ্ট অন্তর্ভুক্ত করতে হবে:
- একটি IFrame-এ HTML5 SDK লোড করুন।
- মূল ওয়েব পেজে (আইফ্রেমের বাইরে) জিপিটি লোড করুন।
এই পরিস্থিতিতে আপনার সঙ্গীদের প্রদর্শন করতে হলে, SDK লোড করার আগে আপনাকে অবশ্যই GPT প্রক্সি স্ক্রিপ্টটি লোড করতে হবে:
<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>
মনে রাখার মতো গুরুত্বপূর্ণ বিষয়গুলো হলো:
- যে IFrame-টি SDK লোড করে, তার ভিতরে কোনো GPT লোড করা থাকা উচিত নয়।
- GPT অবশ্যই মূল পৃষ্ঠায় লোড করতে হবে, অন্য কোনো IFrame-এ নয়।
- প্রক্সি স্ক্রিপ্টটি অবশ্যই GPT-এর সাথে একই ফ্রেমে (অর্থাৎ, মূল পৃষ্ঠায়) লোড করতে হবে।
HTML-এ সহযোগী বিজ্ঞাপন স্লট ঘোষণা করুন
এই বিভাগে GPT ব্যবহার করে HTML-এ কীভাবে কম্প্যানিয়ন অ্যাড ঘোষণা করতে হয় তা ব্যাখ্যা করা হয়েছে এবং বিভিন্ন পরিস্থিতির জন্য নমুনা কোড দেওয়া হয়েছে। HTML5 SDK-এর জন্য, আপনাকে আপনার HTML পৃষ্ঠায় কিছু জাভাস্ক্রিপ্ট যোগ করতে হবে এবং কম্প্যানিয়ন অ্যাড স্লটগুলো ঘোষণা করতে হবে।
- উদাহরণ ১: মৌলিক বিজ্ঞাপন স্লট বাস্তবায়ন
- উদাহরণ ২: ডাইনামিক বিজ্ঞাপন স্লট বাস্তবায়ন
- উদাহরণ ৩: আগে থেকে লোড করা বিজ্ঞাপনের স্লট
উদাহরণ ১: মৌলিক বিজ্ঞাপন স্লট বাস্তবায়ন
নিম্নলিখিত নমুনা কোডটি দেখায় কিভাবে আপনার HTML পৃষ্ঠায় gpt.js ফাইলটি অন্তর্ভুক্ত করতে হয় এবং একটি অ্যাড স্লট ঘোষণা করতে হয়। ঘোষিত অ্যাড স্লটটির আকার ৭২৮x৯০ পিক্সেল। GPT, VAST রেসপন্সে প্রাপ্ত এই আকারের সাথে মেলে এমন যেকোনো সহযোগী বিজ্ঞাপন দিয়ে স্লটটি পূরণ করার চেষ্টা করে। অ্যাড স্লটগুলো ঘোষণা করার পরে, googletag.display() ফাংশনটি পৃষ্ঠার যেখানেই কল করা হোক না কেন, সেগুলোকে রেন্ডার করতে পারে। যেহেতু স্লটগুলো সহযোগী স্লট, তাই বিজ্ঞাপনগুলো সঙ্গে সঙ্গে প্রদর্শিত হয় না। পরিবর্তে, সেগুলো মূল ভিডিও বিজ্ঞাপনের পাশাপাশি প্রদর্শিত হয়।
বাস্তবায়নের একটি উদাহরণ নিচে দেওয়া হলো:
<html>
<head>
<!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
<!--<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>-->
<!-- HEAD part -->
<!-- Initialize the tagging library -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<!-- Register your companion slots -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
<body>
<!-- BODY part -->
<!-- Declare a div where you want the companion to appear. Use
googletag.display() to make sure the ad is displayed. -->
<div id="companionDiv" style="width:728px; height:90px;">
<script>
// Using the command queue to enable asynchronous loading.
// The unit does not actually display now - it displays when
// the video player is displaying the ads.
googletag.cmd.push(function() { googletag.display('companionDiv'); });
</script>
</div>
<body>
</html>
চেষ্টা করে দেখুন
একটি কার্যকরী বাস্তবায়নের জন্য আপনি নিম্নলিখিত কোডপেনটি দেখতে পারেন।
উদাহরণ ২: ডাইনামিক বিজ্ঞাপন স্লট বাস্তবায়ন
কখনও কখনও পেজের কন্টেন্ট রেন্ডার না হওয়া পর্যন্ত আপনি জানতে পারেন না যে একটি পেজে কতগুলো অ্যাড স্লট আছে। নিচের স্যাম্পল কোডটি দেখায়, পেজ রেন্ডার হওয়ার সময় কীভাবে অ্যাড স্লট নির্ধারণ করতে হয়। এই উদাহরণটি উদাহরণ ১- এর অনুরূপ, তবে পার্থক্য হলো এটি অ্যাড স্লটগুলোকে সেখানেই রেজিস্টার করে যেখানে সেগুলো আসলে প্রদর্শিত হয়।
<html>
<head>
<!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
<!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<!-- HEAD part -->
<!-- Initialize the tagging library -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
<body>
<!-- BODY part -->
<!-- Declare a div where you want the companion to appear. Use
googletag.display() to make sure the ad is displayed. -->
<div id="companionDiv" style="width:728px; height:90px;">
<script>
// Using the command queue to enable asynchronous loading.
// The unit does not actually display now - it displays when
// the video player is displaying the ads.
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.display('companionDiv');
});
</script>
</div>
<body>
</html>
চেষ্টা করে দেখুন
একটি কার্যকরী বাস্তবায়নের জন্য আপনি নিম্নলিখিত কোডটি দেখতে পারেন।
উদাহরণ ৩: আগে থেকে লোড করা বিজ্ঞাপনের স্লট
কিছু ক্ষেত্রে, কম্প্যানিয়ন অ্যাড অনুরোধ করার আগে আপনাকে অ্যাড স্লটে কিছু প্রদর্শন করার প্রয়োজন হতে পারে। কম্প্যানিয়ন অ্যাড সাধারণত একটি ভিডিও অ্যাডের সাথে অনুরোধ করা হয়। এই অনুরোধটি পেজ লোড হওয়ার পরে হতে পারে। উদাহরণস্বরূপ, ব্যবহারকারী একটি ক্লিক-টু-প্লে ভিডিওতে ক্লিক করার পরেই একটি কম্প্যানিয়ন অ্যাড লোড হতে পারে। এই ধরনের ক্ষেত্রে, কম্প্যানিয়ন অ্যাড অনুরোধ করার আগে অ্যাড স্লটটি পূরণ করার জন্য একটি সাধারণ অ্যাড অনুরোধ করার ক্ষমতা আপনার প্রয়োজন। এই ব্যবহারের ক্ষেত্রটি সমর্থন করার জন্য, আপনি কম্প্যানিয়ন স্লটে স্ট্যান্ডার্ড ওয়েব অ্যাড প্রদর্শন করতে পারেন। নিশ্চিত করুন যে ওয়েব অ্যাডগুলো কম্প্যানিয়ন স্লটের জন্য টার্গেট করা হয়েছে। আপনি স্ট্যান্ডার্ড ওয়েব অ্যাড স্লট যেভাবে টার্গেট করেন, ঠিক সেভাবেই কম্প্যানিয়ন স্লটগুলো টার্গেট করতে পারেন।
এইমাত্র বর্ণিত বাস্তবায়নের একটি উদাহরণ নিচে দেওয়া হলো:
<html>
<head>
...
<!-- Register your companion slots -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
// Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH.
googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
...
</html>
চেষ্টা করে দেখুন
কার্যকরী বাস্তবায়নের জন্য আপনি নিম্নলিখিত কোড-পেনটি দেখতে পারেন।
Ad API-এর সাথে সহযোগী বিজ্ঞাপন ব্যবহার করুন
এই অংশে Ad API) ব্যবহার করে সহযোগী বিজ্ঞাপন প্রদর্শনের পদ্ধতি বর্ণনা করা হয়েছে।
সহযোগী বিজ্ঞাপন প্রদর্শন করুন
সহযোগী বিজ্ঞাপন প্রদর্শন করতে, প্রথমে AdsManager থেকে পাঠানো যেকোনো AdEvent ইভেন্টের মাধ্যমে একটি Ad অবজেক্টের রেফারেন্স নিন। আমরা AdEvent.STARTED ইভেন্টটি ব্যবহার করার পরামর্শ দিই, কারণ মূল বিজ্ঞাপনের সাথে সহযোগী বিজ্ঞাপন প্রদর্শন করা উচিত।
এরপর, CompanionAd অবজেক্টগুলোর একটি অ্যারে পেতে এই Ad অবজেক্টটি ব্যবহার করে getCompanionAds() কল করুন। এখানে আপনার কাছে CompanionAdSelectionSettings নির্দিষ্ট করার বিকল্প রয়েছে, যা আপনাকে ক্রিয়েটিভ টাইপ, নিয়ার ফিট পার্সেন্টেজ, রিসোর্স টাইপ এবং সাইজ ক্রাইটেরিয়ার জন্য কম্প্যানিয়ন অ্যাডগুলোতে ফিল্টার সেট করতে দেয়। এই সেটিংসগুলো সম্পর্কে আরও তথ্যের জন্য, IMA CompanionAdSelectionSettings API ডকুমেন্টেশন দেখুন।
getCompanionAds দ্বারা ফেরত আসা CompanionAd অবজেক্টগুলো এখন নিম্নলিখিত নির্দেশিকাগুলো অনুসরণ করে পৃষ্ঠায় কম্প্যানিয়ন অ্যাড প্রদর্শন করতে ব্যবহার করা যেতে পারে:
- পৃষ্ঠায় প্রয়োজনীয় আকারের একটি সহযোগী বিজ্ঞাপন স্লট
<div>তৈরি করুন। - আপনার
STARTEDইভেন্টের ইভেন্ট হ্যান্ডলারে,getAd()কল করেAdঅবজেক্টটি গ্রহণ করুন। -
getCompanionAds()ব্যবহার করে সেইসব কম্প্যানিয়ন অ্যাডের একটি তালিকা পাওয়া যায়, যেগুলো কম্প্যানিয়ন অ্যাড স্লট সাইজ ওCompanionAdSelectionSettingsউভয়ের সাথেই মেলে এবং মাস্টার ক্রিয়েটিভের সমান সিকোয়েন্স নম্বর রয়েছে। যেসব ক্রিয়েটিভের সিকোয়েন্স অ্যাট্রিবিউট নেই, সেগুলোকে সিকোয়েন্স নম্বর ০ হিসেবে গণ্য করা হয়। - একটি
CompanionAdইনস্ট্যান্স থেকে কন্টেন্টটি নিন এবং সেটিকে সেই অ্যাড স্লটের<div>এর ভেতরের HTML হিসেবে সেট করুন।
নমুনা কোড
<!--Set a companion ad div in html page. -->
<div id="companion-ad-300-250" width="300" height="250"></div>
<script>
// Listen to the STARTED event.
adsManager.addEventListener(
google.ima.AdEvent.Type.STARTED,
onAdEvent);
function onAdEvent(adEvent) {
switch (adEvent.type) {
case google.ima.AdEvent.Type.STARTED:
// Get the ad from the event.
var ad = adEvent.getAd();
var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
// Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
var companionAds = ad.getCompanionAds(300, 250, selectionCriteria);
var companionAd = companionAds[0];
// Get HTML content from the companion ad.
var content = companionAd.getContent();
// Write the content to the companion ad slot.
var div = document.getElementById('companion-ad-300-250');
div.innerHTML = content;
break;
}
}
</script>
তরল সহযোগী বিজ্ঞাপন প্রদর্শন করুন
IMA এখন ফ্লুইড কম্প্যানিয়ন অ্যাড সমর্থন করে। এই কম্প্যানিয়ন অ্যাডগুলো অ্যাড স্লটের আকারের সাথে মিলিয়ে নিজেদের আকার পরিবর্তন করতে পারে। এগুলো প্রথমে প্যারেন্ট ডিভের ১০০% প্রস্থ জুড়ে থাকে, তারপর কম্প্যানিয়নের কন্টেন্টের সাথে মানানসই হওয়ার জন্য নিজেদের উচ্চতা পরিবর্তন করে। অ্যাড ম্যানেজারে থাকা Fluid কম্প্যানিয়ন সাইজ' ব্যবহার করে এগুলো সেট করা হয়। এই মানটি কোথায় সেট করতে হবে তা জানতে নিচের ছবিটি দেখুন।
জিপিটি তরল সঙ্গী
GPT কম্প্যানিয়ন ব্যবহার করার সময়, আপনি defineSlot() মেথডের দ্বিতীয় প্যারামিটার আপডেট করে একটি ফ্লুইড কম্প্যানিয়ন স্লট ঘোষণা করতে পারেন।
<!-- Register your companion slots -->
<script>
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
অ্যাড এপিআই ফ্লুইড সঙ্গী
কম্প্যানিয়ন অ্যাডের জন্য Ad API ব্যবহার করার সময়, আপনি google.ima.CompanionAdSelectionSettings.SizeCriteria কে SELECT_FLUID ভ্যালুতে আপডেট করে একটি ফ্লুইড কম্প্যানিয়ন স্লট ডিক্লেয়ার করতে পারেন।
<script>
...
// Get the ad from the event.
var ad = adEvent.getAd();
var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;
// Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
// Note: Companion width and height are irrelevant when fluid size is used.
var companionAds = ad.getCompanionAds(0, 0, selectionCriteria);
var companionAd = companionAds[0];
...
}
}
</script>