Пользовательский интерфейс рекламы

В этом руководстве показано, как реализовать собственный пользовательский интерфейс с помощью IMA SDK для 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>

Стиль.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, что вы хотите отключить встроенный пользовательский интерфейс.

реклама.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 пользовательского интерфейса по умолчанию скрыт. Показывать его только тогда, когда воспроизводимое в данный момент объявление скрывает свой пользовательский интерфейс, и скрывать пользовательский интерфейс после каждого объявления, если последующее объявление не допускает использования пользовательского интерфейса:

реклама.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 о щелчке по нему:

реклама.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();
  });
  ...
}

Добавьте логику в таймер обратного отсчета

Затем подключите таймер обратного отсчета, который будет использоваться при опросе оставшегося времени в рекламе.

реклама.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, прежде чем она активируется, чтобы пользователь мог пропустить рекламу.

реклама.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 . Кроме того, чтобы отключить рекламный интерфейс, ваша сеть должна быть включена в Менеджере рекламы. Если вы включены, ваш VAST содержит Extension , которое выглядит следующим образом:
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Если у вас по-прежнему возникают проблемы, обратитесь к менеджеру своего аккаунта, чтобы подтвердить, что вы включены. Для некоторых типов объявлений требуется определенный пользовательский интерфейс; эти объявления возвращаются со значением <UiHideable> равным 0. Если вы столкнулись с этим, ваша группа по трафику должна внести изменения, чтобы гарантировать, что эти типы объявлений не будут показываться.