Özel Reklam Kullanıcı Arayüzü

Bu kılavuzda, IMA SDK'yı kullanarak kendi özel kullanıcı arayüzünüzü nasıl uygulayabileceğiniz gösterilmektedir kullanabilirsiniz. Bunu yapmak için varsayılan kullanıcı arayüzünü devre dışı bırakmanız, yeni bir ve ardından yeni kullanıcı arayüzünü SDK'yı kullanabilirsiniz. Bu kılavuz, basit örnek kullanabilirsiniz.

Kullanıcı arayüzü öğelerini DOM'ye ekleme

Herhangi bir JavaScript yazmadan önce, HTML'yi ve stil sayfasını değiştirerek Daha Fazla Bilgi düğmesi, Reklamı Atla düğmesi ve geri sayım zamanlayıcı:

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

İsterseniz kullanıcı arayüzünüzü farklı bir şekilde biçimlendirebilirsiniz; yukarıdaki kullanıcı arayüzü yalnızca örneğine bakalım.

Yerleşik kullanıcı arayüzünü devre dışı bırakma

SDK'ya, yerleşik kullanıcı arayüzünü devre dışı bırakmasını istediğinizi söyleyerek başlayın.

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

İzin verildiğinde özel kullanıcı arayüzünüzü gösterin ve gizleyin

AdSense reklamları gibi bazı Google reklamları, özel bir kullanıcı arayüzüne izin vermez ve her zaman kullanıcı arayüzünü oluşturabilir. Özel kullanıcı arayüzünün üzerindeki stil sayfasında div varsayılan olarak gizlidir. Bunu yalnızca, şu anda oynatılan reklam gizliyken göster Kullanıcı arayüzü açın ve sonraki reklamın uymaması ihtimaline karşı, her reklamdan sonra özel kullanıcı arayüzünü gizleyin özel bir kullanıcı arayüzüne izin ver:

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

Daha Fazla Bilgi düğmesine mantık ekleyin

Kablolamanız gereken ilk kullanıcı arayüzü bileşeni Daha Fazla Bilgi düğmesidir. Bu öğe tıklandığında SDK'yı bilgilendirir:

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

Geri sayım zamanlayıcıya mantık ekleyin

Ardından, kalan süreyi yoklamak için kullanılan geri sayım zamanlayıcısını bağlayın daha fazla bilgi edineceksiniz.

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

Reklamı Atla düğmesine mantık ekleyin

Son olarak Reklamı Atla düğmesini bağlayın. Bu düğme yalnızca Atlanabilir reklamların ve geri sayım sayacının, etkinleştirilmeden önce 0'a ulaşması gerekir. Kullanıcının bir reklamı atlamasını sağlar.

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

Sorun giderme

Reklam kullanıcı arayüzünü devre dışı bırakmak için etkinleştirilmiş bir örnek etiketiniz var mı?
Bunun URL'sini kopyalayabilirsiniz örnek etiket ve IMA uygulamanıza yapıştırabilirsiniz.
Varsayılan kullanıcı arayüzünü devre dışı bırakamıyorum.
adsRenderingSettings.disableUi ayarını true olarak ayarladığınızdan emin olun getAdsManager'a iletebiliriz. ad.isUiDisabled() olup olmadığını kontrol edin true değerini döndürür. Ayrıca kullanıcı arayüzü. Etkinleştirildiğinde, VAST'ınız görünen bir Extension örneğin: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Sorun yaşamaya devam ederseniz hesap yöneticinizle görüşerek etkin durumdasınız. Bazı reklam türleri belirli bir kullanıcı arayüzü gerektirir. bu reklamlar <UiHideable> değeri 0 olur. Bu durumla karşılaşırsanız, trafik işlemleri ekibiniz bu reklam türlerinin yayınlanmamasını sağlamak için değişiklikler yapın.