ממשק משתמש של מודעה מותאמת אישית

במדריך הזה מוסבר איך להטמיע ממשק משתמש מותאם אישית באמצעות IMA SDK. ל-HTML5. כדי לעשות את זה, צריך להשבית את ממשק המשתמש שמוגדר כברירת מחדל, להגדיר ממשק משתמש מותאם אישית, ולאחר מכן לאכלס את ממשק המשתמש החדש בפרטי המודעה שהתקבלו ערכת ה-SDK. מדריך זה מבוסס על דוגמה פשוטה ל-HTML5.

הערה: כדי להשתמש בתכונה הזו, צריך להפעיל את חשבון Ad Manager. למידע נוסף, אפשר לפנות למנהל החשבון.

הוספת רכיבי ממשק המשתמש ל-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 של תג לדוגמה ולהדביק אותו בהטמעת ה-IMA.

לא ניתן להשבית את ממשק המשתמש שמוגדר כברירת מחדל.

עליך לוודא שהגדרת את adsRenderingSettings.disableUi לערך true ומעבירים את הקלט לgetAdsManager. צריך לוודא שad.isUiDisabled() מחזירה true. בנוסף, כדי להשבית את הרשת צריך להפעיל את הרשת ב-Ad Manager ממשק משתמש במודעה. אם המדיניות מופעלת, ה-VAST מכיל Extension שנראה כמו:

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

אם הבעיה נמשכת, עליך לפנות למנהל החשבון כדי לוודא זאת. מופעלת. חלק מסוגי המודעות דורשים ממשק משתמש ספציפי. על מודעות אלה מוחזרות ערך <UiHideable> של 0. אם תיתקלו בבעיה כזו, צוות ניהול הטראפיק יצטרך לבצע שינויים כדי להבטיח שסוגי המודעות האלה לא יוצגו.