কম্প্যানিয়ন বিজ্ঞাপন সংক্রান্ত সহায়তা যোগ করা

আপনি হয়ত ভিডিও বা ওভারলে বিজ্ঞাপন স্লটের সাথে আপনার ইন-পেজ HTML বিজ্ঞাপন স্লট অ্যাসোসিয়েট করতে চান। সংযুক্ত বিজ্ঞাপন স্লটের মধ্যে এই সম্পর্ককে মাস্টার-কম্প্যানিয়ন সম্পর্ক বলা হয়।

ভিডিও ও ওভারলে মাস্টার বিজ্ঞাপন অনুরোধ করা ছাড়াও, আপনি IMA SDK ব্যবহার করে কম্প্যানিয়ন HTML বিজ্ঞাপন দেখাতে পারেন। এইসব বিজ্ঞাপন HTML এনভায়রনমেন্টের মধ্যে দেখানো হয়

কম্প্যানিয়ন বিজ্ঞাপন ব্যবহার করা

কম্প্যানিয়ন বিজ্ঞাপন ব্যবহার করতে, নিম্নলিখিত ধাপগুলি অনুসরণ করুন:

১. আপনার কম্প্যানিয়ন বিজ্ঞাপন বুক করুন

আপনার মাস্টার বিজ্ঞাপনের সাথে যে কম্প্যানিয়ন বিজ্ঞাপন দেখাতে চান, সেটি আপনাকে প্রথমে বুক করতে হবে। সহযোগী বিজ্ঞাপন Ad Manager-এ ট্রাফিক করা যেতে পারে। আপনি মাস্টার বিজ্ঞাপন পিছু সর্বাধিক ছয়টি কম্প্যানিয়ন বিজ্ঞাপন দেখাতে পারবেন। এই কৌশলটি, যখন কোনও একজন ক্রেতা পৃষ্ঠার সমস্ত বিজ্ঞাপন নিয়ন্ত্রণ করেন, তখন এটি রোডব্লকিং নামেও পরিচিত।

২. আপনার কম্প্যানিয়ন বিজ্ঞাপনের অনুরোধ করা

ডিফল্ট হিসেবে, প্রতিটি বিজ্ঞাপন অনুরোধের জন্য কম্প্যানিয়ন বিজ্ঞাপন চালু করা থাকে।

৩. কম্প্যানিয়ন ডিসপ্লে বিজ্ঞাপন

দুটি উপায়ে কম্প্যানিয়ন বিজ্ঞাপন রেন্ডার করা যায়:

• অটোমেটিক Google Publisher Tag (GPT) ব্যবহার করে।

  আপনি যদি কম্প্যানিয়ন বিজ্ঞাপন প্রয়োগ করার জন্য GPT ব্যবহার করেন, তাহলে HTML পৃষ্ঠায় কম্প্যানিয়ন বিজ্ঞাপন স্লট ঘোষণা করা থাকলে এবং এই বিজ্ঞাপনগুলি API-এর সাথে রেজিস্টার করা থাকলে সেগুলি অটোমেটিক দেখানো হয় (অর্থাৎ, JavaScript এবং HTML-এ div আইডি অবশ্যই মিলতে হবে)। GPT ব্যবহারের কিছু সুবিধা হল:

  • কম্প্যানিয়ন স্লট সম্পর্কে সচেতনতা।
  • প্রকাশকের নেটওয়ার্ক থেকে কম্প্যানিয়ন ব্যাকফিল, যদি VAST প্রতিক্রিয়ায় HTML পৃষ্ঠায় নির্ধারিত স্লটের চেয়ে কম কম্প্যানিয়ন বিজ্ঞাপন থাকে।
  • ভিডিও বিজ্ঞাপন না থাকলে কম্প্যানিয়ন অটোফিল।
  • ক্লিক-টু-প্লে ভিডিও প্লেয়ারের জন্য আগে থেকে লোড করা কম্প্যানিয়ন বিজ্ঞাপন স্লট।
  • HTMLResource ও iFrameResource সহ অটোমেটিক কম্প্যানিয়ন রেন্ডারিং।

• Ad API ব্যবহার করে ম্যানুয়ালি।

Google Publisher Tag-এর সাথে কম্প্যানিয়ন বিজ্ঞাপন ব্যবহার করা

Google Publisher Tag (GPT) আপনার সাইটে HTML কম্প্যানিয়ন বিজ্ঞাপন দেখানোর প্রসেস অটোমেট করে। আমরা সাজেস্ট করি যে বেশিরভাগ প্রকাশক GPT ব্যবহার করুন। HTML5 SDK, GPT স্লট শনাক্ত করে যদি GPT মূল ওয়েব পেজে লোড করা হয় (IFrame-এ নয়)। IMA SDK-এর সাথে GPT ব্যবহার করার ব্যাপারে আরও বিস্তারিত তথ্য আপনি GPT ডকুমেন্ট থেকে জানতে পারবেন।

আপনি যদি IFrame-এর মধ্যে HTML5 SDK হোস্ট করেন

আপনি যদি নিম্নলিখিত দুটি শর্তই পূরণ করেন, তাহলে আপনার GPT কম্প্যানিয়ন সঠিকভাবে দেখানোর জন্য আপনাকে একটি অতিরিক্ত প্রক্সি স্ক্রিপ্ট অন্তর্ভুক্ত করতে হবে:

1. IFrame-এ HTML5 SDK লোড করুন।
2. মূল ওয়েবপেজে (IFrame-এর বাইরে) GPT লোড করুন।

এই পরিস্থিতিতে আপনার সঙ্গীদের দেখাতে হলে, SDK লোড করার আগে আপনাকে অবশ্যই GPT প্রক্সি স্ক্রিপ্ট লোড করতে হবে:

<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>

যেসব বিষয় মনে রাখতে হবে:

• SDK লোড করা IFrame-এর মধ্যে কোনও 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 অবজেক্ট এখন এইসব নির্দেশিকা ব্যবহার করে পৃষ্ঠায় কম্প্যানিয়ন বিজ্ঞাপন দেখানোর জন্য ব্যবহার করা যেতে পারে:

1. পৃষ্ঠায় প্রয়োজনীয় সাইজের একটি কম্প্যানিয়ন বিজ্ঞাপন স্লট <div> তৈরি করুন।
2. STARTED ইভেন্টের জন্য আপনার ইভেন্ট হ্যান্ডলারে, Ad অবজেক্টটি getAd() কল করে রিট্রিভ করুন।
3. কম্প্যানিয়ন বিজ্ঞাপন স্লটের সাইজ ও CompanionAdSelectionSettings দুটির সাথেই ম্যাচ করে এবং মাস্টার ক্রিয়েটিভের মতো একই ক্রমিক সংখ্যা আছে এমন কম্প্যানিয়ন বিজ্ঞাপনের তালিকা পেতে getCompanionAds() ব্যবহার করুন। যেসব ক্রিয়েটিভে সিকোয়েন্স অ্যাট্রিবিউট নেই সেগুলিকে সিকোয়েন্স নম্বর ০ হিসেবে বিবেচনা করা হয়।
4. 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-তে এখন ফ্লুইড কম্প্যানিয়ন বিজ্ঞাপন কাজ করে। বিজ্ঞাপন স্লটের সাইজের সাথে মানানসই করতে এইসব কম্প্যানিয়ন বিজ্ঞাপন রিসাইজ করা যেতে পারে। সেগুলি প্যারেন্ট div-এর ১০০% প্রস্থ পূরণ করে, তারপর কম্প্যানিয়নের কন্টেন্ট ফিট করার জন্য নিজেদের উচ্চতা রিসাইজ করে। Ad Manager-এ Fluid কম্প্যানিয়ন সাইজ ব্যবহার করে এগুলি সেট করা হয়। এই মান কোথায় সেট করতে হবে তা জানতে নিচের ছবি দেখুন।

GPT ফ্লুইড কম্প্যানিয়ন

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 ফ্লুইড কম্প্যানিয়ন

কম্প্যানিয়ন বিজ্ঞাপনের জন্য Ad API ব্যবহার করার সময়, আপনি SELECT_FLUID ভ্যালুতে google.ima.CompanionAdSelectionSettings.SizeCriteria আপডেট করে ফ্লুইড কম্প্যানিয়ন স্লট ঘোষণা করতে পারেন।

<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>