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

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

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

সহযোগী বিজ্ঞাপন ব্যবহার করা

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

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

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

২. আপনার সহযোগী বিজ্ঞাপনের অনুরোধ করা

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

৩. কম্প্যানিয়ন বিজ্ঞাপন দেখানো

সহযোগী বিজ্ঞাপন রেন্ডার করার দুটি উপায় আছে:

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

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

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

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

Google প্রকাশক ট্যাগের সাথে সহযোগী বিজ্ঞাপন ব্যবহার করা

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 অবজেক্টের অ্যারে পেতে getCompanionAds() কল করতে এই Ad অবজেক্ট ব্যবহার করুন। এখানে আপনি CompanionAdSelectionSettings নির্দিষ্ট করার বিকল্প পাবেন, যা আপনাকে ক্রিয়েটিভের ধরন, কাছাকাছি ফিট শতাংশ, রিসোর্সের ধরন এবং সাইজের মাপকাঠির জন্য সহযোগী বিজ্ঞাপনে ফিল্টার সেট করতে দেয়। এইসব সেটিংস সম্পর্কে আরও জানতে, IMA CompanionAdSelectionSettings API ডকুমেন্টেশন দেখুন।

getCompanionAds-এর মাধ্যমে ফেরত পাঠানো CompanionAd অবজেক্ট এখন এইসব নির্দেশিকা ব্যবহার করে পৃষ্ঠায় কম্প্যানিয়ন বিজ্ঞাপন দেখানোর জন্য ব্যবহার করা যেতে পারে:

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