IMA HTML5 SDK, birkaç temel fark dışında, video reklamlara benzer kuruluma sahip işitsel reklamları destekler. IMA kurulumunun bu kılavuzda ele alınmayan herhangi bir bölümü için HTML5 Başlangıç kılavuzuna bakın.
İçerik oynatma için <audio> etiketi kullanma
AdDisplayContainer oluşturucusu, 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, işitsel içerik ve reklamlarda AdDisplayContainer oluşturmak için <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> etiketi 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);
ReklamGörüntülü ReklamKapsayıcısını gizleme
IMA HTML5 SDK, reklamların veya içeriğin görüntülü kısmı olmasa bile bir AdDisplayContainer gerektirir. Bu nedenle, AdDisplayContainer öğesini gizlemenizi öneririz. Aşağıda, öğeyi nasıl gizleyebileceğinize ilişkin bir örnek verilmiştir:
style.css
.ad-container {
display: none;
}
Özel denetimler
AdDisplayContainer gizli olduğundan, reklam araları sırasında oynatmayı yönetmek için özel kontroller gerekir. AdsManager, aşağıdaki özel kontrolleri uygulamak için kullanılabilecek yöntemlere sahiptir:
Atlanabilir reklamları işleme
Görünür bir AdDisplayContainer olmadığından IMA SDK Reklamı atla düğmesi gösteremez. Atlanabilir reklamları yönetmek için aşağıdaki IMA yöntemlerini uygulayın:
Aşağıdaki örnek kod, bunu nasıl yapacağınızı gösterir.
ads.js
Bir reklamın atlanıp atılamayacağını ve ne zaman atlanabileceğini belirlemek için updateSkippable işlevi ayarlayabilirsiniz. Bu işlev, her AD_PROGRESS IMA etkinliğinde çağrılmalıdır.
IMA etkinlikleri için işleyicilerin nasıl ayarlanacağıyla ilgili talimatlar için Başlangıç kılavuzunu inceleyin.
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şlemi basit bir <button> etiketiyle yapabilirsiniz. Bu updateSkipUI işlevi, reklamın atlanabilir olup olmadığına, reklamın şu anda atlanabilir olup olmadığına ve reklamın atlanabilir hale gelmesi için ne kadar süre kaldığına bağlı olarak atla düğmesini günceller. IMA tarafından sağlanmayan '.hidden' sınıfını kullanır. .hidden sınıfı, display: none; öğesini <button> öğesine 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 atla düğmenize kullanıcı tıklamaları için bir işleyici ayarlayın. Reklamları atlamak için adsManager.skip() işlevini çağırın.
skipButton.addEventListener('click', () => {
adsManager.skip();
});
Bunlar, IMA SDK'yı işitsel reklamlarla ayarlamak için gereken ana değişikliklerdir. Uygulama sorunlarının yanıtları için IMA SDK Teknik Forumu'nu ziyaret edin.