IMA HTML5 SDK は、動画広告と同様の設定でオーディオ広告をサポートしていますが、いくつかの重要な違いがあります。このガイドで説明されていない IMA の設定については、HTML5 スタートガイドをご覧ください。
コンテンツの再生に <audio> タグを使用する
AdDisplayContainer のコンストラクタは、IMA がコンテンツ プレーヤーとしてトラッキングする videoElement という 2 番目の引数を取ります。この引数には、<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/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);
}
動画広告とは異なり、IMA ではオーディオ広告にスキップボタンを提供できません。デベロッパーは、スキップ可能な広告用のカスタム UI を追加する必要があります。これは、単純な <button> タグで行うことができます。この updateSkipUI 関数は、広告がスキップ可能かどうか、広告が現在スキップ可能かどうか、広告がスキップ可能になるまでの残り時間に基づいて、スキップボタンを更新します。IMA では提供されていない '.hidden' クラスを使用します。.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 技術フォーラムをご覧ください。