رابط کاربری تبلیغات سفارشی

این راهنما نحوه پیاده سازی رابط کاربری سفارشی خود را با استفاده از IMA SDK برای HTML5 نشان می دهد. برای انجام این کار، باید رابط کاربری پیش‌فرض را غیرفعال کنید، یک رابط کاربری سفارشی جدید راه‌اندازی کنید، و سپس رابط کاربری جدید را با اطلاعات تبلیغاتی به‌دست‌آمده از SDK پر کنید. این راهنما بر روی نمونه ساده برای HTML5 ساخته شده است.

عناصر UI را به DOM اضافه کنید

قبل از نوشتن هر جاوا اسکریپت، 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 داخلی را غیرفعال کنید

با گفتن به SDK شروع کنید که می خواهید رابط کاربری داخلی خود را غیرفعال کند.

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);
  ...
}

در صورت مجاز بودن، رابط کاربری سفارشی خود را نشان داده و پنهان کنید

برخی از تبلیغات Google، مانند تبلیغات AdSense، اجازه UI سفارشی را نمی دهند و همیشه در عوض، رابط کاربری خود را ارائه می دهند. در شیوه نامه بالا، div 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';
}

منطق را به دکمه Learn More اضافه کنید

اولین مؤلفه رابط کاربری که باید سیم‌کشی کنید، دکمه «بیشتر بدانید» است. این عنصر پس از کلیک روی آن به 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';
  }
}

عیب یابی

آیا برچسب نمونه ای دارید که برای غیرفعال کردن رابط کاربری تبلیغات فعال باشد؟
می توانید URL این تگ نمونه را کپی کرده و در پیاده سازی IMA خود جایگذاری کنید.
من نمی توانم رابط کاربری پیش فرض را غیرفعال کنم.
بررسی کنید تا مطمئن شوید که adsRenderingSettings.disableUi را روی true تنظیم کرده اید و آن را به getAdsManager ارسال کنید. بررسی کنید که ad.isUiDisabled() true برمی گرداند. علاوه بر این، برای غیرفعال کردن رابط کاربری تبلیغات، شبکه شما باید در Ad Manager فعال باشد. اگر فعال باشید، VAST شما حاوی یک Extension است که به شکل زیر است:
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 اگر همچنان مشکل دارید، با مدیر حساب خود تماس بگیرید تا فعال بودن شما را تأیید کند. برخی از انواع تبلیغات به یک UI خاص نیاز دارند. این تبلیغات با مقدار <UiHideable> 0 برمی گردند. اگر با این مورد مواجه شدید، تیم قاچاق شما باید تغییراتی ایجاد کند تا اطمینان حاصل شود که این انواع تبلیغات ارائه نمی شوند.