কাস্টম বিজ্ঞাপন UI

এই নির্দেশিকাটি দেখায় কিভাবে HTML5 এর জন্য IMA SDK ব্যবহার করে আপনার নিজস্ব কাস্টম UI বাস্তবায়ন করবেন। এটি করার জন্য, আপনাকে ডিফল্ট UI নিষ্ক্রিয় করতে হবে, একটি নতুন কাস্টম UI সেট আপ করতে হবে এবং তারপর SDK থেকে প্রাপ্ত বিজ্ঞাপনের তথ্য দিয়ে নতুন UI তৈরি করতে হবে৷ এই নির্দেশিকাটি HTML5 এর জন্য সাধারণ নমুনার উপর তৈরি করে।

DOM-এ UI উপাদান যোগ করুন

আপনি যেকোন জাভাস্ক্রিপ্ট লেখার আগে, আরও জানুন বোতাম, বিজ্ঞাপন এড়িয়ে যান এবং কাউন্টডাউন টাইমারের জন্য আপনার নতুন UI উপাদান যোগ করতে HTML এবং স্টাইলশীট পরিবর্তন করুন:

index.html 

<div id="mainContainer">
  <div id="content">
    <video id="contentElement">
      <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
    </video>
  </div>
  <div id="adContainer"></div>
  <div id="customUi">
    <div id="adClick" class="customUIButton">Click me!</div>
    <div id="skipButton" class="customUIButton"></div>
    <div id="adCountdown"></div>
  </div>
</div>

Style.css 

...
#customUI {
  display: none;
  text-align: center;
  width: 100%;
  height: 100%;
}

.customUIButton {
  position: absolute;
  right: 0px;
  background-color: red;
}

#adClick {
  top: 0px;
  width: 100px;
  height: 50px;
  line-height: 3em;
  cursor: pointer;
}

#skipButton {
  top: 213px;
  width: 150px;
  height: 35px;
  line-height: 2em;
  display: none;
}

#adCountdown {
  position: absolute;
  left: 0px;
  bottom: 10px;
  width: 120px;
  height: 20px;
  background-color: red;
}
...

আপনি চাইলে আপনার UI ভিন্নভাবে স্টাইল করতে পারেন; উপরের UI নিছক একটি উদাহরণ।

অন্তর্নির্মিত UI অক্ষম করুন

SDK কে বলে শুরু করুন যে আপনি এটি তার অন্তর্নির্মিত UI অক্ষম করতে চান৷

ads.js 

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  const adsRenderingSettings = new google.ima.AdsRenderingSettings();
  adsRenderingSettings.disableUi = true;
  // videoContent should be set to the content video element.
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoContent, adsRenderingSettings);
  ...
}

অনুমতি দেওয়া হলে আপনার কাস্টম UI দেখান এবং লুকান

কিছু Google বিজ্ঞাপন, যেমন AdSense বিজ্ঞাপন, একটি কাস্টম UI এর জন্য অনুমতি দেয় না এবং সর্বদা পরিবর্তে তাদের নিজস্ব UI রেন্ডার করে। উপরের স্টাইলশীটে কাস্টম UI div ডিফল্টরূপে লুকানো থাকে। এটি শুধুমাত্র তখনই দেখান যখন বর্তমানে চলমান বিজ্ঞাপনটি তার UI লুকিয়ে রাখে এবং প্রতিটি বিজ্ঞাপনের পরে কাস্টম UI লুকান যদি অনুসরণ করা বিজ্ঞাপনটি একটি কাস্টম UI অনুমোদন না করে:

ads.js 

let mainContainerDiv, currentAd, customUiDiv;
...
function setUpIMA() {
  customUiDiv = document.getElementById('customUi');
  mainContainerDiv = document.getElementById('mainContainer');
  mainContainerDiv.addEventListener('click', () => {
    // Need this to resume ads after clickthrough.
    adsManager.resume();
  });
  ...
}

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  ...
  adsManager.addEventListener(
      google.ima.AdEvent.Type.SKIPPED,
      onAdEvent);
}

function onAdEvent(adEvent) {
  switch(adEvent.type) {
    ...
    case google.ima.AdEvent.Type.STARTED:
      currentAd = adEvent.getAd();
      if (currentAd.isUiDisabled()) {
        showCustomUi();
      }
      break;
    case google.ima.AdEvent.Type.COMPLETE:
    case google.ima.AdEvent.Type.SKIPPED:
      hideCustomUi();
      break;
  }
}

function showCustomUi() {
  customUiDiv.style.display = 'block';
}

function hideCustomUi() {
  customUiDiv.style.display = 'none';
}

আরও জানুন বোতামে যুক্তি যোগ করুন

আপনার ওয়্যার আপ করার জন্য প্রথম UI উপাদানটি হল আরও জানুন বোতাম। যখন এটি ক্লিক করা হয় তখন এই উপাদানটি SDK-কে অবহিত করে:

ads.js 

let clickDiv;
...
function setUpIma() {
  ...
  clickDiv = document.getElementById('adClick');
  clickDiv.addEventListener('click', (e) => {
    // Prevent this from propagating to the customUi div. That would cause the ad to
    // resume immediately after the user clicks it, and we want it to pause.
    e.stopPropagation();
    adsManager.clicked();
  });
  ...
}

কাউন্টডাউন টাইমারে যুক্তি যোগ করুন

এরপরে, কাউন্টডাউন টাইমারটি ওয়্যার আপ করুন যেটি বিজ্ঞাপনে অবশিষ্ট সময় পোলিংয়ে ব্যবহৃত হয়।

ads.js 

let countdownDiv, uiUpdateInterval;
...
function setUpIma() {
  ...
  countdownDiv = document.getElementById('adCountdown');
  ...
}

function showCustomUi() {
  uiUpdateInterval = setInterval(updateUi, 100);
  customUiDiv.style.display = 'block';
}

function hideCustomUi() {
  if (uiUpdateInterval) {
    clearInterval(uiUpdateInterval);
  }
  customUiDiv.style.display = 'none';
}

function updateUi() {
  updateCountdown();
}

function updateCountdown() {
  let countdownText = 'Ad ';
  const adPodInfo = currentAd.getAdPodInfo();
  const totalAds = adPodInfo.getTotalAds();
  if (totalAds > 1) {
    const position = adPodInfo.getAdPosition();
    countdownText += position + ' of ' + totalAds;
  }
  const remainingTime = Math.ceil(adsManager.getRemainingTime());
  countdownText +=  ' (' + remainingTime + 's)';
  countdownDiv.innerText = countdownText;
}

Skip Ad বাটনে যুক্তি যোগ করুন

সবশেষে, Skip Ad বোতামটি ওয়্যার আপ করুন। এই বোতামটি শুধুমাত্র এড়িয়ে যাওয়া বিজ্ঞাপনগুলির জন্য প্রদর্শিত হয় এবং ব্যবহারকারীকে একটি বিজ্ঞাপন এড়িয়ে যেতে সক্ষম করার জন্য এটি সক্রিয় হওয়ার আগে এটির কাউন্টডাউন টাইমার অবশ্যই 0 এ পৌঁছাতে হবে।

ads.js 

let skipDiv;
// Set this infinitely high to fail early <=0 checks.
let timeTillSkip = Number.POSITIVE_INFINITY;
...
function setUpIma() {
  ...
  skipButton = document.getElementById('skipButton');
  skipButton.addEventListener('click', (e) => {
    // Prevent this from propagating to the customUi div. That would cause the ad to
    // resume immediately after the user clicks it, and we want it to pause.
    e.stopPropagation();
    if (timeTillSkip <= 0) {
      adsManager.skip();
    }
  });
  ...
}

function showCustomUi() {
  if (currentAd.isSkippable()) {
    skipButton.innerText = '';
    skipButton.style.display = 'block';
  } else {
    skipButton.style.display = 'none';
  }
  ...
}

function updateUi() {
  updateCountdown();
  if (currentAd.isSkippable()) {
    updateSkip();
  }
}

function updateSkip() {
  const currentTime = currentAd.getDuration() - adsManager.getRemainingTime();
  timeTillSkip = Math.ceil(currentAd.getSkipTimeOffset() - currentTime);
  if (timeTillSkip > 0) {
    skipButton.innerText = "Skip this ad in " + timeTillSkip + '...';
    skipButton.style.cursor = 'default';
   } else {
    skipButton.innerText = "Skip ad";
    skipButton.style.cursor = 'pointer';
  }
}

সমস্যা সমাধান

আপনার কি এমন একটি নমুনা ট্যাগ আছে যা বিজ্ঞাপন UI নিষ্ক্রিয় করার জন্য সক্ষম করা হয়েছে?
আপনি এই নমুনা ট্যাগের URL টি কপি করে আপনার IMA বাস্তবায়নে পেস্ট করতে পারেন।
আমি ডিফল্ট UI নিষ্ক্রিয় করতে পারি না।
আপনি adsRenderingSettings.disableUi কে true সেট করেছেন এবং getAdsManager এ পাস করেছেন তা নিশ্চিত করতে পরীক্ষা করুন। ad.isUiDisabled() true দেখায় তা দেখতে পরীক্ষা করুন। উপরন্তু, বিজ্ঞাপন UI অক্ষম করতে আপনার নেটওয়ার্ক অবশ্যই Ad Manager-এ সক্রিয় থাকতে হবে। আপনি সক্ষম হলে, আপনার VAST-এ একটি Extension রয়েছে যা দেখতে এইরকম:
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 আপনি যদি এখনও সমস্যায় পড়ে থাকেন তবে আপনি সক্ষম হয়েছেন তা নিশ্চিত করতে আপনার অ্যাকাউন্ট পরিচালকের সাথে যোগাযোগ করুন৷ কিছু বিজ্ঞাপন প্রকারের জন্য একটি নির্দিষ্ট UI প্রয়োজন; এই বিজ্ঞাপনগুলি 0-এর <UiHideable> মান দিয়ে ফিরে আসে। আপনি যদি এটির সম্মুখীন হন, তাহলে আপনার পাচারকারী দলকে অবশ্যই পরিবর্তন করতে হবে যাতে এই ধরনের বিজ্ঞাপন পরিবেশন না হয়।