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.
Guide de mise en œuvre
Pre-roll video ads
Annonce vidéo qui se lit dans le lecteur avant la vidéo que la personne a choisi de regarder.
Comprendre en 1 minute
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
Exemple mis en place
<!-- 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>Ce que Google recommande
Conseils
Attention
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.
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.
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é.
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.
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.
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.
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.
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
Tout ce qui figure sur cette page suit la documentation officielle de Google. Lisez-la directement à la source :
L'audit lit le site comme un visiteur, sans rien cliquer, et montre ce qu'il faut corriger.