Yalnızca sesli içeriklerde reklam isteğinde bulunma

IMA HTML5 SDK, video reklamlarla benzer bir kurulumla ancak birkaç temel farkla sesli reklamları destekler. IMA kurulumunun bu kılavuzda yer almayan kısımları için HTML5 Başlangıç Kılavuzu'na bakın.

İçerik oynatma için <audio> etiketinin kullanılması

AdDisplayContainer için oluşturucu, IMA'nın içerik oynatıcı olarak izlediği videoElement adlı ikinci bir bağımsız değişken alır. Bu bağımsız değişken hem <video> hem de <audio> etiketini kabul eder. Bu kılavuz, ses içerikleri ve reklamları için <audio> oluşturmak üzere <audio> etiketi kullanılmasını önerir.AdDisplayContainer Video içeriğiniz varsa işitsel ve video reklamların karışımını göstermek için <video> etiketini kullanabilirsiniz:

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, reklamlarda veya içerikte görüntülü kısım olmasa bile AdDisplayContainer gerektirir. Bu nedenle, AdDisplayContainer simgesini gizlemenizi öneririz. Öğeyi nasıl gizleyebileceğinize dair bir örneği aşağıda görebilirsiniz:

style.css

.ad-container {
  display: none;
}

Özel kontroller

AdDisplayContainer gizli olduğundan reklam aralarında oynatmayı yönetmek için özel kontroller gerekir. AdsManager, bu özel kontrolleri uygulamak için kullanılabilecek yöntemlere sahiptir:

Atlanabilir reklamları işleme

Görünür bir AdDisplayContainer olmadığı için IMA SDK, Reklamı atla düğmesini gösteremez. Atlanabilir reklamları işlemek için aşağıdaki IMA yöntemlerini uygulayın:

Aşağıdaki örnek kodda bunun nasıl yapılacağı gösterilmektedir.

ads.js

Bir reklamın atlanıp atlanamayacağını ve ne zaman atlanabileceğini belirlemek için updateSkippable işlevini ayarlayabilirsiniz. Bu işlev, her AD_PROGRESSIMA etkinliğinde çağrılmalıdır. IMA etkinlikleri için işleyicileri nasıl ayarlayacağınızla ilgili talimatlar için Başlangıç kılavuzuna bakı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/interface/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, sesli reklamlar için atlama düğmesi sağlayamaz. Geliştiriciler, atlanabilir reklamlar için özel kullanıcı arayüzü eklemelidir. Bu işlem, basit bir <button> etiketiyle yapılabilir. Bu updateSkipUI işlevi, reklamın atlanabilir olup olmadığına, reklamın şu anda atlanabilir olup olmadığına ve reklamın atlanabilir hale gelmesine ne kadar süre kaldığına bağlı olarak atlama düğmesini günceller. IMA tarafından sağlanmayan '.hidden' sınıfı kullanılır. .hidden sınıfı, <button> öğesine display: none; ekler.

/**
 * 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, kullanıcıların özel atla düğmenizi tıklaması için bir dinleyici ayarlayın. Reklamları atlamak için adsManager.skip() işlevini çağırın.

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

IMA SDK'yı sesli reklamlarla ayarlamak için gereken temel değişiklikler şunlardır: Uygulama sorunlarıyla ilgili destek almak için Ad Manager Yardım Merkezi üzerinden bize ulaşın.