IMA HTML5 SDK, video reklamlara benzer bir kurulumla işitsel reklamları destekler ancak aralarında birkaç temel fark vardır. IMA kurulumunun bu kılavuzda yer almayan herhangi bir bölümü için HTML5 Başlangıç Kılavuzu'na bakın.
İçerik oynatma için <audio> etiketi kullanımı
AdDisplayContainer sınıfının kurucusu, 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ılavuzda, ses içeriği ve reklamlar için AdDisplayContainer oluşturmak üzere bir <audio> etiketi kullanılması önerilir. Video içeriğiniz varsa işitsel ve video reklamların bir 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
Reklamlarda veya içerikte görüntüleme bölümü olmasa bile IMA HTML5 SDK için AdDisplayContainer gereklidir. Bu nedenle, AdDisplayContainer öğesini gizlemeniz önerilir. Öğeyi nasıl gizleyebileceğinize dair bir örnek:
style.css
.ad-container {
display: none;
}
Özel kontroller
AdDisplayContainer gizli olduğu için reklam araları sırasında oynatmayı yönetmek için özel kontroller gerekir. AdsManager, bu özel denetimleri uygulamak için kullanılabilecek yöntemlere sahiptir:
Atlanabilir reklamları işleme
Görünür bir AdDisplayContainer olmadığından IMA SDK'sı Reklamı atla düğmesi 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 atlanılacağını belirlemek için bir updateSkippable işlevi ayarlayabilirsiniz. Bu işlev her AD_PROGRESS IMA etkinliğinde çağrılmalıdır.
IMA etkinlikleri için dinleyicileri ayarlama 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 reklamların aksine IMA, sesli reklamlar için atlama düğmesi sağlayamaz.
Geliştiriciler, atlanabilir reklamlar için özel kullanıcı arayüzü eklemelidir. Bu, basit bir <button> etiketiyle yapılabilir. Bu updateSkipUI işlevi, reklamın atlanabilir olup olmadığına, şu anda atlanabilir olup olmadığına ve reklamın atlanabilir hale gelmesine ne kadar zaman kaldığına göre atlama düğmesini günceller. IMA tarafından sağlanmayan '.hidden' sınıfını kullanır. .hidden sınıfı, <button> öğesine display: none; değerini 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, özel atlama düğmenizin kullanıcı tıklamaları için bir dinleyici ayarlayın. Reklamları atlamak için adsManager.skip() işlevini çağırın.
skipButton.addEventListener('click', () => {
adsManager.skip();
});
IMA SDK'sını işitsel reklamlarla ayarlamak için gereken temel değişiklikler bunlardır. Uygulama sorunlarına yönelik yanıtlar için IMA SDK Teknik Forumu'nu ziyaret edin.