Diese Seite wurde von der Cloud Translation API übersetzt.

Companion-Anzeigen

Sie können Ihre In-Page-HTML-Anzeigenflächen mit Video- oder Overlay-Anzeigenflächen verknüpfen. Diese Beziehung zwischen verknüpften Anzeigenslots wird als Master-Companion-Beziehung bezeichnet.

Mit dem IMA SDK können Sie nicht nur Video- und Overlay-Masteranzeigen anfordern, sondern auch HTML-Companion-Anzeigen ausliefern. Diese Anzeigen werden in einer HTML-Umgebung ausgeliefert.

Companion-Anzeigen verwenden

So verwenden Sie Companion-Anzeigen:

1. Companion-Anzeigen buchen

Sie müssen zuerst die Companion-Anzeigen buchen, die Sie mit Ihren Master-Anzeigen schalten möchten. Companion-Anzeigen können in Ad Manager trafficked werden. Sie können pro Master-Anzeige bis zu sechs Companion-Anzeigen ausliefern. Diese Methode, bei der ein einzelner Käufer alle Anzeigen auf der Seite verwaltet, wird auch als Roadblock bezeichnet.

2. Companion-Anzeigen anfordern

Standardmäßig sind Companion-Anzeigen für jede Anzeigenanfrage aktiviert.

3. Companion-Anzeigen ausliefern

Es gibt zwei Möglichkeiten, Companion-Anzeigen zu rendern:

Automatische Verwendung des Google Publisher-Tags (GPT)
Wenn Sie das GPT zum Implementieren Ihrer Companion-Anzeigen verwenden, werden diese automatisch ausgeliefert, sofern auf der HTML-Seite Companion-Anzeigenflächen deklariert und diese Anzeigen bei der API registriert sind. Das bedeutet, dass die Div-ID in JavaScript und HTML übereinstimmen muss. Einige Vorteile von GPT sind:
- Erkennung von Companion-Anzeigenflächen
- Companion-Backfill über das Publisher-Netzwerk, wenn die VAST-Antwort weniger Companion-Anzeigen enthält, als definierte Slots auf der HTML-Seite verfügbar sind
- Companion-Anzeige automatisch ausfüllen, wenn eine Videoanzeige fehlt
- Vorab geladene Companion-Anzeigenflächen für Click-to-Play-Videoplayer
- Automatisiertes Companion-Rendering, einschließlich HTMLResource und iFrameResource
Manuelle Verwendung der Ad API

Companion-Anzeigen mit dem Google Publisher-Tag verwenden

Mit dem Google Publisher-Tag (GPT) wird die Auslieferung von HTML-Companion-Anzeigen auf Ihrer Website automatisiert. Wir empfehlen den meisten Publishern, die GPT zu verwenden. Das HTML5 SDK erkennt GPT-Steckplätze, wenn GPT auf der Hauptwebseite geladen wird (nicht in einem IFrame). Weitere Informationen zur Verwendung von GPT mit dem IMA SDK findest du in der GPT-Dokumentation.

Wenn du das HTML5 SDK in einem iFrame hostest

Wenn beide der folgenden Kriterien erfüllt sind, müssen Sie ein zusätzliches Proxy-Script einfügen, damit Ihre GPT-Anzeigen-Companions korrekt angezeigt werden:

Lade das HTML5 SDK in einen IFrame.
Laden Sie GPT auf der Hauptwebseite (außerhalb des iFrames)

Damit Ihre Companion-Apps in diesem Szenario angezeigt werden, müssen Sie das GPT-Proxy-Script vor dem Laden des SDK laden:

<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>

Was Sie unbedingt beachten sollten:

Im iFrame, in dem das SDK geladen wird, darf kein GPT geladen sein.
GPT muss auf der Hauptseite und nicht in einem anderen iFrame geladen werden.
Das Proxy-Script muss im selben Frame wie GPT geladen werden, also auf der Hauptseite.

Companion-Anzeigenslots in HTML deklarieren

In diesem Abschnitt wird erläutert, wie Sie Companion-Anzeigen in HTML mit dem GPT deklarieren. Außerdem finden Sie Beispielcode für verschiedene Szenarien. Für das HTML5 SDK müssen Sie Ihrer HTML-Seite JavaScript hinzufügen und die Anzeigen-Slots für Companion-Anzeigen deklarieren.

Hinweis:In jedem der folgenden Beispiele müssen Sie im googletag.defineSlot-Methodenaufruf gültige network- und unit-path-Werte angeben. Diese befinden sich je nach Beispiel im <head>- oder <body>-Tag.

Beispiel 1: Grundlegende Implementierung eines Anzeigen-Slots
Beispiel 2: Implementierung eines dynamischen Anzeigen-Slots
Beispiel 3: Vorab geladene Anzeigenflächen

Beispiel 1: Einfache Anzeigenflächenimplementierung

Im folgenden Codebeispiel wird gezeigt, wie Sie die gpt.js-Datei in Ihre HTML-Seite einfügen und einen Anzeigen-Slot deklarieren. Die angegebene Anzeigenfläche hat eine Größe von 728 x 90 Pixeln. GPT versucht, den Slot mit allen Companion-Anzeigen zu füllen, die in der VAST-Antwort zurückgegeben wurden und dieser Größe entsprechen. Nachdem die Anzeigenslots deklariert wurden, kann die googletag.display()-Funktion sie an jeder Stelle auf der Seite rendern, an der sie aufgerufen wird. Da es sich um Companion-Anzeigenflächen handelt, werden Anzeigen nicht sofort ausgeliefert. Stattdessen werden sie neben der Master-Videoanzeige ausgeliefert.

Hier ein Beispiel für die Implementierung:

 <html>
   <head>
     <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
     <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>-->
     <!-- HEAD part -->
     <!-- Initialize the tagging library -->
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

     <!-- Register your companion slots -->
     <script>
       window.googletag = window.googletag || { cmd: [] };

       googletag.cmd.push(function() {
         // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
         googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
             .addService(googletag.companionAds())
             .addService(googletag.pubads());
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
     </script>
   </head>

   <body>
     <!-- BODY part -->
     <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
     <div id="companionDiv" style="width:728px; height:90px;">
       <script>
         // Using the command queue to enable asynchronous loading.
         // The unit does not actually display now - it displays when
         // the video player is displaying the ads.
         googletag.cmd.push(function() { googletag.display('companionDiv'); });
       </script>
     </div>
   <body>
 </html>

Jetzt ausprobieren

Im folgenden Codepen finden Sie eine funktionierende Implementierung.

Beispiel 2: Implementierung einer dynamischen Anzeigenfläche

Manchmal wissen Sie erst nach dem Rendern des Seiteninhalts, wie viele Anzeigenflächen auf einer Seite vorhanden sind. Im folgenden Beispielcode wird gezeigt, wie Anzeigenflächen definiert werden, während die Seite gerendert wird. Dieses Beispiel ist mit Beispiel 1 identisch, mit der Ausnahme, dass die Anzeigenflächen dort registriert werden, wo sie tatsächlich ausgeliefert werden.

Hinweis:Wenn der Videoplayer die Anzeigen anzeigt, werden die Slots angefordert. Die Anzeigenflächen müssen definiert sein, bevor der Player die Anzeigen anzeigt.

 <html>
   <head>
     <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
     <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> -->
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
     <!-- HEAD part -->
     <!-- Initialize the tagging library -->
     <script>
       window.googletag = window.googletag || { cmd: [] };

       googletag.cmd.push(function() {
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
     </script>
   </head>

   <body>
     <!-- BODY part -->
     <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
     <div id="companionDiv" style="width:728px; height:90px;">
       <script>
         // Using the command queue to enable asynchronous loading.
         // The unit does not actually display now - it displays when
         // the video player is displaying the ads.
         googletag.cmd.push(function() {
           // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
           googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
               .addService(googletag.companionAds())
               .addService(googletag.pubads());
           googletag.display('companionDiv');
         });
       </script>
     </div>
   <body>
 </html>

Jetzt ausprobieren

Im folgenden Code sehen Sie eine funktionierende Implementierung.

Beispiel 3: Vorab geladene Anzeigenflächen

In bestimmten Fällen müssen Sie möglicherweise etwas im Anzeigen-Slot platzieren, bevor die Companion-Anzeige angefordert wird. Companion-Anzeigen werden in der Regel zusammen mit einer Videoanzeige angefordert. Diese Anfrage kann auch nach dem Laden der Seite erfolgen. So kann eine Companion-Anzeige beispielsweise erst geladen werden, nachdem der Nutzer auf ein Click-to-Play-Video geklickt hat. In einem solchen Fall müssen Sie in der Lage sein, eine herkömmliche Anzeige anzufordern, um den Anzeigenblock zu füllen, bevor die Companion-Anzeige angefordert wird. Um diesen Anwendungsfall zu unterstützen, können Sie im Companion-Slot standardmäßige Webanzeigen schalten. Die Webanzeigen müssen auf die Companion-Anzeigenflächen ausgerichtet sein. Sie können die Ausrichtung auf Companion-Anzeigenflächen genauso vornehmen wie auf Standard-Anzeigenflächen im Web.

Hinweis:Der folgende Beispielcode entspricht genau dem Code für Beispiel 1, mit Ausnahme des fett formatierten Abschnitts. In diesem Fall geben Sie das Anzeigennetzwerk und den Anzeigenblockpfad Ihrer vorab geladenen Anzeige an, anstatt den des Videoanzeigenblocks.

Hier ein Beispiel für die eben beschriebene Implementierung:

<html>
  <head>
    ...
    <!-- Register your companion slots -->
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(function() {
        // Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH.
        googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv')
            .addService(googletag.companionAds())
            .addService(googletag.pubads());
        googletag.companionAds().setRefreshUnfilledSlots(true);
        googletag.pubads().enableVideoAds();
        googletag.enableServices();
      });
    </script>
  </head>
  ...
</html>

Jetzt ausprobieren

Im folgenden Code-Pen sehen Sie eine funktionierende Implementierung.

Companion-Anzeigen mit der Ad API verwenden

In diesem Abschnitt wird beschrieben, wie Sie mit der Ad API Companion-Anzeigen schalten.

Companion-Anzeigen ausliefern

Wenn Sie Companion-Anzeigen schalten möchten, müssen Sie zuerst über eines der AdEvent-Ereignisse, die von der AdsManager gesendet werden, eine Referenz auf ein Ad-Objekt abrufen. Wir empfehlen, das Ereignis AdEvent.STARTED zu verwenden, da die Auslieferung von Companion-Anzeigen mit der Auslieferung der Masteranzeige zusammenfallen sollte.

Rufe dann mit diesem Ad-Objekt getCompanionAds() auf, um ein Array von CompanionAd-Objekten zu erhalten. Hier haben Sie die Möglichkeit, CompanionAdSelectionSettings anzugeben. Damit können Sie Filter für Companion-Anzeigen nach Creative-Typ, Prozentsatz der ungefähren Übereinstimmung, Ressourcentyp und Größenkriterien festlegen. Weitere Informationen zu diesen Einstellungen finden Sie in der HTML5 API-Dokumentation.

Die von getCompanionAds zurückgegebenen CompanionAd-Objekte können jetzt verwendet werden, um die Companion-Anzeigen auf der Seite gemäß diesen Richtlinien anzuzeigen:

Erstellen Sie auf der Seite einen Companion-Anzeigenblock <div> der erforderlichen Größe.
Rufe in deinem Event-Handler für das Ereignis STARTED das Objekt Ad mit getAd() ab.
Mit getCompanionAds() können Sie eine Liste mit Companion-Anzeigen abrufen, die sowohl mit der Größe des Companion-Anzeigen-Slots als auch mit CompanionAdSelectionSettings übereinstimmen und dieselbe Sequenznummer wie das Master-Creative haben. Creatives ohne Sequenzattribut werden als Creatives mit der Sequenznummer 0 behandelt.
Rufe die Inhalte aus einer CompanionAd-Instanz ab und lege sie als innere HTML des <div> dieses Anzeigen-Slots fest.

Beispielcode

<!--Set a companion ad div in html page. -->
<div id="companion-ad-300-250" width="300" height="250"></div>

<script>

  // Listen to the STARTED event.
  adsManager.addEventListener(
    google.ima.AdEvent.Type.STARTED,
    onAdEvent);

  function onAdEvent(adEvent) {
    switch (adEvent.type) {
      case google.ima.AdEvent.Type.STARTED:
        // Get the ad from the event.
        var ad = adEvent.getAd();
        var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
        selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
        selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
        selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
        // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
        var companionAds = ad.getCompanionAds(300, 250, selectionCriteria);
        var companionAd = companionAds[0];
        // Get HTML content from the companion ad.
        var content = companionAd.getContent();
        // Write the content to the companion ad slot.
        var div = document.getElementById('companion-ad-300-250');
        div.innerHTML = content;
        break;
    }
  }
</script>

Fluide Companion-Anzeigen ausliefern

IMA unterstützt jetzt flexible Companion-Anzeigen. Die Größe dieser Anzeigen kann an die Größe des Anzeigen-Slots angepasst werden. Sie füllen 100% der Breite des übergeordneten Div-Elements aus und passen dann ihre Höhe an den Inhalt des Companion-Elements an. Sie werden in Ad Manager mit der Fluid-Größe für Companion-Anzeigen festgelegt. In der folgenden Abbildung sehen Sie, wo Sie diesen Wert festlegen.

Bild, das die Einstellungen für Companion-Anzeigen in Ad Manager zeigt Die Option „Companion-Größen“ wird hervorgehoben.

GPT-Anzeigen mit dynamischen Anzeigenformaten

Wenn Sie GPT-Companions verwenden, können Sie einen flexiblen Companion-Slot deklarieren, indem Sie den zweiten Parameter der Methode defineSlot() aktualisieren.

 <!-- Register your companion slots -->
 <script>
   googletag.cmd.push(function() {
     // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
     googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
         .addService(googletag.companionAds())
         .addService(googletag.pubads());
     googletag.companionAds().setRefreshUnfilledSlots(true);
     googletag.pubads().enableVideoAds();
     googletag.enableServices();
   });
 </script>

Ad API-Fluid-Companions

Wenn Sie die Ad API für Companion-Anzeigen verwenden, können Sie einen flexiblen Companion-Slot deklarieren, indem Sie google.ima.CompanionAdSelectionSettings.SizeCriteria auf den Wert SELECT_FLUID aktualisieren.

<script>

  ...
    // Get the ad from the event.
    var ad = adEvent.getAd();
    var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
    selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
    selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
    selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;
    // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
    // Note: Companion width and height are irrelevant when fluid size is used.
    var companionAds = ad.getCompanionAds(0, 0, selectionCriteria);
    var companionAd = companionAds[0];
  ...
    }
  }
</script>