অডিও বিজ্ঞাপন

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

কন্টেন্ট প্লেব্যাকের জন্য একটি <audio> ট্যাগের ব্যবহার

AdDisplayContainer এর কনস্ট্রাক্টর videoElement নামে একটি দ্বিতীয় আর্গুমেন্ট নেয় যা IMA কন্টেন্ট প্লেয়ার হিসেবে ট্র্যাক করে। এই যুক্তিটি <video> বা <audio> ট্যাগ উভয়ই গ্রহণ করে। অডিও সামগ্রী এবং বিজ্ঞাপনের জন্য, এই নির্দেশিকা একটি AdDisplayContainer তৈরি করতে একটি <audio> ট্যাগ ব্যবহার করার পরামর্শ দেয়। আপনার যদি ভিডিও সামগ্রী থাকে, তাহলে আপনি অডিও এবং ভিডিও বিজ্ঞাপনের মিশ্রণ দেখানোর জন্য একটি <video> ট্যাগ ব্যবহার করতে পারেন:

index.html

<audio id="audio-player"></audio>
<div class="ad-container"></div>

ads.js

audioPlayer = document.getElementById('audio-player');
adContainer = document.getElementById('ad-container');
adDisplayContainer = new google.ima.AdDisplayContainer(adContainer,
audioPlayer);

AdDisplayContainer লুকানো

IMA HTML5 SDK-এর এখনও একটি AdDisplayContainer প্রয়োজন এমনকি বিজ্ঞাপন বা বিষয়বস্তুর কোনো প্রদর্শন অংশ না থাকলেও৷ এই কারণে, আমরা AdDisplayContainer লুকানোর পরামর্শ দিই। নীচে আপনি উপাদান লুকাতে পারেন কিভাবে একটি উদাহরণ:

style.css

.ad-container {
  display: none;
}

কাস্টম নিয়ন্ত্রণ

যেহেতু AdDisplayContainer লুকানো থাকে, তাই বিজ্ঞাপন বিরতির সময় প্লেব্যাক পরিচালনা করার জন্য কাস্টম নিয়ন্ত্রণ প্রয়োজন। AdsManager এমন পদ্ধতি রয়েছে যা এই কাস্টম নিয়ন্ত্রণগুলি প্রয়োগ করতে ব্যবহার করা যেতে পারে:

• pause()
• resume()
• setVolume()

এড়িয়ে যাওয়া বিজ্ঞাপনগুলি পরিচালনা করা

যেহেতু কোন দৃশ্যমান AdDisplayContainer নেই, তাই IMA SDK বিজ্ঞাপন এড়িয়ে যাওয়ার বোতাম দেখাতে পারে না। এড়িয়ে যাওয়া বিজ্ঞাপনগুলি পরিচালনা করতে, নিম্নলিখিত IMA পদ্ধতিগুলি প্রয়োগ করুন:

• AdsManager.getAdSkippableState()
• AdEvent.getAdData()
• Ad.getSkipTimeOffset()

নিচের নমুনা কোডটি দেখায় কিভাবে এটি করতে হয়।

ads.js

কোন বিজ্ঞাপন কখন এড়িয়ে যাওয়া যায় কিনা তা নির্ধারণ করতে আপনি একটি updateSkippable ফাংশন সেট আপ করতে পারেন৷ এই ফাংশনটি প্রতিটি AD_PROGRESS IMA ইভেন্টে কল করা উচিত। কিভাবে IMA ইভেন্টের জন্য শ্রোতাদের সেট আপ করতে হয় তার দিকনির্দেশের জন্য শুরু করার নির্দেশিকা দেখুন।

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager = adsManagerLoadedEvent.getAdsManager(
    audioPlayer);

  ...

  adsManager.addEventListener(
    google.ima.AdEvent.Type.AD_PROGRESS,
    onAdEvent);

  ...

}

function onAdEvent(adEvent) {
  const ad = adEvent.getAd();
  if (ad) {
    currentAd = ad; // currentAd is defined outside of this functions scope.
  }
  switch (adEvent.type) {

    ...

    case google.ima.AdEvent.Type.AD_PROGRESS:
      // See https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/js/google.ima.AdProgressData
      const adProgressData = adEvent.getAdData();

      updateSkippable(
        adProgressData.currentTime,
        currentAd.getSkipTimeOffset()
      );
      break;
    ...

  }
}

/**
   * Called when there may be a change in the skippable state.
   * @param {number} currentTime The current time of the
   * currently playing ad.
   * @param {number} skipTimeOffset The number of seconds of playback
   * before the ad becomes skippable. -1 is returned for non skippable
   * ads or if this is unavailable.
   */
  updateSkippable(currentTime, skipTimeOffset) {
    const isAdSkippable = skipTimeOffset !== -1;
    const isSkipCurrentlyAllowed = adsManager.getAdSkippableState();
    const timeTillSkipInSeconds = Math.ceil(skipTimeOffset - currentTime);
    updateSkipUI(
        isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds);
  }

ভিডিও বিজ্ঞাপনের বিপরীতে, IMA অডিও বিজ্ঞাপনের জন্য একটি স্কিপ বোতাম প্রদান করতে সক্ষম নয়। ডেভেলপারদের অবশ্যই এড়িয়ে যাওয়া বিজ্ঞাপনের জন্য কাস্টম UI যোগ করতে হবে, যা একটি সাধারণ <button> ট্যাগ দিয়ে করা যেতে পারে। এই updateSkipUI ফাংশনটি বিজ্ঞাপনটি স্কিপ করা যায় কিনা, বিজ্ঞাপনটি বর্তমানে এড়িয়ে যাওয়া যায় কিনা এবং বিজ্ঞাপনটি এড়ানোর যোগ্য না হওয়া পর্যন্ত কত সময় বাকি আছে তার উপর ভিত্তি করে স্কিপ বোতাম আপডেট করে। এটি '.hidden' ক্লাস ব্যবহার করে, যা IMA দ্বারা সরবরাহ করা হয় না। .hidden ক্লাস display: none; <button> তে।

/**
 * Updates the skip button UI.
 * @param {boolean} isAdSkippable if the current ad is a skippable ad.
 * @param {boolean} isSkipCurrentlyAllowed if the ad can be skipped now.
 * @param {number} timeTillSkipInSeconds time until the ad can be skipped in
 * seconds.
 */
updateSkipUI(isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds) {
  if (isAdSkippable) {
    skipButton.classList.remove('hidden');
    if (isSkipCurrentlyAllowed) {
      skipButton.textContent = 'Skip ad';
      skipButton.disabled = false;
    } else {
      skipButton.textContent = `Skip in ${timeTillSkipInSeconds} seconds`;
      skipButton.disabled = true;
    }
  } else {
    skipButton.classList.add('hidden');
  }
}

অবশেষে, আপনার কাস্টম স্কিপ বোতামে ব্যবহারকারীর ক্লিকের জন্য একটি শ্রোতা সেট করুন। বিজ্ঞাপনগুলি এড়িয়ে যেতে, adsManager.skip() ফাংশনটিতে কল করুন৷

skipButton.addEventListener('click', () => {
  adsManager.skip();
});

অডিও বিজ্ঞাপন সহ IMA SDK সেট আপ করার জন্য এই প্রধান পরিবর্তনগুলি প্রয়োজন৷ বাস্তবায়ন সংক্রান্ত সমস্যার উত্তরের জন্য, IMA SDK টেকনিক্যাল ফোরামে যান।