Sesli reklamlar

IMA HTML5 SDK'sı, video reklamlara benzer kuruluma sahip ancak birkaç temel fark vardır. IMA kurulumunun bu kılavuzda ele alınmayan bölümleri için HTML5 Başlarken'i inceleyin: rehberini inceleyin.

<audio> kullanımı içerik oynatma etiketi

Oluşturucu AdDisplayContainer IMA, içerik olarak izlediği videoElement adlı ikinci bir bağımsız değişkeni alır oynatıcıya gitmiş olur. Bu bağımsız değişken hem <video> hem de <audio> etiketini kabul eder. İşitsel için Bu kılavuzda, bir <audio> etiketi oluşturmak için AdDisplayContainer. Video içeriğiniz varsa aşağıdakiler için bir <video> etiketi kullanabilirsiniz: Gösteriliyor:

index.html

<audio id="audio-player"></audio>
<div class="ad-container"></div>

ads.js

audioPlayer = document.getElementById('audio-player');
adContainer = document.getElementById('ad-container');
adDisplayContainer = new google.ima.AdDisplayContainer(adContainer,
audioPlayer);

AdDisplayContainer'ı Gizleme

IMA HTML5 SDK'sı olmasa bile AdDisplayContainer gerekir. Reklam veya içeriğin bir kısmını gösterir. Bu nedenle, her bir tablodaki AdDisplayContainer Aşağıda, öğeyi nasıl gizleyebileceğinize dair bir örnek verilmiştir:

style.css

.ad-container {
  display: none;
}

Özel kontroller

AdDisplayContainer gizlendiğinden bu öğenin işlenmesi için özel kontroller gerekir oynatmaya devam eder. AdsManager, aşağıdakileri yapmak için kullanılabilecek yöntemler sunar: şu özel denetimleri uygulayın:

Atlanabilir reklamları kullanma

Görünür bir AdDisplayContainer olmadığından IMA SDK Reklamı atla düğmesi. Atlanabilir reklamları yönetmek için aşağıdaki IMA'yı uygulayın yöntemleri:

Aşağıdaki örnek kod, bunun nasıl yapılacağını gösterir.

ads.js

Bir reklamın yayınlanıp yayınlanmayacağını ve ne zaman gösterileceğini belirlemek için updateSkippable işlevini ayarlayabilirsiniz. atlanabilir. Bu işlev, her AD_PROGRESS IMA etkinliğinde çağrılmalıdır. Bkz. Başlangıç kılavuzu sayfasına göz atın.

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager = adsManagerLoadedEvent.getAdsManager(
    audioPlayer);

  ...

  adsManager.addEventListener(
    google.ima.AdEvent.Type.AD_PROGRESS,
    onAdEvent);

  ...

}

function onAdEvent(adEvent) {
  const ad = adEvent.getAd();
  if (ad) {
    currentAd = ad; // currentAd is defined outside of this functions scope.
  }
  switch (adEvent.type) {

    ...

    case google.ima.AdEvent.Type.AD_PROGRESS:
      // See https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/js/google.ima.AdProgressData
      const adProgressData = adEvent.getAdData();

      updateSkippable(
        adProgressData.currentTime,
        currentAd.getSkipTimeOffset()
      );
      break;
    ...

  }
}

/**
   * Called when there may be a change in the skippable state.
   * @param {number} currentTime The current time of the
   * currently playing ad.
   * @param {number} skipTimeOffset The number of seconds of playback
   * before the ad becomes skippable. -1 is returned for non skippable
   * ads or if this is unavailable.
   */
  updateSkippable(currentTime, skipTimeOffset) {
    const isAdSkippable = skipTimeOffset !== -1;
    const isSkipCurrentlyAllowed = adsManager.getAdSkippableState();
    const timeTillSkipInSeconds = Math.ceil(skipTimeOffset - currentTime);
    updateSkipUI(
        isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds);
  }

Video reklamlardan farklı olarak, IMA işitsel reklamlar için bir atlama düğmesi sağlayamaz. Geliştiriciler, atlanabilir reklamlar için özel bir kullanıcı arayüzü eklemelidir. Bu işlem basit <button> etiketi. Bu updateSkipUI işlevi, atla düğmesini günceller Reklamın atlanabilir olup olmadığına, şu anda atlanabilir olup olmadığına ve reklamın atlanabilir hale gelmesine ne kadar süre kaldığı. Bu özellik, IMA tarafından sağlanmayan '.hidden' sınıfı. .hidden sınıfı eklenir. <button> - display: none;.

/**
 * Updates the skip button UI.
 * @param {boolean} isAdSkippable if the current ad is a skippable ad.
 * @param {boolean} isSkipCurrentlyAllowed if the ad can be skipped now.
 * @param {number} timeTillSkipInSeconds time until the ad can be skipped in
 * seconds.
 */
updateSkipUI(isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds) {
  if (isAdSkippable) {
    skipButton.classList.remove('hidden');
    if (isSkipCurrentlyAllowed) {
      skipButton.textContent = 'Skip ad';
      skipButton.disabled = false;
    } else {
      skipButton.textContent = `Skip in ${timeTillSkipInSeconds} seconds`;
      skipButton.disabled = true;
    }
  } else {
    skipButton.classList.add('hidden');
  }
}

Son olarak, özel atla düğmenizdeki kullanıcı tıklamaları için bir işleyici ayarlayın. Reklamları atlamak için şunu ara: adsManager.skip() işlevini kullanın.

skipButton.addEventListener('click', () => {
  adsManager.skip();
});

Bunlar, işitsel reklamlar içeren IMA SDK'yı ayarlamak için gereken ana değişikliklerdir. Örneğin, daha fazla bilgi edinmek için IMA SDK Teknik Forumu.