Le SDK IMA pour HTML5 est compatible avec les annonces audio dont la configuration est semblable à celle des annonces vidéo, mais avec quelques différences importantes. Pour toute partie de la configuration IMA non couverte dans ce guide, consultez le guide de démarrage HTML5.
Utilisation d'une balise <audio> pour la lecture de contenu
Le constructeur de AdDisplayContainer utilise un deuxième argument nommé videoElement, que IMA suit en tant que lecteur de contenu. Cet argument accepte une balise <video> ou <audio>. Pour les contenus et les annonces audio, ce guide recommande d'utiliser une balise <audio> pour créer un AdDisplayContainer. Si vous disposez de contenus vidéo, vous pouvez utiliser un tag <video> pour diffuser un éventail 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 conteneur AdDisplay
Le SDK IMA pour HTML5 nécessite toujours un AdDisplayContainer, même si aucune partie de l'annonce ou du contenu n'est affichée. C'est pourquoi nous vous recommandons de masquer AdDisplayContainer. Voici un exemple de masquage de 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
Étant donné qu'aucun AdDisplayContainer n'est visible, le SDK IMA ne peut pas afficher de bouton Ignorer l'annonce. Pour gérer les annonces sautables, 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 une annonce peut être ignorée et quand. 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 de désactivation 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 balise <button> simple. Cette fonction updateSkipUI met à jour le bouton "Ignorer" en fonction de l'état de l'annonce (si elle est désactivable, si elle est actuellement désactivable et combien de temps reste-t-il avant qu'elle ne 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 de saut 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 des réponses aux problèmes d'implémentation, consultez le forum technique du SDK IMA.