Annonces audio

Le SDK IMA pour HTML5 accepte les annonces audio avec une configuration semblable à celle des annonces vidéo, quelques différences clés. Pour toutes les parties de la configuration IMA non abordées dans ce guide, consultez la page Premiers pas avec HTML5 guide de démarrage.

Utiliser un élément <audio> pour la lecture du contenu

Constructeur pour AdDisplayContainer utilise un second argument nommé videoElement, que l'IMA suit comme le contenu joueur. Cet argument accepte à la fois une balise <video> ou <audio>. Audio et les annonces, ce guide vous recommande d'utiliser une balise <audio> pour créer AdDisplayContainer Si vous disposez de contenu vidéo, vous pouvez utiliser une balise <video> pour qui diffuse 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);

Masquage de AdDisplayContainer

Le SDK IMA HTML5 nécessite toujours un AdDisplayContainer, même s'il n'y a pas s'affiche dans les annonces ou le contenu. C'est pourquoi nous vous conseillons de masquer AdDisplayContainer Vous trouverez ci-dessous un exemple illustrant comment masquer l'élément:

style.css

.ad-container {
  display: none;
}

Commandes personnalisées

Comme AdDisplayContainer est masqué, des commandes personnalisées sont nécessaires pour gérer pendant les coupures publicitaires. AdsManager comporte des méthodes qui peuvent être utilisées pour implémentez les commandes personnalisées suivantes:

Gérer les annonces désactivables

Comme le AdDisplayContainer n'est pas visible, le SDK IMA ne peut pas afficher de Bouton Ignorer l'annonce. Pour gérer les annonces désactivables, implémentez l'IMA suivant : méthodes:

L'exemple de code ci-dessous montre comment procéder.

ads.js

Vous pouvez configurer une fonction updateSkippable pour déterminer si une annonce peuvent être ignorées. Cette fonction doit être appelée sur 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/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, le SDK IMA n'est pas en mesure de fournir un bouton "Ignorer" pour les annonces audio. Les développeurs doivent ajouter une interface utilisateur personnalisée pour les annonces désactivables. Pour ce faire, ils doivent utiliser une balise <button> simple. Cette fonction updateSkipUI met à jour le bouton "Ignorer" selon que l'annonce est désactivable ou actuellement, et que le temps restant avant que l'annonce devienne désactivable. Il utilise le '.hidden', qui n'est pas fournie par le SDK IMA. La classe .hidden ajoute display: none; sur <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 : appelle la méthode adsManager.skip() .

skipButton.addEventListener('click', () => {
  adsManager.skip();
});

Voici les principales modifications nécessaires pour configurer le SDK IMA avec des annonces audio. Pour des réponses aux problèmes d'implémentation, consultez le Forum technique du SDK IMA