Die Datei direkt am Computer öffnen
Die IMA-Anleitung verlangt, die Seite über einen Webserver auszuliefern, auch wenn er lokal ist. Die HTML-Datei direkt zu öffnen kann den Test scheitern lassen.
Implementierungsleitfaden
Pre-roll video ads
Videoanzeige, die im Player vor dem Video läuft, das der Nutzer ansehen wollte.
In 1 Minute erklärt
Kennen Sie das aus dem Kino? Bevor der Film beginnt, laufen ein paar Trailer und Werbespots. Das Pre-Roll-Video ist genau das, nur auf Ihrer Website. Der Nutzer drückt auf Play, um ein Video zu sehen, und bevor der Inhalt erscheint, läuft im selben Player eine Anzeige. Der Player ist das Feld, in dem das Video läuft, mit den Schaltflächen für Play, Pause und Lautstärke. Wenn die Anzeige endet, beginnt das gewählte Video.
Damit das funktioniert, muss der Player wissen, wie er die Anzeige anfordert. Google bietet ein Code-Paket namens IMA SDK an, das Sie zusammen mit dem Player einbauen. Es sendet über ein Anzeigen-Tag eine Anfrage an Ad Manager. Das Tag ist eine Internetadresse mit den Angaben zum Platz, etwa dem Anzeigenblock und der Größe des Players. Die Antwort kommt in VAST, einem Standardformat, wie ein Rezept, das sagt, welches Video läuft und wie die Aufrufe gezählt werden. Wenn die Website Regeln für Videoanzeigen nutzt, kann die Antwort in VMAP kommen, das ist wie der Sendeplan im Fernsehen und sagt, wann welche Werbepause beginnt.
Google erklärt außerdem etwas Wichtiges dazu, dass das Video von selbst startet, dem sogenannten Autoplay. Browser wie Chrome und Safari haben eigene Regeln, und oft darf das Video nur ohne Ton von selbst starten. Es gibt keine einfache Abfrage, ob der Browser es erlaubt: Der einzige Weg ist, es zu versuchen. Deshalb sagt die IMA-Anleitung, dass auf dem Smartphone das Anzeigenfeld durch eine Aktion des Nutzers aktiviert werden soll, etwa durch Tippen auf Play. Und wenn der Player von selbst oder stumm startet, soll er das in der Anfrage angeben, damit nur Anzeigen kommen, die so laufen dürfen.
Der Pre-Roll lohnt sich, wenn das Video der Grund des Besuchs ist, etwa eine Lektion, ein Rezept oder eine Videonachricht. In der Videorichtlinie von Google heißt dieser Platz In-Stream, also innerhalb des Inhalts, den die Person sehen wollte, und er muss richtig deklariert werden. Denken Sie immer daran: Die Person kam wegen des Videos, also darf die Anzeige die Steuerelemente nicht stören und den Inhalt nicht blockieren.
Schritt für Schritt
Umgesetztes Beispiel
<!-- 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>Was Google empfiehlt
Tipps
Vorsicht
Die IMA-Anleitung verlangt, die Seite über einen Webserver auszuliefern, auch wenn er lokal ist. Die HTML-Datei direkt zu öffnen kann den Test scheitern lassen.
Auf dem Smartphone muss das Anzeigenfeld durch eine Aktion des Nutzers aktiviert werden, etwa durch Tippen auf Play. Ohne das läuft die Anzeige womöglich nicht.
Eine fehlerhafte VAST-Antwort kann einen Fehler auslösen. Das Google-Beispiel zerstört den Anzeigen-Manager und spielt das Video ab, damit der Nutzer nicht vor einem stehenden Bild hängen bleibt.
Wenn sich die Fenstergröße ändert, ruft das Google-Beispiel die Größenanpassung des AdsManager mit der Videogröße auf. Ohne das kann die Anzeige die falsche Größe haben.
Nein. Der Player kann über das IMA ein VAST-Tag anfordern. Laut Google ist der Parameter für Anzeigenregeln (ad_rule) nicht erforderlich, um Anzeigen auszuliefern, sondern nur, um die Videoanzeigenregeln zu nutzen.
VAST ist die Antwort, die sagt, welche Anzeige läuft. VMAP ist die Antwort, die bei Anzeigenregeln verwendet wird und sagt, wann die Werbepausen beginnen. Das Tag wählt das Format über den Parameter output, mit Werten wie vast und vmap.
Ja, wenn der Browser es erlaubt. Chrome und Safari beschränken Autoplay, vor allem mit Ton. Der Player soll testen, in der Anfrage angeben, ob er von selbst und stumm startet, und auf dem Smartphone die Anzeige durch eine Aktion des Nutzers starten.
Der Google-Leitfaden verlangt, dass das Video weiterläuft, wenn die Anzeigen nicht laden. Im Beispiel wird der Anzeigenmanager zerstört und das Video läuft ohne Anzeige.
Bibliothek
Alles auf dieser Seite folgt der offiziellen Google-Dokumentation. Lesen Sie direkt in der Quelle:
Das Audit liest die Website wie ein Besucher, ohne etwas anzuklicken, und zeigt, was zu korrigieren ist.