শুধুমাত্র অডিও বিষয়বস্তুতে বিজ্ঞাপনের জন্য অনুরোধ করুন, শুধুমাত্র অডিও সামগ্রীতে বিজ্ঞাপনের অনুরোধ করুন

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

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

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

সূচক.html 

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

বিজ্ঞাপন.জেএস 

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

AdDisplayContainer লুকান

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

স্টাইল.সিএসএস 

.ad-container {
  display: none;
}

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

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

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

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

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

বিজ্ঞাপন.জেএস

কোনও বিজ্ঞাপন কখন এবং কখন এড়িয়ে যাওয়া যাবে তা নির্ধারণ করার জন্য আপনি একটি 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/interface/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 ক্লাসটি <button> তে display: none; যোগ করে।

/**
 * 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 সেট আপ করার জন্য এই প্রধান পরিবর্তনগুলি প্রয়োজন। বাস্তবায়ন সংক্রান্ত সমস্যাগুলির জন্য, সহায়তার জন্য বিজ্ঞাপন পরিচালক সহায়তা কেন্দ্রের মাধ্যমে যোগাযোগ করুন।