واجهة مستخدم الإعلان المخصص

يوضح هذا الدليل كيفية تنفيذ واجهة مستخدم مخصصة باستخدام حزمة تطوير البرامج لإعلانات الوسائط التفاعلية لـ HTML5. لإجراء ذلك، يجب إيقاف واجهة المستخدم التلقائية وإعداد مخصص، ثم تعبئة واجهة المستخدم الجديدة بمعلومات الإعلان التي تم الحصول عليها من حزمة SDK. يستنِد هذا الدليل إلى عيّنة بسيطة لـ HTML5.

ملاحظة: يجب تفعيل حسابك على "مدير الإعلانات" لاستخدام هذه الميزة. لمزيد من المعلومات، يُرجى التواصل مع مدير حسابك.

إضافة عناصر واجهة المستخدم إلى DOM

قبل كتابة أي JavaScript، عدِّل 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;
}
...

يمكنك تصميم واجهة المستخدم بشكل مختلف إذا كنت ترغب في ذلك؛ واجهة المستخدم أعلاه هي مجرد مثال.

إيقاف واجهة المستخدم المدمجة

ابدأ بإخبار حزمة 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، بواجهة مستخدم مخصصة، لعرض واجهة المستخدم الخاصة بها بدلاً من ذلك. في ورقة الأنماط أعلى واجهة المستخدم المخصصة div مخفيًا افتراضيًا. عرض الإعلان فقط عندما يخفي الإعلان الذي يتم تشغيله حاليًا واجهة مستخدم وإخفاء واجهة المستخدم المخصصة بعد كل إعلان في حالة عدم ظهور الإعلان الذي يليه السماح بواجهة مستخدم مخصصة:

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';
}

إضافة منطق إلى زر مزيد من المعلومات

مكوّن واجهة المستخدم الأول الذي تحتاج إلى توصيله هو زر مزيد من المعلومات. هذا العنصر إلى حزمة تطوير البرامج (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;
}

إضافة منطق إلى الزر تخطّي الإعلان

أخيرًا، اربط الزر تخطّي الإعلان. لا يتم عرض هذا الزر إلا يجب أن تصل قيمة الإعلانات القابلة للتخطّي وموقّت العد التنازلي إلى 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 لهذا نموذج علامة وألصقه في عملية تنفيذ إعلانات الوسائط التفاعلية

لا يمكنني إيقاف واجهة المستخدم التلقائية.

تأكَّد من ضبط adsRenderingSettings.disableUi على true وتمريره إلى getAdsManager. تحقق مما يلي: ad.isUiDisabled() وإرجاع true. بالإضافة إلى ذلك، يجب تفعيل شبكتك في "مدير الإعلانات" لإيقافها. واجهة مستخدم إعلانية إذا كانت هذه الميزة مفعّلة، سيحتوي نموذج عرض إعلانات فيديو (VAST) على Extension تبدو مثل:

<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>

إذا كنت لا تزال تواجه مشاكل، يُرجى مراجعة مدير حسابك للتأكّد من لقد تم تمكينك. تتطلّب بعض أنواع الإعلانات واجهة مستخدم محدّدة. تعود هذه الإعلانات بـ قيمة <UiHideable> تساوي 0. في حال واجهت هذه المشكلة، يجب أن إجراء تغييرات لضمان عدم عرض أنواع الإعلانات هذه.