Le SDK IMA pour HTML5 accepte les annonces audio avec une configuration semblable à celle des annonces vidéo, avec toutefois quelques différences importantes. Pour toute partie de la configuration IMA non traitée dans ce guide, consultez le guide de démarrage HTML5.
Utiliser une balise <audio> pour la lecture du contenu
Le constructeur de AdDisplayContainer utilise un deuxième argument nommé videoElement que IMA suit en tant que lecteur de contenu. Cet argument accepte les balises <video> ou <audio>. Pour les annonces et les contenus audio, ce guide recommande d'utiliser une balise <audio> pour créer une AdDisplayContainer. Si vous disposez de contenu vidéo, vous pouvez utiliser une balise <video> pour diffuser une combinaison d'annonces audio et vidéo:
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);
Masquer AdDisplayContainer
Le SDK IMA HTML5 nécessite toujours un élément AdDisplayContainer, même s'il n'y a pas de partie display dans les annonces ou le contenu. C'est pourquoi nous vous recommandons de masquer AdDisplayContainer. Vous trouverez ci-dessous un exemple montrant comment masquer l'élément:
style.css
.ad-container {
display: none;
}
Commandes personnalisées
Comme le AdDisplayContainer est masqué, des commandes personnalisées sont nécessaires pour gérer la lecture pendant les coupures publicitaires. AdsManager dispose de méthodes permettant d'implémenter ces contrôles personnalisés:
Gérer les annonces désactivables
En l'absence de AdDisplayContainer visible, le SDK IMA ne peut pas afficher de bouton Ignorer l'annonce. Pour gérer les annonces désactivables, implémentez les méthodes IMA suivantes:
L'exemple de code ci-dessous montre comment procéder.
ads.js
Vous pouvez configurer une fonction updateSkippable pour déterminer si et quand une annonce peut être ignorée. Cette fonction doit être appelée à chaque événement IMA AD_PROGRESS.
Consultez le guide de démarrage pour savoir comment configurer des écouteurs pour des événements 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);
}
Contrairement aux annonces vidéo, IMA n'est pas en mesure de fournir un bouton "Ignorer" pour les annonces audio.
Les développeurs doivent ajouter une UI personnalisée pour les annonces désactivables, ce qui peut se faire à l'aide d'une simple balise <button>. Cette fonction updateSkipUI met à jour le bouton "Ignorer" en fonction de si l'annonce est désactivable, si elle est actuellement désactivable et du temps restant avant que l'annonce devienne désactivable. Il utilise la classe '.hidden', qui n'est pas fournie par IMA. La classe .hidden ajoute 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');
}
}
Enfin, définissez un écouteur pour les clics des utilisateurs sur votre bouton "Ignorer" personnalisé. Pour ignorer les annonces, appelez la fonction adsManager.skip().
skipButton.addEventListener('click', () => {
adsManager.skip();
});
Voici les principales modifications nécessaires pour configurer le SDK IMA avec des annonces audio. Pour obtenir des réponses aux problèmes d'implémentation, consultez le forum technique du SDK IMA.