Arbeitsbereich

Implementierungsleitfaden

Pre-Roll-Video

Pre-roll video ads

Videoanzeige, die im Player vor dem Video läuft, das der Nutzer ansehen wollte.

  • Ad Manager
  • Ad Exchange
  • AdSense (über Ad Manager)
  • im Videoplayer (Smartphone und Desktop)
Desktop
Smartphone

In 1 Minute erklärt

Was ist das Pre-Roll-Video?

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

So setzen Sie es um

  1. Videoanzeigenblock erstellenIn Ad Manager verwendet der Pre-Roll einen Video- und Audio-Anzeigenblock. Aus diesem Block stammt das Tag, das der Player verwendet.
  2. Anzeigen-Tag generierenGehen Sie zu Inventar, Anzeigenblöcke, öffnen Sie den Block und klicken Sie auf Tags. Wählen Sie Google Publisher Tag für Video und Audio, gehen Sie die Schritte durch und kopieren Sie das Tag. Die Werte in eckigen Klammern muss der Player im Moment der Anfrage ausfüllen.
  3. IMA SDK in die Seite einbauenLaden Sie das IMA-SDK-Script vor Ihrem Code. Erstellen Sie über dem Video ein Feld für die Anzeige und verbinden Sie das Feld mit dem Video über den AdDisplayContainer, den Teil von IMA, der die Anzeige darstellt.
  4. Anzeige anfordernErstellen Sie einen AdsLoader und einen AdsRequest mit Ihrem Tag. Geben Sie Breite und Höhe des linearen Anzeigenplatzes an. Das hilft dem IMA, die richtige Anzeige auszuwählen, wenn mehrere ankommen.
  5. Inhalt pausieren und fortsetzenWenn IMA eine Pause verlangt (Ereignis CONTENT_PAUSE_REQUESTED), pausieren Sie das Video. Wenn es die Fortsetzung verlangt (CONTENT_RESUME_REQUESTED), spielen Sie wieder ab. Bei einem Fehler zerstören Sie den Anzeigen-Manager und lassen das Video ohne Anzeige laufen.
  6. Beim Klick des Nutzers startenAktivieren Sie bei der Play-Schaltfläche das Anzeigenfeld und starten Sie dann den AdsManager. Laut IMA-Anleitung muss auf dem Smartphone das Anzeigenfeld durch eine Aktion des Nutzers aktiviert werden.

Umgesetztes Beispiel

Der Code und wie es auf dem Bildschirm aussieht

Gehört auf die Videoseite: das IMA-Script oben, der Player mit dem Anzeigenfeld darüber und der Code, der das Pre-Roll anfordert, wenn der Nutzer auf Ansehen klickt.
<!-- 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>
Auf dem DesktopDie Anzeige läuft im Player, an derselben Stelle, an der das Video laufen wird, bevor der Inhalt beginnt. Wenn sie endet, startet das gewählte Video.
Auf dem SmartphoneSie erscheint ebenfalls im Player, normalerweise nachdem der Nutzer auf Play getippt hat. Auf dem iPhone braucht das Video das Attribut playsinline, um in der Seite abgespielt zu werden und nicht im Vollbild-Player.

Was Google empfiehlt

Erlaubt und nicht erlaubt

Erlaubt

  • Die Anzeige vor dem Video abspielen, das die Person gewählt hat, im Player, mit dem IMA SDK, einem der Werkzeuge, die Google für In-Stream-Slots verlangt.
  • Die Anzeige beim Klick des Nutzers auf die Play-Schaltfläche starten, wie es die IMA-Anleitung für Smartphones empfiehlt.
  • Autoplay verwenden, auch ohne Ton, sofern der Player in der Anfrage angibt, dass er von selbst startet und ob er stumm läuft.
  • Das Video normal weiterlaufen lassen, wenn die Anzeige einen Fehler hat, wie es das Google-Beispiel macht.

Nicht erlaubt

  • Der Slot darf nicht falsch deklariert werden: Eine Anzeige in einem Player mit Video muss als In-Stream oder Begleitinhalt (Video, das den Hauptinhalt begleitet) deklariert werden.
  • Nicht erlaubt: die Steuerung von Anzeige und Video verdecken, verstecken oder außer Funktion setzen.
  • Nicht erlaubt: mehr als ein Video gleichzeitig mit Ton von selbst abspielen oder mehr als einen sichtbaren Player von selbst abspielen.
  • Die Anzeige darf nicht von selbst starten, bevor mindestens 50 % des Platzes sichtbar sind.
  • Sie dürfen die IMA-Produkte nicht nutzen, um mit YouTube-Videos Geld zu verdienen.

Tipps

So machen Sie es richtig

Vorsicht

Häufige Fehler

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.

Ohne Aktion des Nutzers auf dem Smartphone starten

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.

Den Anzeigenfehler nicht behandeln

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.

Die Größe nicht anpassen

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.

Häufige Fragen

Brauche ich Anzeigenregeln für einen Pre-Roll?

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.

Was ist der Unterschied zwischen VAST und VMAP?

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.

Kann das Pre-Roll von selbst starten?

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.

Was passiert, wenn die Anzeige nicht lädt?

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

Offizielle Google-Quelle

Alles auf dieser Seite folgt der offiziellen Google-Dokumentation. Lesen Sie direkt in der Quelle:

Nutzt Ihre Website dieses Format richtig?

Das Audit liest die Website wie ein Besucher, ohne etwas anzuklicken, und zeigt, was zu korrigieren ist.

Audit starten