আপনি আপনার ইন-পেজ HTML বিজ্ঞাপন স্লটগুলিকে ভিডিও বা ওভারলে বিজ্ঞাপন স্লটের সাথে সংযুক্ত করতে চাইতে পারেন। সংশ্লিষ্ট বিজ্ঞাপন স্লটের মধ্যে এই সম্পর্কটিকে মাস্টার-ক্যাম্পেয়ন সম্পর্ক বলা হয়।
ভিডিও এবং ওভারলে মাস্টার বিজ্ঞাপনের অনুরোধ করার পাশাপাশি, আপনি IMA SDK ব্যবহার করে কম্প্যানিয়ন HTML বিজ্ঞাপন প্রদর্শন করতে পারেন। এই বিজ্ঞাপনগুলি একটি HTML পরিবেশের মধ্যে প্রদর্শিত হয়।
সহযোগী বিজ্ঞাপন ব্যবহার করুন
সহযোগী বিজ্ঞাপন ব্যবহার করতে, নিম্নলিখিত ধাপগুলি অনুসরণ করুন:
১. আপনার সঙ্গী বিজ্ঞাপন বুক করুন
আপনার মাস্টার বিজ্ঞাপনের সাথে যে কম্প্যানিয়ন বিজ্ঞাপনগুলি প্রদর্শন করতে চান সেগুলি প্রথমে আপনাকে বুক করতে হবে। অ্যাড ম্যানেজারে কম্প্যানিয়ন বিজ্ঞাপনগুলি পাচার করা যেতে পারে। আপনি প্রতি মাস্টার বিজ্ঞাপনে সর্বাধিক ছয়টি কম্প্যানিয়ন বিজ্ঞাপন পরিবেশন করতে পারেন। এই কৌশলটি, যখন একজন একক ক্রেতা পৃষ্ঠার সমস্ত বিজ্ঞাপন নিয়ন্ত্রণ করে, তখন এটি রোডব্লকিং নামেও পরিচিত।
2. আপনার সহযোগী বিজ্ঞাপনের জন্য অনুরোধ করুন
ডিফল্টরূপে, প্রতিটি বিজ্ঞাপন অনুরোধের জন্য সহযোগী বিজ্ঞাপনগুলি সক্ষম থাকে।
৩. সহযোগী বিজ্ঞাপন প্রদর্শন করুন
সহযোগী বিজ্ঞাপন রেন্ডার করার দুটি উপায় আছে:
স্বয়ংক্রিয়ভাবে Google প্রকাশক ট্যাগ (GPT) ব্যবহার করে ।
যদি আপনি আপনার কম্প্যানিয়ন বিজ্ঞাপনগুলি বাস্তবায়নের জন্য GPT ব্যবহার করেন, তাহলে HTML পৃষ্ঠায় কম্প্যানিয়ন বিজ্ঞাপন স্লট ঘোষিত থাকলে এবং এই বিজ্ঞাপনগুলি API-তে নিবন্ধিত থাকলে (অর্থাৎ, জাভাস্ক্রিপ্ট এবং HTML-এর div ID অবশ্যই মিলবে) সেগুলি স্বয়ংক্রিয়ভাবে প্রদর্শিত হবে। GPT ব্যবহারের কিছু সুবিধা হল:
- সঙ্গী স্লট সচেতনতা।
- প্রকাশকের নেটওয়ার্ক থেকে কম্প্যানিয়ন ব্যাকফিল, যদি VAST প্রতিক্রিয়ায় HTML পৃষ্ঠায় নির্ধারিত স্লটের চেয়ে কম কম্প্যানিয়ন বিজ্ঞাপন থাকে।
- যদি কোনও ভিডিও বিজ্ঞাপন অনুপস্থিত থাকে, তাহলে কম্প্যানিয়ন অটোফিল।
- ক্লিক-টু-প্লে ভিডিও প্লেয়ারের জন্য প্রিলোডেড কম্প্যানিয়ন বিজ্ঞাপন স্লট।
-
HTMLResourceএবংiFrameResourceসহ স্বয়ংক্রিয় কম্প্যানিয়ন রেন্ডারিং।
ম্যানুয়ালি বিজ্ঞাপন API ব্যবহার করে ।
Google Publisher ট্যাগের সাথে সহযোগী বিজ্ঞাপন ব্যবহার করুন
Google Publisher Tag (GPT) আপনার সাইটে HTML কম্প্যানিয়ন বিজ্ঞাপনের প্রদর্শন স্বয়ংক্রিয় করে। আমরা বেশিরভাগ প্রকাশককে GPT ব্যবহার করার পরামর্শ দিচ্ছি। যদি GPT মূল ওয়েব পৃষ্ঠায় (IFrame-এ নয়) লোড করা থাকে তবে HTML5 SDK GPT স্লটগুলিকে স্বীকৃতি দেয়। 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>
মনে রাখা গুরুত্বপূর্ণ বিষয়:
- SDK লোড করার সময় IFrame-এর ভিতরে কোনও GPT লোড করা উচিত নয়।
- জিপিটি অবশ্যই উপরের পৃষ্ঠায় লোড করতে হবে, অন্য কোনও আইফ্রেমে নয়।
- প্রক্সি স্ক্রিপ্টটি অবশ্যই GPT-এর মতো একই ফ্রেমে লোড করতে হবে (অর্থাৎ, মূল পৃষ্ঠায়)।
HTML-এ কম্প্যানিয়ন বিজ্ঞাপন স্লট ঘোষণা করুন
এই বিভাগটি GPT ব্যবহার করে HTML-এ কম্প্যানিয়ন বিজ্ঞাপন কীভাবে ঘোষণা করতে হয় তা ব্যাখ্যা করে এবং বিভিন্ন পরিস্থিতিতে নমুনা কোড প্রদান করে। HTML5 SDK-এর জন্য, আপনাকে আপনার HTML পৃষ্ঠায় কিছু জাভাস্ক্রিপ্ট যোগ করতে হবে এবং কম্প্যানিয়ন বিজ্ঞাপন স্লটগুলি ঘোষণা করতে হবে।
- উদাহরণ ১: মৌলিক বিজ্ঞাপন স্লট বাস্তবায়ন
- উদাহরণ ২: ডায়নামিক বিজ্ঞাপন স্লট বাস্তবায়ন
- উদাহরণ ৩: আগে থেকে লোড করা বিজ্ঞাপন স্লট
উদাহরণ ১: মৌলিক বিজ্ঞাপন স্লট বাস্তবায়ন
নিচের নমুনা কোডটি দেখায় কিভাবে আপনার HTML পৃষ্ঠায় gpt.js ফাইলটি অন্তর্ভুক্ত করবেন এবং একটি বিজ্ঞাপন স্লট ঘোষণা করবেন। ঘোষিত বিজ্ঞাপন স্লটটি 728x90px। 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>
চেষ্টা করে দেখো
কার্যকরী বাস্তবায়নের জন্য আপনি নিম্নলিখিত কোড-পেনটি দেখতে পারেন।
বিজ্ঞাপন API-এর সাথে সহযোগী বিজ্ঞাপন ব্যবহার করুন
এই বিভাগে Ad API ব্যবহার করে কীভাবে সহযোগী বিজ্ঞাপন প্রদর্শন করতে হয় তা বর্ণনা করা হয়েছে।
সহযোগী বিজ্ঞাপন প্রদর্শন করুন
সহযোগী বিজ্ঞাপন প্রদর্শনের জন্য, প্রথমে AdsManager থেকে প্রেরিত যেকোনো AdEvent ইভেন্টের মাধ্যমে একটি Ad বস্তুর রেফারেন্স পান। আমরা AdEvent.STARTED ইভেন্ট ব্যবহার করার পরামর্শ দিচ্ছি, কারণ সহযোগী বিজ্ঞাপন প্রদর্শন মাস্টার বিজ্ঞাপন প্রদর্শনের সাথে মিলে যাওয়া উচিত।
এরপর, এই Ad অবজেক্টটি ব্যবহার করে getCompanionAds() কল করে CompanionAd অবজেক্টের একটি অ্যারে পাবেন। এখানে আপনার কাছে CompanionAdSelectionSettings নির্দিষ্ট করার বিকল্প রয়েছে, যা আপনাকে companion বিজ্ঞাপনগুলিতে সৃজনশীল ধরণ, কাছাকাছি ফিট শতাংশ, রিসোর্সের ধরণ এবং আকারের মানদণ্ডের জন্য ফিল্টার সেট করতে দেয়। এই সেটিংস সম্পর্কে আরও তথ্যের জন্য, IMA CompanionAdSelectionSettings API ডকুমেন্টেশন দেখুন।
getCompanionAds দ্বারা ফেরত পাঠানো CompanionAd অবজেক্টগুলি এখন এই নির্দেশিকাগুলি ব্যবহার করে পৃষ্ঠায় Companion বিজ্ঞাপনগুলি প্রদর্শন করতে ব্যবহার করা যেতে পারে:
- পৃষ্ঠায় প্রয়োজনীয় আকারের একটি
<div>সহযোগী বিজ্ঞাপন স্লট তৈরি করুন। -
STARTEDইভেন্টের জন্য আপনার ইভেন্ট হ্যান্ডলারে,getAd()কল করেAdঅবজেক্টটি পুনরুদ্ধার করুন। -
getCompanionAds()ব্যবহার করে companion বিজ্ঞাপনের স্লট সাইজ এবংCompanionAdSelectionSettingsউভয়ের সাথেই মেলে এমন companion বিজ্ঞাপনের তালিকা পান এবং মাস্টার ক্রিয়েটিভের মতো একই সিকোয়েন্স নম্বর থাকে। যেসব ক্রিয়েটিভের সিকোয়েন্স অ্যাট্রিবিউট অনুপস্থিত থাকে, তাদের সিকোয়েন্স নম্বর 0 হিসেবে বিবেচনা করা হয়। - একটি
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 companions ব্যবহার করার সময়, আপনি defineSlot() পদ্ধতির দ্বিতীয় প্যারামিটার আপডেট করে একটি ফ্লুইড companion স্লট ঘোষণা করতে পারেন।
<!-- 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>
বিজ্ঞাপন 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>