IMA HTML5 SDK поддерживает аудиорекламу, настройка которой аналогична видеорекламе, но с некоторыми ключевыми отличиями. Любую часть настройки IMA, не описанную в этом руководстве, см. в руководстве по началу работы с HTML5 .
Использование тега <audio> для воспроизведения контента
Конструктор AdDisplayContainer принимает второй аргумент с именем videoElement , который IMA отслеживает как проигрыватель контента. Этот аргумент принимает теги <video> и <audio> . Для аудиоконтента и рекламы в этом руководстве рекомендуется использовать тег <audio> для создания AdDisplayContainer . Если у вас есть видеоконтент, вы можете использовать тег <video> для показа аудио- и видеообъявлений:
index.html
<audio id="audio-player"></audio>
<div class="ad-container"></div>
реклама.js
audioPlayer = document.getElementById('audio-player');
adContainer = document.getElementById('ad-container');
adDisplayContainer = new google.ima.AdDisplayContainer(adContainer,
audioPlayer);
Скрытие AdDisplayContainer
IMA HTML5 SDK по-прежнему требует AdDisplayContainer даже если в рекламе или контенте нет отображаемой части. По этой причине мы рекомендуем скрыть AdDisplayContainer . Ниже приведен пример того, как можно скрыть элемент:
стиль.css
.ad-container {
display: none;
}
Пользовательские элементы управления
Поскольку AdDisplayContainer скрыт, для управления воспроизведением во время рекламных пауз необходимы специальные элементы управления. AdsManager есть методы, которые можно использовать для реализации этих пользовательских элементов управления:
Обработка объявлений с возможностью пропуска
Поскольку видимого AdDisplayContainer нет, IMA SDK не может отображать кнопку «Пропустить рекламу» . Для обработки объявлений с возможностью пропуска реализуйте следующие методы IMA:
В приведенном ниже примере кода показано, как это сделать.
реклама.js
Вы можете настроить функцию updateSkippable , чтобы определить, можно ли пропустить рекламу и когда это возможно. Эту функцию следует вызывать при каждом событии AD_PROGRESS IMA. Инструкции по настройке прослушивателей событий IMA см. в руководстве по началу работы .
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);
}
В отличие от видеообъявлений, IMA не может предоставить кнопку пропуска для аудиообъявлений. Разработчики должны добавить собственный пользовательский интерфейс для пропускаемой рекламы, что можно сделать с помощью простого тега <button> . Эта функция updateSkipUI обновляет кнопку пропуска в зависимости от того, можно ли пропустить объявление, можно ли его пропустить в данный момент, а также сколько времени осталось до того, как объявление станет доступным для пропуска. Он использует класс '.hidden' , который не предоставляется IMA. Класс .hidden добавляет display: none; на <button> .
/**
* 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');
}
}
Наконец, настройте прослушиватель кликов пользователя на пользовательской кнопке пропуска. Чтобы пропустить рекламу, вызовите adsManager.skip() .
skipButton.addEventListener('click', () => {
adsManager.skip();
});
Это основные изменения, необходимые для настройки IMA SDK с аудиообъявлениями. Ответы на вопросы реализации можно найти на техническом форуме IMA SDK .