Companion-Anzeigen

Sie haben die Möglichkeit, Ihre In-Page-HTML-Anzeigenflächen mit Video- oder Overlay-Anzeigenflächen zu verknüpfen. Diese Beziehung zwischen zugeordneten Anzeigenflächen wird als Master-Companion-Beziehung bezeichnet.

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

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 Ihren Master-Anzeigen schalten möchten. Companion-Anzeigen können in Ad Manager getraffickt werden. Sie können bis zu sechs Companion-Anzeigen pro Master-Anzeige liefern. Wenn ein einzelner Käufer alle Anzeigen auf der Seite verwaltet, wird diese Methode auch als Roadblocking bezeichnet.

2. Companion-Anzeigen anfordern

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

3. Companion-Anzeigen einblenden

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

• Automatische Verwendung des Google Publisher-Tags (GPT)
  Wenn Sie Ihre Companion-Anzeigen mithilfe von GPTs implementieren, werden sie automatisch angezeigt, sofern auf der HTML-Seite Companion-Anzeigenflächen deklariert sind und diese Anzeigen mit der API registriert sind (d. h., die div-ID im JavaScript und im HTML-Code muss übereinstimmen). Hier einige Vorteile von GPT:
  • Erkennung von Companion-Slots
  • Companion-Backfill aus dem Publisher-Netzwerk, wenn die VAST-Antwort weniger Companion-Anzeigen enthält, als definierte Flächen auf der HTML-Seite verfügbar sind
  • Companion-Autofill, wenn eine Videoanzeige fehlt
  • Vorab geladene Companion-Anzeigenflächen für Click-to-Play-Video-Player
  • Automatisiertes Companion-Rendering, einschließlich HTMLResource und iFrameResource
• Manuelle Verwendung der Ad API:

Companion-Anzeigen mit 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, das GPT zu verwenden. Das HTML5 SDK erkennt GPT-Anzeigenflächen, wenn GPT auf der Hauptwebseite geladen wird (nicht in einem IFrame). Weitere Informationen zur Verwendung von GPT mit dem IMA SDK finden Sie in der GPT-Dokumentation.

Hinweis:Wenn Sie das Google Interactive Media Ads SDK für die Anzeigenbereitstellung verwenden, kann zu den an den Ad-Server gesendeten Messwerten gehören, ob der Besucher mit der Seite interagiert hat, auf der die Anzeigen ausgeliefert wurden. Sie sollten diese Informationen Ihren Besuchern offenlegen, um die in Ihrem Vertrag mit Google enthaltenen Offenlegungspflichten für Datenerhebung und -nutzung zu erfüllen.

Wenn Sie das HTML5 SDK in einem iFrame hosten

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

1. Laden Sie das HTML5 SDK in einem IFrame.
2. Laden Sie GPT auf der Hauptwebseite (außerhalb des iFrames).

Damit Ihre Companions in diesem Szenario angezeigt werden, müssen Sie das GPT-Proxyskript laden, bevor Sie das SDK laden:

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

Was Sie unbedingt beachten sollten:

• Im iFrame, über den das SDK geladen wird, sollte kein GPT geladen sein.
• GPT muss auf der obersten Seite geladen werden, nicht in einem anderen iFrame.
• Das Proxy-Skript muss im selben Frame wie das GPT geladen werden, d. h. auf der Hauptseite.

Companion-Anzeigenflächen in HTML deklarieren

In diesem Abschnitt wird erläutert, wie Companion-Anzeigen in HTML mit GPT deklariert werden. 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 Companion-Anzeigenflächen deklarieren.

Hinweis:Achten Sie in jedem der folgenden Beispiele darauf, einen gültigen network und unit-path im Methodenaufruf googletag.defineSlot anzugeben (je nach tatsächlich verwendetem Beispiel im <head>- oder <body>-Tag).

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

Beispiel 1: Grundlegende Anzeigenflächenimplementierung

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

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

Ausprobieren

Der folgende Codepen zeigt eine funktionierende Implementierung.

Beispiel 2: Implementierung dynamischer Anzeigenflächen

Manchmal wissen Sie möglicherweise erst, wie viele Anzeigenflächen auf einer Seite vorhanden sind, wenn der Seiteninhalt gerendert wurde. Im folgenden Beispielcode sehen Sie, wie Anzeigenflächen definiert werden, während die Seite gerendert wird. Dieses Beispiel ist mit Beispiel 1 identisch. Der einzige Unterschied besteht darin, dass die Anzeigenflächen dort registriert werden, wo sie tatsächlich angezeigt werden.

Hinweis: Sobald der Videoplayer die Anzeigen wieder einblenden soll, werden die Anzeigenflächen abgefragt. Stellen Sie sicher, dass die Anzeigenflächen definiert sind, bevor der Player die Anzeigen einblendet.

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

Ausprobieren

Im Folgenden finden Sie den Code für eine funktionierende Implementierung.

Beispiel 3: Vorab geladene Anzeigenflächen

In bestimmten Fällen kann es erforderlich sein, etwas auf der Anzeigenfläche anzuzeigen, bevor die Companion-Anzeige angefordert wird. Companion-Anzeigen werden normalerweise zusammen mit einer Videoanzeige angefordert. Diese Anfrage kann auftreten, nachdem die Seite geladen wurde. Eine Companion-Anzeige wird beispielsweise erst geladen, wenn der Nutzer auf ein Click-to-Play-Video geklickt hat. In einem solchen Fall müssen Sie die Möglichkeit haben, eine normale Anzeige anzufordern, die die Anzeigenfläche füllt, bevor die Companion-Anzeige angefordert wird. Zur Unterstützung dieses Anwendungsfalls können Sie Standardwebanzeigen auf der Companion-Fläche präsentieren. Stellen Sie sicher, dass die Webanzeigen auf die Companion-Flächen ausgerichtet sind. Das Targeting auf die Companion-Flächen funktioniert genauso wie für das Targeting auf Standard-Webanzeigenflächen.

Hinweis:Der folgende Beispielcode ist mit Ausnahme des fett gedruckten Abschnitts identisch mit dem für Beispiel 1. In diesem Fall geben Sie das Werbenetzwerk und den Blockpfad Ihrer Vorabladeanzeige anstelle des Videoanzeigenblocks an.

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>

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 einblenden

Damit Companion-Anzeigen ausgeliefert werden können, müssen Sie zuerst über eines der AdEvent-Ereignisse, die vom AdsManager ausgelöst werden, einen Verweis auf ein Ad-Objekt abrufen. Wir empfehlen die Verwendung des Ereignisses AdEvent.STARTED, da die Auslieferung von Companion-Anzeigen mit der Master-Anzeige zusammenfallen sollte.

Verwenden Sie als Nächstes dieses Ad-Objekt, um getCompanionAds() aufzurufen und ein Array von CompanionAd-Objekten abzurufen. Hier können Sie CompanionAdSelectionSettings angeben, um Filter für die Companion-Anzeigen nach Creative-Typ, Prozentsatz, Ressourcentyp und Größenkriterien festzulegen. Weitere Informationen zu diesen Einstellungen finden Sie in der HTML5 API-Dokumentation.

Die von getCompanionAds zurückgegebenen CompanionAd-Objekte können jetzt unter Berücksichtigung der folgenden Richtlinien zur Auslieferung von Companion-Anzeigen auf der Seite verwendet werden:

1. Erstellen Sie eine Companion-Anzeigenfläche <div> der erforderlichen Größe auf der Seite.
2. Rufen Sie in Ihrem Event-Handler für das Ereignis STARTED das Objekt Ad durch Aufrufen von getAd() ab.
3. Verwenden Sie getCompanionAds(), um eine Liste der Companion-Anzeigen abzurufen, die sowohl der Größe der Companion-Anzeigenfläche als auch CompanionAdSelectionSettings entsprechen und dieselbe Sequenznummer wie das Master-Creative haben. Creatives, bei denen das Sequenzattribut fehlt, werden so behandelt, als hätten sie die Sequenznummer 0.
4. Rufen Sie den Inhalt von einer CompanionAd-Instanz ab und legen Sie ihn als innere HTMl der <div> dieser Anzeigenfläche 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>

Companion-Anzeigen im flexiblen Format präsentieren

IMA unterstützt jetzt flexible Companion-Anzeigen. Die Größe dieser Companion-Anzeigen wird an die Größe der Anzeigenfläche angepasst. Sie füllen 100% der Breite des übergeordneten div-Elements aus und passen dann die Höhe an, sodass sie in den Inhalt des Companions passt. Sie werden mithilfe der Companion-Größe Fluid in Ad Manager festgelegt. In der folgenden Abbildung sehen Sie, wo Sie diesen Wert festlegen.

Flexible GPT-Companions

Wenn Sie GPT-Companions verwenden, können Sie eine flexible Companion-Fläche angeben, 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>

Flexible Ad API-Companions

Wenn Sie die Ad API für Companion-Anzeigen verwenden, können Sie eine flexible Companion-Fläche angeben, 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>