Le SDK IMA pour HTML5 est compatible avec les annonces audio. La configuration est similaire à celle des annonces vidéo, mais présente quelques différences importantes. Pour toute partie de la configuration IMA non abordée dans ce guide, consultez le guide de démarrage HTML5.
Utilisation d'une balise <audio> pour la lecture de contenu
Le constructeur de AdDisplayContainer accepte un deuxième argument nommé videoElement, qu'IMA suit en tant que lecteur de contenu. Cet argument accepte les balises <video> et <audio>. Pour les contenus et les annonces audio, ce guide recommande d'utiliser une balise <audio> pour construire un AdDisplayContainer. Si vous disposez de contenus vidéo, vous pouvez utiliser un tag <video> pour afficher un mélange 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 le AdDisplayContainer
Le SDK IMA pour HTML5 nécessite toujours un AdDisplayContainer, même si les annonces ou le contenu ne comportent pas de partie display. C'est pourquoi nous vous recommandons de masquer AdDisplayContainer. Voici un exemple de la façon dont vous pouvez masquer l'élément :
style.css
.ad-container {
display: none;
}
Commandes personnalisées
Étant donné que 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 commandes personnalisées :
Gérer les annonces désactivables
Comme aucun AdDisplayContainer n'est 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 suivant 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 pour chaque événement IMA AD_PROGRESS.
Consultez le guide de démarrage pour savoir comment configurer des écouteurs pour les é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/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);
}
Contrairement aux annonces vidéo, IMA ne peut pas fournir de bouton "Ignorer" pour les annonces audio.
Les développeurs doivent ajouter une UI personnalisée pour les annonces désactivables, ce qui peut être fait avec une simple balise <button>. Cette fonction updateSkipUI met à jour le bouton "Ignorer" en fonction de la possibilité d'ignorer l'annonce, de la possibilité d'ignorer l'annonce actuellement et du temps restant avant que l'annonce puisse être ignorée. 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 "Passer" personnalisé. Pour ignorer les annonces, appelez la fonction adsManager.skip().
skipButton.addEventListener('click', () => {
adsManager.skip();
});
Voici les principales modifications à apporter pour configurer le SDK IMA avec des annonces audio. Pour obtenir de l'aide concernant des problèmes d'implémentation, contactez-nous via le Centre d'aide Ad Manager.