আপনি আপনার ইন-পৃষ্ঠা HTML বিজ্ঞাপন স্লটগুলিকে ভিডিও বা ওভারলে বিজ্ঞাপন স্লটের সাথে সংযুক্ত করতে চাইতে পারেন৷ সংশ্লিষ্ট বিজ্ঞাপন স্লটগুলির মধ্যে এই সম্পর্কটিকে মাস্টার-সহচর সম্পর্ক হিসাবে উল্লেখ করা হয়।
ভিডিও এবং ওভারলে মাস্টার বিজ্ঞাপনের অনুরোধ করার পাশাপাশি, আপনি সহযোগী HTML বিজ্ঞাপনগুলি প্রদর্শন করতে IMA SDK ব্যবহার করতে পারেন৷ এই বিজ্ঞাপনগুলি একটি HTML পরিবেশের মধ্যে প্রদর্শিত হয়।
সহচর বিজ্ঞাপন ব্যবহার করুন
সহচর বিজ্ঞাপনগুলি ব্যবহার করতে, নিম্নলিখিত পদক্ষেপগুলি সম্পাদন করুন:
1. আপনার সহচর বিজ্ঞাপন বুক করুন
আপনার মাস্টার বিজ্ঞাপনগুলির সাথে আপনি যে সহচর বিজ্ঞাপনগুলি প্রদর্শন করতে চান তা আপনাকে প্রথমে বুক করতে হবে৷ সঙ্গী বিজ্ঞাপনগুলি অ্যাড ম্যানেজারে পাচার করা যেতে পারে৷ আপনি মাস্টার বিজ্ঞাপন প্রতি ছয় সহচর বিজ্ঞাপন পরিবেশন করতে পারেন. এই কৌশলটি, যখন একজন একক ক্রেতা পৃষ্ঠার সমস্ত বিজ্ঞাপন নিয়ন্ত্রণ করে, এটি রোডব্লকিং নামেও পরিচিত।
2. আপনার সহচর বিজ্ঞাপনের জন্য অনুরোধ করুন
ডিফল্টরূপে, প্রতিটি বিজ্ঞাপন অনুরোধের জন্য সহচর বিজ্ঞাপনগুলি সক্ষম করা হয়৷
3. সহচর বিজ্ঞাপনগুলি প্রদর্শন করুন৷
সহচর বিজ্ঞাপন রেন্ডার করার দুটি উপায় আছে:
- স্বয়ংক্রিয়ভাবে Google প্রকাশক ট্যাগ (GPT) ব্যবহার করে
আপনি যদি আপনার সঙ্গী বিজ্ঞাপনগুলি বাস্তবায়নের জন্য GPT ব্যবহার করেন, তাহলে এইচটিএমএল পৃষ্ঠায় ঘোষিত সহচর বিজ্ঞাপন স্লটগুলি যতক্ষণ না থাকে এবং এই বিজ্ঞাপনগুলি এপিআই-এর সাথে নিবন্ধিত থাকে (অর্থাৎ, জাভাস্ক্রিপ্ট এবং এইচটিএমএলে ডিভ আইডি থাকতে হবে ম্যাচ)। জিপিটি ব্যবহারের কিছু সুবিধা হল:- সঙ্গী স্লট সচেতনতা
- প্রকাশকের নেটওয়ার্ক থেকে সঙ্গী ব্যাকফিল, যদি VAST প্রতিক্রিয়াতে HTML পৃষ্ঠায় সংজ্ঞায়িত স্লটের তুলনায় কম সঙ্গী বিজ্ঞাপন থাকে
- একটি ভিডিও বিজ্ঞাপন অনুপস্থিত থাকলে সহচর স্বতঃপূরণ
- ক্লিক-টু-প্লে ভিডিও প্লেয়ারের জন্য প্রিলোড করা সহচর বিজ্ঞাপন স্লট
-
HTMLResourceএবংiFrameResourceসহ স্বয়ংক্রিয় সহচর রেন্ডারিং
- ম্যানুয়ালি Ad API ব্যবহার করে ।
Google প্রকাশক ট্যাগের সাথে সহচর বিজ্ঞাপনগুলি ব্যবহার করুন৷
Google প্রকাশক ট্যাগ (GPT) আপনার সাইটে HTML সহচর বিজ্ঞাপন প্রদর্শনকে স্বয়ংক্রিয় করে। আমরা সুপারিশ করি যে বেশিরভাগ প্রকাশক GPT ব্যবহার করেন। HTML5 SDK GPT স্লটগুলিকে স্বীকৃতি দেয় যদি GPT প্রধান ওয়েব পৃষ্ঠাতে লোড করা হয় (আইফ্রেমে নয়)। আপনি GPT ডক্সে IMA SDK-এর সাথে GPT ব্যবহার করার বিষয়ে আরও বিস্তারিত তথ্য পেতে পারেন।
আপনি যদি আইফ্রেমের মধ্যে HTML5 SDK হোস্ট করেন
আপনি যদি নিম্নলিখিত উভয় মানদণ্ড পূরণ করেন, তাহলে আপনার জিপিটি সঙ্গীদের সঠিকভাবে প্রদর্শন করার জন্য আপনাকে একটি অতিরিক্ত প্রক্সি স্ক্রিপ্ট অন্তর্ভুক্ত করতে হবে:
- একটি আইফ্রেমে HTML5 SDK লোড করুন।
- প্রধান ওয়েব পৃষ্ঠায় (IFrame এর বাইরে) GPT লোড করুন।
এই পরিস্থিতিতে আপনার সঙ্গীদের দেখানোর জন্য, SDK লোড করার আগে আপনাকে অবশ্যই GPT প্রক্সি স্ক্রিপ্ট লোড করতে হবে:
<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>
মনে রাখা গুরুত্বপূর্ণ বিষয়:
- SDK লোড করার সময় IFrame-এর ভিতরে কোন GPT লোড করা উচিত নয়।
- GPT অবশ্যই উপরের পৃষ্ঠায় লোড করতে হবে, অন্য আইফ্রেমে নয়।
- প্রক্সি স্ক্রিপ্টটি অবশ্যই GPT-এর মতো একই ফ্রেমে লোড করতে হবে (অর্থাৎ মূল পৃষ্ঠায়)।
HTML-এ সহচর বিজ্ঞাপন স্লট ঘোষণা করুন
এই বিভাগটি ব্যাখ্যা করে কিভাবে GPT ব্যবহার করে HTML-এ সঙ্গী বিজ্ঞাপন ঘোষণা করা যায় এবং বিভিন্ন পরিস্থিতিতে নমুনা কোড প্রদান করে। HTML5 SDK-এর জন্য, আপনাকে আপনার HTML পৃষ্ঠায় কিছু JavaScript যোগ করতে হবে এবং সঙ্গী বিজ্ঞাপন স্লট ঘোষণা করতে হবে।
দ্রষ্টব্য: নিম্নলিখিত প্রতিটি উদাহরণে, googletag.defineSlot পদ্ধতি কলে একটি বৈধ network এবং unit-path সরবরাহ করতে ভুলবেন না (আপনার ব্যবহার করা প্রকৃত উদাহরণের উপর নির্ভর করে <head> বা <body> ট্যাগে অবস্থিত)।
- উদাহরণ 1: প্রাথমিক বিজ্ঞাপন স্লট বাস্তবায়ন
- উদাহরণ 2: ডায়নামিক বিজ্ঞাপন স্লট বাস্তবায়ন
- উদাহরণ 3: প্রি-লোড করা বিজ্ঞাপন স্লট
উদাহরণ 1: প্রাথমিক বিজ্ঞাপন স্লট বাস্তবায়ন
নিচের নমুনা কোডটি দেখায় কিভাবে আপনার 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>
চেষ্টা করে দেখুন
আপনি একটি কার্যকরী বাস্তবায়নের জন্য নিম্নলিখিত কোডপেন দেখতে পারেন।
উদাহরণ 2: ডায়নামিক বিজ্ঞাপন স্লট বাস্তবায়ন
কখনও কখনও আপনি পৃষ্ঠার বিষয়বস্তু রেন্ডার না হওয়া পর্যন্ত একটি পৃষ্ঠায় কতগুলি বিজ্ঞাপন স্লট আছে তা আপনি জানেন না। নিম্নলিখিত নমুনা কোড দেখায় কিভাবে পৃষ্ঠা রেন্ডার করার সময় বিজ্ঞাপন স্লটগুলিকে সংজ্ঞায়িত করতে হয়৷ এই উদাহরণটি উদাহরণ 1- এর সাথে অভিন্ন ব্যতীত যে এটি বিজ্ঞাপন স্লটগুলিকে নিবন্ধিত করে যেখানে সেগুলি আসলে প্রদর্শিত হয়৷
দ্রষ্টব্য: ভিডিও প্লেয়ার যখন বিজ্ঞাপনগুলি প্রদর্শন করতে চলেছে, তখন এটি স্লটগুলির জন্য জিজ্ঞাসা করে৷ প্লেয়ার বিজ্ঞাপনগুলি প্রদর্শন করার আগে স্লটগুলি সংজ্ঞায়িত করা হয়েছে তা নিশ্চিত করুন৷
<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>
চেষ্টা করে দেখুন
আপনি একটি কার্যকরী বাস্তবায়নের জন্য নিম্নলিখিত কোড দেখতে পারেন।
উদাহরণ 3: প্রি-লোড করা বিজ্ঞাপন স্লট
কিছু ক্ষেত্রে, সহযোগী বিজ্ঞাপনের অনুরোধ করার আগে আপনাকে বিজ্ঞাপন স্লটে কিছু প্রদর্শন করতে হতে পারে। সঙ্গী বিজ্ঞাপনগুলি সাধারণত একটি ভিডিও বিজ্ঞাপনের সাথে অনুরোধ করা হয়। এই অনুরোধ পৃষ্ঠা লোড পরে ঘটতে পারে. উদাহরণস্বরূপ, ব্যবহারকারী একটি ক্লিক-টু-প্লে ভিডিওতে ক্লিক করার পরেই একটি সহচর বিজ্ঞাপন লোড হতে পারে৷ এই ধরনের ক্ষেত্রে, সঙ্গী বিজ্ঞাপনের অনুরোধ করার আগে বিজ্ঞাপন স্লট পূরণ করতে আপনার একটি নিয়মিত বিজ্ঞাপনের অনুরোধ করার ক্ষমতা প্রয়োজন। এই ব্যবহারের ক্ষেত্রে সমর্থন করার জন্য, আপনি সহচর স্লটে মানক ওয়েব বিজ্ঞাপন প্রদর্শন করতে পারেন। ওয়েব বিজ্ঞাপনগুলি সহচর স্লটগুলিতে লক্ষ্য করা হয়েছে তা নিশ্চিত করুন৷ আপনি সঙ্গী স্লটগুলিকে একইভাবে লক্ষ্য করতে পারেন যেমন আপনি স্ট্যান্ডার্ড ওয়েব বিজ্ঞাপন স্লটগুলিকে লক্ষ্য করেন৷
দ্রষ্টব্য: নিম্নলিখিত নমুনা কোডটি বোল্ড করা বিভাগটি বাদ দিয়ে উদাহরণ 1-এর জন্য দেওয়া হুবহু একই। এই ক্ষেত্রে, আপনি আপনার ভিডিও বিজ্ঞাপন ইউনিটের পরিবর্তে আপনার প্রিলোড বিজ্ঞাপনের বিজ্ঞাপন নেটওয়ার্ক এবং ইউনিট পাথ প্রদান করেন।
এখানে শুধু বর্ণিত বাস্তবায়নের একটি উদাহরণ:
<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 অবজেক্টের একটি অ্যারে পেতে getCompanionAds() কল করতে এই Ad বস্তুটি ব্যবহার করুন। এখানে আপনার কাছে CompanionAdSelectionSettings নির্দিষ্ট করার বিকল্প রয়েছে, যা আপনাকে সৃজনশীল প্রকার, কাছাকাছি ফিট শতাংশ, সম্পদের ধরন এবং আকারের মানদণ্ডের জন্য সহযোগী বিজ্ঞাপনগুলিতে ফিল্টার সেট করতে দেয়৷ এই সেটিংস সম্পর্কে আরও তথ্যের জন্য, HTML5 API ডকুমেন্টেশন দেখুন৷
getCompanionAds দ্বারা ফিরে আসা CompanionAd অবজেক্টগুলি এখন এই নির্দেশিকাগুলি ব্যবহার করে পৃষ্ঠায় সহচর বিজ্ঞাপনগুলি প্রদর্শন করতে ব্যবহার করা যেতে পারে:
- পৃষ্ঠায় প্রয়োজনীয় আকারের একটি সহযোগী বিজ্ঞাপন স্লট
<div>তৈরি করুন। - STARTED ইভেন্টের জন্য আপনার ইভেন্ট হ্যান্ডলারে,
getAd()কল করেAdবস্তুটি পুনরুদ্ধার করুন। - সহচর বিজ্ঞাপনের একটি তালিকা পেতে
getCompanionAds()ব্যবহার করুন যা সহচর বিজ্ঞাপন স্লট আকার এবংCompanionAdSelectionSettingsউভয়ের সাথে মিলে যায় এবং মাস্টার ক্রিয়েটিভের মতো একই ক্রম নম্বর রয়েছে৷ অনুপস্থিত সিকোয়েন্স অ্যাট্রিবিউট সহ ক্রিয়েটিভগুলিকে সিকোয়েন্স নম্বর 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 এখন তরল সহচর বিজ্ঞাপন সমর্থন করে৷ এই সহচর বিজ্ঞাপনগুলি বিজ্ঞাপন স্লটের আকারের সাথে মেলে আকার পরিবর্তন করতে পারে৷ তারা প্যারেন্ট ডিভের প্রস্থের 100% পূরণ করে, তারপর সঙ্গীর বিষয়বস্তুর সাথে মানানসই করতে তাদের উচ্চতার আকার পরিবর্তন করে। অ্যাড ম্যানেজারে 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>
বিজ্ঞাপন API তরল সহচর
সহযোগী বিজ্ঞাপনের জন্য 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>