Ouvrir l'espace

Guide de mise en œuvre

Vidéo pre-roll

Pre-roll video ads

Annonce vidéo qui se lit dans le lecteur avant la vidéo que la personne a choisi de regarder.

  • Ad Manager
  • Ad Exchange
  • AdSense (via Ad Manager)
  • dans le lecteur vidéo (mobile et ordinateur)
Desktop
Mobile

Comprendre en 1 minute

Qu'est-ce que la vidéo pre-roll ?

Vous allez au cinéma et, avant le début du film, on passe quelques bandes-annonces et publicités ? La vidéo pre-roll, c'est exactement cela, mais sur votre site. La personne appuie sur lecture pour voir une vidéo et, avant que le contenu apparaisse, une annonce se lit dans le même lecteur. Le lecteur est la petite boîte où passe la vidéo, avec les boutons de lecture, de pause et de volume. Quand l'annonce se termine, la vidéo choisie démarre.

Pour que cela fonctionne, le lecteur doit savoir demander l'annonce. Google propose un ensemble de code appelé IMA SDK, que vous placez avec le lecteur. Il envoie une demande à Ad Manager à l'aide d'une balise d'annonce, qui est une adresse internet contenant les informations de l'espace, comme le bloc d'annonces et la taille du lecteur. La réponse arrive en VAST, un format standard, comme une recette qui indique quelle vidéo lire et comment compter les visionnages. Quand le site utilise des règles d'annonces vidéo, la réponse peut arriver en VMAP, qui ressemble à la grille des programmes télé et indique quand commence chaque coupure.

Google explique aussi un point important sur le démarrage automatique de la vidéo, appelé autoplay. Les navigateurs, comme Chrome et Safari, ont leurs propres règles, et souvent la vidéo ne peut démarrer seule que si elle est sans le son. Il n'existe pas de moyen simple de savoir si le navigateur l'autorise : le seul moyen est d'essayer de lire. C'est pourquoi le guide IMA indique que, sur mobile, la boîte de l'annonce doit être activée par une action de la personne, comme appuyer sur le bouton de lecture. Et si le lecteur doit démarrer seul ou sans le son, il doit l'indiquer dans la demande, pour ne recevoir que des annonces pouvant être lues ainsi.

Le pre-roll vaut le coup quand la vidéo est la raison de la visite, comme un cours, une recette ou une actualité en vidéo. Dans la politique vidéo de Google, cet espace s'appelle In-stream, ce qui veut dire à l'intérieur du contenu que la personne a choisi de regarder, et il doit être déclaré correctement. Rappelez-vous toujours : la personne est venue pour la vidéo, donc l'annonce ne doit pas gêner les commandes ni bloquer le contenu.

Pas à pas

Comment mettre en œuvre

  1. Créez un bloc d'annonces vidéoDans Ad Manager, le pre-roll utilise un bloc d'annonces vidéo et audio. C'est de ce bloc que sort le tag que le lecteur utilisera.
  2. Générez la balise de l'annonceAllez dans Inventaire, Blocs d'annonces, ouvrez le bloc et cliquez sur Tags. Choisissez Google Publisher Tag pour la vidéo et l'audio, avancez dans les étapes et copiez le tag. Les valeurs entre crochets doivent être remplies par le lecteur au moment de la demande.
  3. Placez l'IMA SDK dans la pageChargez le script de l'IMA SDK avant votre code. Créez une boîte au-dessus de la vidéo pour l'annonce et reliez cette boîte à la vidéo avec l'AdDisplayContainer, la pièce d'IMA qui affiche l'annonce.
  4. Demandez l'annonceCréez un AdsLoader et un AdsRequest avec votre balise. Indiquez la largeur et la hauteur de l'espace de l'annonce linéaire. Cela aide l'IMA à choisir la bonne annonce quand plusieurs arrivent.
  5. Mettez le contenu en pause et reprenez-leQuand IMA demande une pause (événement CONTENT_PAUSE_REQUESTED), mettez la vidéo en pause. Quand il demande de continuer (CONTENT_RESUME_REQUESTED), relancez la lecture. En cas d'erreur, détruisez le gestionnaire d'annonces et laissez la vidéo se lire sans annonce.
  6. Démarrez au clic de la personneSur le bouton de lecture, activez la boîte de l'annonce, puis initialisez et démarrez l'AdsManager. Le guide IMA indique que, sur mobile, la boîte de l'annonce doit être activée par une action de la personne.

Exemple mis en place

Le code et le rendu à l'écran

Placez-la sur la page de la vidéo : le script IMA en haut, le lecteur avec la boîte de l'annonce par-dessus et le code qui demande le pre-roll quand la personne clique sur Regarder.
<!-- 1. Carrega o IMA SDK (antes do seu código) -->
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

<!-- 2. O vídeo e, por cima dele, a caixa do anúncio -->
<div style="position:relative;width:640px;height:360px">
  <video id="conteudo" width="640" height="360" playsinline controls>
    <source src="meu-video.mp4" type="video/mp4">
  </video>
  <div id="adContainer" style="position:absolute;top:0;left:0"></div>
</div>
<button id="playButton">Assistir</button>

<script>
  var video = document.getElementById('conteudo');
  var adDisplayContainer = new google.ima.AdDisplayContainer(
      document.getElementById('adContainer'), video);
  var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
  var adsManager;

  adsLoader.addEventListener(
      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
      function (e) {
        adsManager = e.getAdsManager(video);
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
            function () { video.pause(); });
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
            function () { video.play(); });
        adsManager.addEventListener(
            google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
      });
  adsLoader.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);

  function onAdError(e) {
    console.log(e.getError());
    if (adsManager) { adsManager.destroy(); }
    video.play(); // sem anúncio, o vídeo continua
  }

  // 3. Pedido do anúncio (IDs de exemplo)
  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
      'iu=/1234567/exemplo&sz=640x480&env=vp&gdfp_req=1&output=vast' +
      '&unviewed_position_start=1&vpa=click&vpmute=0&plcmt=1' +
      '&description_url=https%3A%2F%2Fwww.exemplo.com%2Fvideo&correlator=';
  adsRequest.linearAdSlotWidth = 640;
  adsRequest.linearAdSlotHeight = 400;
  adsLoader.requestAds(adsRequest);

  // 4. Só começa quando a pessoa clica em Assistir
  document.getElementById('playButton').addEventListener('click', function () {
    adDisplayContainer.initialize();
    try {
      adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
      adsManager.start();
    } catch (err) {
      video.play();
    }
  });
</script>
Sur ordinateurL'annonce se lit dans le lecteur, au même endroit où la vidéo va passer, avant le début du contenu. Quand elle se termine, la vidéo choisie démarre.
Sur mobileElle apparaît aussi dans le lecteur, en général après que la personne a appuyé sur lecture. Sur iPhone, la vidéo a besoin de l'attribut playsinline pour être lue dans la page, et non dans le lecteur plein écran.

Ce que Google recommande

Ce qui est permis et ce qui ne l'est pas

Autorisé

  • Jouer l'annonce avant la vidéo que la personne a choisie, dans le lecteur, avec l'IMA SDK, l'un des outils que Google exige pour les espaces In-stream.
  • Démarrer l'annonce à partir du clic de la personne sur le bouton de lecture, comme le recommande le guide IMA pour le mobile.
  • Utiliser l'autoplay, y compris sans le son, à condition que le lecteur indique dans la demande qu'il va démarrer seul et s'il sera muet.
  • Laisser la vidéo se lire normalement quand l'annonce provoque une erreur, comme le fait l'exemple de Google.

Interdit

  • Vous ne pouvez pas déclarer le mauvais espace : une annonce dans un lecteur avec vidéo doit être déclarée comme In-stream ou Contenu associé (vidéo qui accompagne le contenu principal).
  • Ne laissez pas les commandes de l'annonce et de la vidéo recouvertes, masquées ou inopérantes.
  • Ne lancez pas plusieurs vidéos avec son en lecture automatique en même temps, ni plusieurs lecteurs en lecture automatique visibles à l'écran.
  • L'annonce ne doit pas démarrer seule avant qu'au moins 50 % de l'espace soit visible.
  • N'utilisez pas les produits IMA pour monétiser des vidéos YouTube.

Conseils

Pour bien faire les choses

Attention

Erreurs courantes

Ouvrir le fichier directement sur l'ordinateur

Le guide IMA demande de servir la page via un serveur web, même local. Ouvrir directement le fichier HTML peut faire échouer le test.

Démarrer sans action de la personne sur mobile

Sur mobile, la boîte de l'annonce doit être activée par une action de la personne, comme appuyer sur lecture. Sans cela, l'annonce peut ne pas se lire.

Ne pas gérer l'erreur de l'annonce

Une réponse VAST défectueuse peut provoquer une erreur. L'exemple de Google détruit le gestionnaire d'annonces et lit la vidéo, pour que la personne ne reste pas bloquée sur un écran figé.

Oublier d'ajuster la taille

Quand la fenêtre change de taille, l'exemple de Google appelle le redimensionnement de l'AdsManager avec la taille de la vidéo. Sans cela, l'annonce peut avoir la mauvaise taille.

Questions fréquentes

Ai-je besoin des règles d'annonce pour avoir du pre-roll ?

Non. Le lecteur peut demander un tag VAST via l'IMA. Google indique que le paramètre de règles d'annonce (ad_rule) n'est pas obligatoire pour diffuser des annonces, seulement pour utiliser les règles d'annonces vidéo.

Quelle est la différence entre VAST et VMAP ?

VAST est la réponse qui indique quelle annonce lire. VMAP est la réponse utilisée avec les règles d'annonces, qui indique quand arrivent les coupures. La balise choisit le format via le paramètre output, avec des valeurs comme vast et vmap.

Le pre-roll peut-il démarrer seul ?

Oui, quand le navigateur l'autorise. Chrome et Safari limitent l'autoplay, surtout avec le son. Le lecteur doit tester, indiquer dans la demande s'il démarre seul et sans le son, et sur mobile lancer l'annonce à partir d'une action de la personne.

Que se passe-t-il si l'annonce ne se charge pas ?

Le guide de Google demande que la vidéo continue de jouer quand les annonces ne se chargent pas. Dans l'exemple, le gestionnaire d'annonces est détruit et la vidéo joue sans annonce.

Bibliothèque

Source officielle de Google

Tout ce qui figure sur cette page suit la documentation officielle de Google. Lisez-la directement à la source :

Votre site utilise-t-il bien ce format ?

L'audit lit le site comme un visiteur, sans rien cliquer, et montre ce qu'il faut corriger.

Lancer un audit