IMA HTML5 SDK はオーディオ広告をサポートしていますが、動画広告と同様の設定ですが、いくつかの重要な違いがあります。このガイドで説明されていない IMA の設定については、HTML5 スタートガイドをご覧ください。
コンテンツ再生に <audio> タグを使用する
AdDisplayContainer のコンストラクタは、videoElement という 2 番目の引数を取ります。この引数は、IMA がコンテンツ プレーヤーとしてトラッキングします。この引数には、<video> タグまたは <audio> タグの両方を指定できます。音声コンテンツと広告の場合は、<audio> タグを使用して AdDisplayContainer を作成することをおすすめします。動画コンテンツがある場合は、<video> タグを使用してオーディオ広告と動画広告を組み合わせて表示できます。
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 を非表示にする
広告やコンテンツに表示部分がない場合でも、IMA HTML5 SDK では AdDisplayContainer が必要です。このため、AdDisplayContainer を非表示にすることをおすすめします。要素を非表示にする方法の例を次に示します。
style.css
.ad-container {
display: none;
}
カスタム コントロール
AdDisplayContainer は非表示なので、ミッドロール挿入点の再生を処理するにはカスタム コントロールが必要です。AdsManager には、以下のカスタム コントロールの実装に使用できるメソッドがあります。
スキップ可能な広告の処理
AdDisplayContainer が表示されないため、IMA SDK では [広告をスキップ] ボタンを表示できません。スキップ可能な広告を処理するには、次の IMA メソッドを実装します。
次のサンプルコードは、この方法を示しています。
ads.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> タグでスキップ可能な広告用のカスタム UI を追加する必要があります。この 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 の技術フォーラムをご覧ください。