নিম্নলিখিত নির্দেশিকাটি একটি পরীক্ষার বিজ্ঞাপন প্রদর্শনের ক্ষেত্রে প্রসারিত করে এবং Google পাবলিশার ট্যাগ (GPT) লাইব্রেরির সবচেয়ে বেশি ব্যবহার করার জন্য আরও মৌলিক ধারণাগুলি প্রবর্তন করে৷ এই ধারণা অন্তর্ভুক্ত:
- বিজ্ঞাপনের আকার
- মূল-মান লক্ষ্যমাত্রা
- একক অনুরোধ আর্কিটেকচার
GPT লাইব্রেরি লোড করুন
GPT লাইব্রেরি লোড এবং আরম্ভ করে শুরু করুন। HTML নথির <head> এ নিম্নলিখিত যোগ করুন:
<script
async
src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
crossorigin="anonymous"
></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>
এটি GPT লাইব্রেরি লোড করে এবং googletag এবং CommandArray অবজেক্ট উভয়ই শুরু করে। এই বস্তুগুলি শুরু করার ফলে আপনি অবিলম্বে GPT কমান্ড অ্যারে ব্যবহার শুরু করতে পারবেন। এই স্নিপেটে সংজ্ঞায়িত খালি ফাংশনের মূল অংশে অনুসরণ করে জাভাস্ক্রিপ্ট কোড যোগ করুন।
বিজ্ঞাপন স্লট সংজ্ঞায়িত করুন
GPT লোড করার পরে, আপনি বিজ্ঞাপন স্লট সংজ্ঞায়িত করতে পারেন। নিম্নলিখিত উদাহরণটি বিভিন্ন বিজ্ঞাপন ফর্ম্যাট, সাইজিং এবং টার্গেটিং বিকল্পগুলির সাথে তিনটি বিজ্ঞাপন স্লটকে সংজ্ঞায়িত করে৷
নির্দিষ্ট আকারের বিজ্ঞাপন স্লট
এখানে একটি সাধারণ, স্থির-আকারের বিজ্ঞাপন স্লট:
// Define a fixed size ad slot, customized with key-value targeting.
googletag
.defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
.addService(googletag.pubads())
.setTargeting("color", "red")
.setTargeting("position", "atf");
বিজ্ঞাপন ইউনিট পাথ, আকার এবং কন্টেইনার <div> আইডি ছাড়াও, এই স্নিপেটটি বেশ কয়েকটি টার্গেটিং বিকল্পও নির্দিষ্ট করে। এই বিকল্পগুলি এই স্লটে পরিবেশন করার যোগ্য বিজ্ঞাপনগুলিকে সীমাবদ্ধ করে এবং আলাদা করে৷ কী-মান টার্গেটিং সম্পর্কে আরও জানুন।
অ্যাঙ্কর বিজ্ঞাপন স্লট
এখানে একটি অ্যাঙ্কর বিজ্ঞাপন স্লট, ভিউপোর্টের নীচে সংযুক্ত:
// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
"/6355419/Travel",
googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);
// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());
document.getElementById("status").textContent =
"Anchor ad is initialized. Scroll page to activate.";
}
অ্যাঙ্কর স্লট হল পৃষ্ঠার বাইরের ফর্ম্যাটের একটি প্রকার, যা সাধারণ defineSlot পদ্ধতির পরিবর্তে defineOutOfPageSlot পদ্ধতি ব্যবহার করে সংজ্ঞায়িত করা হয়। পৃষ্ঠার বাইরের সৃজনশীল সম্পর্কে আরও জানুন৷
পৃষ্ঠার বাইরের ফর্ম্যাটগুলিতে প্রায়শই বিভিন্ন ধরণের পৃষ্ঠা এবং ডিভাইসগুলিতে সীমাবদ্ধতা থাকে যা তারা পরিবেশন করার যোগ্য৷ এই বিধিনিষেধগুলির কারণে, আপনাকে অবশ্যই এটির সাথে ইন্টারঅ্যাক্ট করার আগে স্লটটি সফলভাবে সংজ্ঞায়িত করা হয়েছে কিনা তা যাচাই করতে হবে। বিস্তারিত জানার জন্য একটি অ্যাঙ্কর বিজ্ঞাপনের নমুনা প্রদর্শন করুন।
তরল বিজ্ঞাপন স্লট
এখানে একটি নেটিভ বিজ্ঞাপনের জন্য একটি তরল বিজ্ঞাপন স্লট রয়েছে:
// Define a fluid ad slot that fills the width of the enclosing column and
// adjusts the height as defined by the native creative delivered.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
তরল বিজ্ঞাপন স্লটের একটি নির্দিষ্ট আকার নেই। তরল বিজ্ঞাপন স্লট বিজ্ঞাপন থেকে সৃজনশীল বিষয়বস্তু মাপসই করা হয়. আপনি fluid আকার বিকল্পের সাথে তরল বিজ্ঞাপন স্লট সংজ্ঞায়িত করুন. বিজ্ঞাপনের আকার এবং উপলব্ধ মাপ বিকল্পগুলি সম্পর্কে আরও জানুন৷
পৃষ্ঠা-স্তরের সেটিংস কনফিগার করুন
নির্দিষ্ট বিজ্ঞাপন স্লটের পরিবর্তে কিছু GPT কনফিগারেশন বিকল্প বিশ্বব্যাপী প্রযোজ্য। এগুলিকে পৃষ্ঠা-স্তরের সেটিংস হিসাবে উল্লেখ করা হয়।
পৃষ্ঠা-স্তরের সেটিংস কীভাবে কনফিগার করবেন তার একটি উদাহরণ এখানে দেওয়া হল:
// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
এই স্নিপেট তিনটি জিনিস করে:
- পৃষ্ঠা-স্তরের টার্গেটিং বিকল্পগুলি কনফিগার করে, যা পৃষ্ঠার প্রতিটি বিজ্ঞাপন স্লটে প্রয়োগ করা হয়।
- সিঙ্গেল রিকোয়েস্ট আর্কিটেকচার (SRA) মোড চালু করে, যা একাধিক বিজ্ঞাপন স্লটের অনুরোধকে একক বিজ্ঞাপন অনুরোধে বান্ডিল করে। SRA পারফরম্যান্সের উন্নতি করে, এবং প্রতিযোগীতামূলক বর্জন এবং বাধাগুলিকে সম্মানিত করার গ্যারান্টি দেওয়ার জন্য প্রয়োজনীয়, তাই আমরা আপনাকে সবসময় SRA চালু করার পরামর্শ দিই। সঠিকভাবে SRA ব্যবহার সম্পর্কে আরও জানুন।
- আমাদের বিজ্ঞাপন স্লটগুলির সাথে সংযুক্ত পরিষেবাগুলিকে সক্ষম করে যা বিজ্ঞাপনের অনুরোধগুলি করার অনুমতি দেয়৷
প্রদর্শন বিজ্ঞাপন
অবশেষে, পৃষ্ঠার <body> এ নিম্নলিখিত স্নিপেট যোগ করুন:
<div class="page-content centered">
<div id="banner-ad" style="width: 728px; height: 90px"></div>
<!--
If the following status is displayed when the page is rendered, try
loading the page in a new window or on a different device.
-->
<h1 id="status">Anchor ads are not supported on this page.</h1>
<!--
Spacer used for example purposes only. This positions the native ad
container below the fold to encourage scrolling.
-->
<div class="spacer"></div>
<div id="native-ad" class="native-slot"></div>
</div>
<script>
googletag.cmd.push(() => {
// Request and render all previously defined ad slots.
googletag.display("banner-ad");
});
</script>
এটি দুটি বিজ্ঞাপন স্লট কন্টেনারকে সংজ্ঞায়িত করে: banner-ad এবং native-ad । এই কন্টেইনার id মানগুলি আপনার দেওয়া মানগুলির সাথে মিলে যায় যখন আপনি এই উদাহরণে আগে বিজ্ঞাপন স্লটগুলি সংজ্ঞায়িত করেছিলেন৷
সমস্ত বিজ্ঞাপন স্লট সংজ্ঞায়িত করার পরে, banner-ad প্রদর্শনের জন্য একটি কল করা হয়। যেহেতু SRA সক্ষম করা হয়েছে, এই একক ডিসপ্লে কল অনুরোধ করে এবং এই পর্যন্ত সংজ্ঞায়িত সমস্ত বিজ্ঞাপন স্লট রেন্ডার করে। প্রয়োজনে, আপনি SRA সক্ষম করে বিজ্ঞাপন লোডিং এবং রিফ্রেশ এবং ব্যাচিং আচরণকে আরও সুনির্দিষ্টভাবে নিয়ন্ত্রণ করতে পারেন।
সম্পূর্ণ উদাহরণ
নিম্নলিখিত নমুনা পৃষ্ঠার জন্য সম্পূর্ণ উৎস কোড এই নির্দেশিকা উপর ভিত্তি করে. আপনি এই পৃষ্ঠার একটি ইন্টারেক্টিভ ডেমোও দেখতে পারেন।