Activer les annonces display linéaires

Le SDK IMA pour HTML5 est compatible avec les annonces display linéaires en plus des annonces vidéo linéaires. Pour en savoir plus sur les annonces vidéo linéaires, consultez Présentation de la publicité avec Video Solutions.

L'activation des annonces display linéaires peut générer une demande supplémentaire pour votre espace publicitaire, car les annonces display linéaires sont en concurrence avec les annonces vidéo linéaires pour votre espace publicitaire. Le SDK IMA gère l'affichage des annonces display linéaires, mais vous devez configurer la détection de contenus vidéo. L'implémentation de la détection de contenus IMA diffère selon que vous créez votre lecteur de contenu dans le même frame d'origine que votre lecteur d'annonces ou que vous créez votre lecteur d'annonces dans un frame interorigine.

Ce guide explique comment configurer la détection de contenus pour activer les annonces display linéaires, modifier le lecteur vidéo de contenus et arrêter de collecter des signaux de contenus.

Configurer la détection de contenus

Pour activer les annonces display linéaires pour les demandes d'annonces, procédez comme suit :

Même origine

Si le SDK IMA partage la même origine que votre lecteur de contenu, effectuez l'une des opérations suivantes :

  • (Recommandé) Transmettez le lecteur vidéo à l'appel AdsManagerLoadedEvent.getAdsManager(). Même si getAdsManager() vous permet de transmettre un objet contenant une propriété currentTime, vous devez transmettre une instance HTMLVideoElement dans getAdsManager() pour permettre la détection de contenu.

    function onAdsManagerLoaded(adsManagerLoadedEvent) {
  // Set any AdsRenderingSettings here.
  const adsRenderingSettings = new google.ima.AdsRenderingSettings();

  // Get the ads manager.
  adsManager =
    adsManagerLoadedEvent.getAdsManager(videoElement, adsRenderingSettings);
}

  • Si vous ne parvenez pas à fournir le lecteur de contenu lors de l'appel AdsManagerLoadedEvent.getAdsManager(), appelez la méthode AdsManager.configureAdsManager() avec le lecteur vidéo. Pour que la détection de contenu fonctionne, il doit s'agir d'un HTMLVideoElement.

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager =
    adsManagerLoadedEvent.getAdsManager(null);
  adsManager.configureAdsManager(videoElement);
}

Si vous ne configurez pas la détection de contenu, les ad servers Google risquent de ne plus diffuser d'annonces display linéaires.

Si votre lecteur de contenu se trouve dans la même origine que celle où vous chargez le SDK IMA, vous n'avez pas besoin de modifier votre implémentation IMA pour gérer le changement de lecteur de contenu ou l'arrêt de la collecte des signaux de contenu.

Interorigine

Si le SDK IMA est interorigine par rapport à votre lecteur de contenu, IMA peut collecter des signaux de détection de contenu via la classe CrossOriginProxy. Cette classe permet au SDK IMA de vérifier l'emplacement correct de l'annonce display linéaire et de collecter des signaux liés au sujet du contenu vidéo. Si vous placez le SDK IMA dans un iFrame interdomaine, vous devez implémenter la classe CrossOriginProxy.

Si vous continuez à placer votre lecteur de contenu sur une origine différente de celle du SDK IMA sans implémenter la classe CrossOriginProxy, les serveurs d'annonces Google risquent de ne plus diffuser d'annonces display linéaires.

Pour charger la classe CrossOriginProxy dans votre application, procédez comme suit :

  1. Dans votre fichier HTML, importez le fichier ima_proxy.js :

    <html>
  <head>
    <title>IMA HTML5 cross-origin iframe sample</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="mainContainer">
      <div id="content">
        <video id="contentElement">
          <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
        </video>
      </div>

      <!-- The cross-origin iframe where you load IMA SDK and play ads. -->
      <iframe id="adContainerIframe"
              src="https://cross-origin-domain.com/ads-sandbox.html" >
      </iframe>

    </div>
    <button id="playButton">Play</button>

    <script src="//imasdk.googleapis.com/js/sdkloader/ima_proxy.js"></script>
    <script src="main.js"></script>
  </body>
</html>

  2. Dans le fichier main.js, récupérez l'instance CrossOriginProxy.

  3. Appelez la méthode setVideoElements() avec un tableau de tous les lecteurs vidéo qui diffusent des annonces sur votre page ou dans votre application.

Avant d'envoyer une demande d'annonce, vous devez transmettre les éléments vidéo à l'instance CrossOriginProxy avec l'appel setVideoElements(). L'exemple suivant transmet un tableau contenant un seul lecteur vidéo de contenu :

// On window load attach an event to the play button click
// that triggers playback of the content video element.
window.addEventListener('load', function(event) {
videoContent = document.getElementById('contentElement');
ima.crossOriginProxy.getInstance().setVideoElements([videoContent]);
playButton = document.getElementById('playButton');
playButton.addEventListener('click', playAds);
});

Modifier le lecteur vidéo du contenu

Si vous passez à un autre lecteur vidéo de contenu ou en ajoutez un, vous devez transmettre un nouveau tableau à la méthode setVideoElements(). Lorsque vous effectuez le nouvel appel setVideoElements(), IMA commence à collecter des signaux pour le nouveau lecteur de contenu et arrête de collecter des signaux pour les lecteurs de contenu transmis lors des appels précédents.

L'exemple suivant transmet le nouvel élément vidéo à la classe CrossOriginProxy :

function createNewContentPlayer(newPlayerId) {
newVideoContent = document.getElementById(newPlayerId);
ima.crossOriginProxy.getInstance().setVideoElements([newVideoContent]);

// Continue with any other steps needed to initiate the content player
}

Arrêter de collecter des signaux une fois les annonces terminées

Lorsque vous avez terminé de diffuser des annonces et que vous appelez la méthode AdsLoader.destroy(), vous devez également appeler la méthode setVideoElements() avec un tableau vide. Effectuer l'appel setVideoElements() avec un tableau vide supprime la référence aux lecteurs de contenu qu'IMA conserve et évite les problèmes de fuite de mémoire.