Diese Seite wurde von der Cloud Translation API übersetzt.

Companion-Anzeigen

Vielleicht möchten Sie Ihre In-Page-HTML-Anzeigenflächen mit Video- oder Overlay-Anzeigenflächen Auf die Beziehung zwischen verbundenen Anzeigenflächen als master-Companion-Beziehung hinzu.

Neben Video- und Overlay-Master-Anzeigen können Sie mit dem IMA SDK auch Companion-HTML-Anzeigen. Diese Anzeigen werden in einem HTML-Code zu verbessern.

Companion-Anzeigen verwenden

Führen Sie die folgenden Schritte aus, um Companion-Anzeigen zu verwenden:

1. Companion-Anzeigen buchen

Sie müssen zuerst die Companion-Anzeigen buchen, die Sie mit Ihrem Master-Anzeigen. Companion-Anzeigen können <ph type="x-smartling-placeholder"></ph> getraffickt. Sie können bis zu sechs Companion-Anzeigen pro Master-Anzeige liefern. Wenn ein einziger Käufer die Kontrolle über alle Anzeigen auf der Seite hat, bekannt als Roadblocking.

2. Companion-Anzeigen anfordern

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

3. Companion-Anzeigen im Displaynetzwerk

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

Automatisch mithilfe des Google Publisher-Tags (GPT)
Wenn Sie Ihre Companion-Anzeigen mit GPT implementieren, werden automatisch angezeigt, solange Companion-Anzeigenflächen deklariert sind. auf der HTML-Seite und diese Anzeigen sind beim API registriert (d. h., die div- ID im JavaScript- und HTML-Code muss übereinstimmen). Vorteile von GPT sind: <ph type="x-smartling-placeholder">
- Erkennung von Companion-Flächen
- Companion-Backfill aus dem Publisher-Netzwerk, wenn der VAST- Antwort enthält weniger Companion-Anzeigen als definierte Anzeigenflächen auf der HTML-Seite
- Companion-Autofill, wenn eine Videoanzeige fehlt
- Vorab geladene Companion-Anzeigenflächen für Click-to-Play-Videoplayer
- Automatisches Companion-Rendering, einschließlich HTMLResource und iFrameResource
Manuell über die Ad API:

Companion-Anzeigen mit dem Google Publisher-Tag verwenden

Mit dem Google Publisher-Tag (GPT) wird die Anzeige von HTML Companion-Anzeigen auf Ihrer Website. Wir empfehlen den meisten Publishern, GPT zu verwenden. Die Das HTML5 SDK erkennt GPT-Anzeigenflächen, wenn GPT auf der Hauptwebseite geladen wird. und nicht in einem iFrame. Ausführlichere Informationen zur Verwendung von GPT finden Sie in der IMA SDK in den GPT-Dokumenten.

Wenn Sie das HTML5 SDK in einem iFrame hosten

Wenn Sie die beiden folgenden Kriterien erfüllen, müssen Sie ein zusätzliches verwenden, damit Ihre GPT-Companions korrekt angezeigt werden:

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

Damit Ihre Companions in diesem Szenario angezeigt werden, müssen Sie den GPT-Proxy-Script vor dem Laden des SDKs:

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

Was Sie unbedingt beachten sollten:

In dem iFrame, in dem das SDK geladen wird, sollte kein GPT geladen werden.
GPT muss auf der obersten Seite geladen werden, nicht in einem anderen iFrame.
Das Proxy-Skript muss in demselben Frame wie GPT geladen werden, also auf der Hauptseite.

Companion-Anzeigenflächen in HTML deklarieren

In diesem Abschnitt wird erläutert, wie Companion-Anzeigen in HTML mit GPT und enthält Beispielcode für verschiedene Szenarien. Für das HTML5 SDK müssen Sie JavaScript-Code zu Ihrer HTML-Seite hinzufügen und die Companion-Anzeige deklarieren Slots.

Hinweis:Achten Sie in jedem der folgenden Beispiele darauf, gültige network und unit-path im Feld googletag.defineSlot-Methodenaufruf (im <head>- oder <body> -Tag, je nachdem, welches Beispiel Sie verwenden.

Beispiel 1: Grundlegende Implementierung von Anzeigenflächen
Beispiel 2: Implementierung von dynamischen Anzeigenflächen
Beispiel 3: Vorab geladene Anzeigenflächen

Beispiel 1: Grundlegende Implementierung von Anzeigenflächen

Der folgende Beispielcode zeigt, wie Sie die Datei gpt.js in Ihre HTML-Seite einfügen und eine Anzeigenfläche deklarieren. Die deklarierte Anzeigenfläche hat eine Größe von 728 x 90 Pixel. GPT versucht, die Anzeigenfläche mit alle in der VAST-Antwort zurückgegebenen Companion-Anzeigen, die dieser Größe entsprechen. Nachdem die Anzeigenflächen deklarierten Elemente, können sie mit der Funktion googletag.display() überall dort gerendert werden, wo sie im auf der Seite. Da es sich bei den Anzeigenflächen um Companion-Flächen handelt, werden die Anzeigen nicht sofort angezeigt. Stattdessen werden sie neben der Master-Videoanzeige erscheinen.

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

Der folgende Codepen zeigt eine funktionierende Implementierung.

Beispiel 2: Implementierung von dynamischen Anzeigenflächen

Manchmal wissen Sie vielleicht erst, der Seiteninhalt gerendert wird. Der folgende Beispielcode zeigt, wie Anzeigenflächen während die Seite gerendert wird. Dieses Beispiel ist identisch mit Beispiel 1, mit dem Unterschied, dass die Anzeige registriert wird wo sie tatsächlich angezeigt werden.

Hinweis:Wenn im Videoplayer Anzeigen eingeblendet werden sollen, werden Sie nach dem Slots. Die Anzeigenflächen müssen definiert sein, bevor im Player die Anzeigen eingeblendet werden.

 <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

Der folgende Code zeigt eine funktionierende Implementierung.

Beispiel 3: Vorab geladene Anzeigenflächen

In bestimmten Fällen muss vor der Auslieferung die Companion-Anzeige angefordert wird. Companion-Anzeigen werden normalerweise zusammen mit mit einer Videoanzeige. Diese Anfrage kann nach der Seite geladen wird. So wird eine Companion-Anzeige möglicherweise erst geladen, wenn der Nutzer auf ein Click-to-Play-Video klickt. In einem solchen Fall müssen Sie die Möglichkeit haben, eine normale Anzeige, die die Anzeigenfläche füllt, bevor die Companion-Anzeige angefordert wird. Bis diesen Anwendungsfall unterstützen, können Sie Standard-Webanzeigen in der Companion-Anzeigenfläche. Stellen Sie sicher, dass die Webanzeigen auf die Companion-Flächen ausgerichtet sind. Sie können das Targeting für Companion-Flächen genauso einrichten wie für das Targeting Standard-Web-Anzeigenflächen.

Hinweis:Der folgende Beispielcode ist identisch mit wie in Beispiel 1 angegeben, mit Ausnahme des fett gedruckten Abschnitts. In dieser geben Sie das Werbenetzwerk und den Blockpfad der Vorabladeanzeige an. statt mit dem Videoanzeigenblock.

Hier ist ein Beispiel für die gerade 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

Der folgende Codepen zeigt eine funktionierende Implementierung.

Companion-Anzeigen mit der Ad API verwenden

In diesem Abschnitt wird beschrieben, wie Companion-Anzeigen mithilfe der Ad API ausgeliefert werden.

Companion-Anzeigen im Displaynetzwerk

Um Companion-Anzeigen auszuliefern, müssen Sie zuerst einen Verweis auf ein Ad-Objekt abrufen. durch eines der AdEvent-Ereignisse, die vom AdsManager ausgelöst wurden. Wir empfehlen die Verwendung des Ereignisses AdEvent.STARTED, da dieses Ereignis Companion-Anzeigen müssen mit der Master-Anzeige zusammenfallen.

Verwenden Sie als Nächstes dieses Ad-Objekt, um getCompanionAds() für Ruft ein Array von CompanionAd-Objekten ab. Hier haben Sie die Möglichkeit, mit CompanionAdSelectionSettings angeben, mit dem Sie Filter für die Companion-Anzeigen für den Creative-Typ festlegen, Ressourcentyp und Größenkriterien. Weitere Informationen zu diesen Einstellungen finden Sie unter die HTML5 API-Dokumentation

Die von getCompanionAds zurückgegebenen CompanionAd-Objekte können nun verwendet werden, um die Companion-Anzeigen auf der Seite anzuzeigen. Dabei gelten folgende Richtlinien:

Companion-Anzeigenfläche <div> der erforderlichen Größe erstellen auf der Seite.
Im Event-Handler für die <ph type="x-smartling-placeholder"></ph> STARTED-Ereignis aufrufen, rufen Sie den <ph type="x-smartling-placeholder"></ph> Ad-Objekt durch den Aufruf von . getAd()
verwenden getCompanionAds(), um eine Liste der Companion-Anzeigen zu erhalten, Größe der Companion-Anzeigenfläche und <ph type="x-smartling-placeholder"></ph> CompanionAdSelectionSettings und haben dieselbe Sequenznummer als Master-Creative festlegen. Creatives mit einem fehlenden Sequenzattribut werden als Sequenznummer 0 behandelt.
Holen Sie sich die Inhalte von einem <ph type="x-smartling-placeholder"></ph> CompanionAd-Instanz und legen Sie sie als inneres HTMl der <div>.

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>

Fließende Companion-Anzeigen präsentieren

IMA unterstützt jetzt flexible Companion-Anzeigen. Bei diesen Companion-Anzeigen kann die Größe damit die Größe der Anzeigenfläche angepasst wird. Sie füllen 100% der Breite des übergeordneten div-Elements aus an den Inhalt des Companions anzupassen. Sie werden mithilfe der Companion-Größe Fluid festgelegt. in Ad Manager einrichten. In der folgenden Abbildung sehen Sie, wo dieser Wert festgelegt werden kann.

Abbildung der Einstellungen für Companion-Anzeigen in Ad Manager. Markiert die Option für Companion-Größen

Fließende GPT-Companions

Wenn Sie GPT-Companions verwenden, können Sie eine flexible Companion-Fläche deklarieren, indem Sie das Attribut Zweiter Parameter der Methode defineSlot().

 <!-- 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 – fließende Companions

Wenn Sie die Ad API für Companion-Anzeigen verwenden, können Sie eine flexible Companion-Fläche deklarieren, indem Sie google.ima.CompanionAdSelectionSettings.sizeCriteria in den Wert SELECT_FLUID.

<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>