Sie können Ihre HTML-Anzeigenflächen auf der Seite mit Video- oder Overlay-Anzeigenflächen verknüpfen. Diese Beziehung zwischen verknüpften Anzeigenflächen wird als Master-Companion-Beziehung bezeichnet.
Neben dem Anfordern von Master-Video- und -Overlay-Anzeigen können Sie mit dem IMA SDK auch Companion-HTML-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 mit Ihren Master-Anzeigen ausgeliefert werden sollen. Companion-Anzeigen können in Ad Manager getraffickt werden. Pro Master-Anzeige können bis zu sechs Companion-Anzeigen ausgeliefert werden. Wenn ein einzelner Käufer alle Anzeigen auf der Seite kontrolliert, wird dies auch als Roadblockingbezeichnet.
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:
Automatisch mit dem Google Publisher-Tag (GPT).
Wenn Sie GPT verwenden, um Ihre Companion-Anzeigen zu implementieren, werden sie automatisch ausgeliefert, sofern auf der HTML-Seite Companion-Anzeigenflächen deklariert sind und diese Anzeigen bei der API registriert sind (d. h. die Div-ID im JavaScript und HTML muss übereinstimmen). Einige Vorteile der Verwendung von GPT:
- Erkennung von Companion-Anzeigenflächen
- Companion-Backfill aus dem Publisher-Netzwerk, wenn die VAST-Antwort weniger Companion-Anzeigen enthält als definierte Anzeigenflächen auf der HTML-Seite
- Automatisches Ausfüllen von Companion-Anzeigenflächen, wenn eine Videoanzeige fehlt
- Vorgeladene Companion-Anzeigenflächen für Click-to-Play-Videoplayer
- Automatisches Rendern von Companion-Anzeigen, einschließlich
HTMLResourceundiFrameResource
Manuell mit 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, 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.
Wenn Sie das HTML5 SDK in einem iFrame hosten
Wenn beide der folgenden Kriterien erfüllt sind, müssen Sie ein zusätzliches Proxyskript einfügen, damit Ihre GPT-Companions korrekt ausgeliefert werden:
- Laden Sie das HTML5 SDK in einem iFrame.
- Laden Sie GPT auf der Hauptwebseite (außerhalb des iFrames).
Damit Ihre Companions in diesem Szenario ausgeliefert 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, in dem das SDK geladen wird, darf kein GPT geladen sein.
- GPT muss auf der obersten Seite und nicht in einem anderen iFrame geladen werden.
- Das Proxyskript muss im selben Frame wie GPT geladen werden (d. h. auf der Hauptseite).
Companion-Anzeigenflächen in HTML deklarieren
In diesem Abschnitt wird erläutert, wie Sie Companion-Anzeigen in HTML mit GPT deklarieren. Außerdem finden Sie Beispielcode für verschiedene Szenarien. Für das HTML5 SDK müssen Sie Ihrer HTML-Seite etwas JavaScript hinzufügen und die Companion-Anzeigenflächen deklarieren.
- Beispiel 1: Einfache Implementierung einer Anzeigenfläche
- Beispiel 2: Dynamische Implementierung einer Anzeigenfläche
- Beispiel 3: Vorgeladene Anzeigenflächen
Beispiel 1: Einfache Implementierung einer Anzeigenfläche
Im folgenden Beispielcode wird gezeigt, 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 × 90 Pixel. GPT versucht, die Anzeigenfläche mit Companion-Anzeigen zu füllen, die in der VAST-Antwort zurückgegeben werden und dieser Größe entsprechen. Nachdem die Anzeigenflächen deklariert wurden, können sie mit der Funktion googletag.display() überall auf der Seite gerendert werden, wo sie aufgerufen wird. Da es sich um Companion-Anzeigenflächen handelt, werden Anzeigen nicht sofort ausgeliefert. Stattdessen werden sie neben der Master-Videoanzeige angezeigt.
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
Eine funktionierende Implementierung finden Sie im folgenden CodePen.
Beispiel 2: Dynamische Implementierung einer Anzeigenfläche
Manchmal wissen Sie erst, wie viele Anzeigenflächen auf einer Seite vorhanden sind, wenn der Seiteninhalt gerendert wird. Im folgenden Beispielcode wird gezeigt, wie Sie Anzeigenflächen definieren, während die Seite gerendert wird. Dieses Beispiel ist mit Beispiel 1 identisch, mit dem Unterschied, dass die Anzeigenflächen dort registriert werden, wo sie tatsächlich ausgeliefert 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
Eine funktionierende Implementierung finden Sie im folgenden Code.
Beispiel 3: Vorgeladene Anzeigenflächen
In bestimmten Fällen müssen Sie möglicherweise etwas in der Anzeigenfläche anzeigen, bevor die Companion-Anzeige angefordert wird. Companion-Anzeigen werden in der Regel zusammen mit einer Videoanzeige angefordert. Diese Anfrage kann nach dem Laden der Seite erfolgen. Eine Companion-Anzeige wird beispielsweise erst geladen, nachdem der Nutzer auf ein Click-to-Play-Video geklickt hat. In diesem Fall müssen Sie eine reguläre Anzeige anfordern können, um die Anzeigenfläche zu füllen, bevor die Companion-Anzeige angefordert wird. Um diesen Anwendungsfall zu unterstützen, können Sie standardmäßige Webanzeigen auf der Companion-Anzeigenfläche ausliefern. Die Webanzeigen müssen auf die Companion-Anzeigenflächen ausgerichtet sein. Sie können die Companion-Anzeigenflächen auf dieselbe Weise ausrichten wie standardmäßige Webanzeigenflächen.
Hier ein Beispiel für die 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
Eine funktionierende Implementierung finden Sie im folgenden CodePen.
Companion-Anzeigen mit der Ad API verwenden
In diesem Abschnitt wird beschrieben, wie Sie Companion-Anzeigen mit der Ad API ausliefern.
Companion-Anzeigen ausliefern
Um Companion-Anzeigen auszuliefern, rufen Sie zuerst eine Referenz zu einem Ad-Objekt über eines der AdEvent-Ereignisse ab, die vom AdsManager gesendet werden. Wir empfehlen, das Ereignis AdEvent.STARTED zu verwenden, da die Auslieferung von Companion-Anzeigen mit der Auslieferung der Master-Anzeige zusammenfallen sollte.
Rufen Sie als Nächstes mit diesem Ad-Objekt getCompanionAds() auf, um ein Array von
CompanionAd-Objekten abzurufen. Hier können Sie CompanionAdSelectionSettings angeben, mit denen Sie Filter für die Companion-Anzeigen nach Creative-Typ, prozentualer Übereinstimmung, Ressourcentyp und Größenkriterien festlegen können.
Weitere Informationen zu diesen Einstellungen finden Sie in der
IMA CompanionAdSelectionSettings API-Dokumentation.
Die von getCompanionAds zurückgegebenen CompanionAd-Objekte können jetzt verwendet werden, um
die Companion-Anzeigen auf der Seite auszuliefern. Beachten Sie dabei die folgenden Richtlinien:
- Erstellen Sie auf der Seite ein Element für die Companion-Anzeigenfläche
<div>mit der erforderlichen Größe. - Rufen Sie im Ereignishandler für das
STARTEDEreignis dasAdObjekt mitgetAd()ab. - Verwenden Sie
getCompanionAds(), um eine Liste von Companion-Anzeigen abzurufen, die sowohl der Größe der Companion-Anzeigenfläche als auch denCompanionAdSelectionSettingsentsprechen und dieselbe Sequenznummer wie das Master-Creative haben. Creatives ohne Sequenzattribut werden so behandelt, als hätten sie die Sequenznummer 0. - Rufen Sie den Inhalt aus einer
CompanionAdInstanz ab und legen Sie ihn als inneres HTML des<div>der 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>
Flexible Companion-Anzeigen ausliefern
IMA unterstützt jetzt flexible Companion-Anzeigen. Die Größe dieser Companion-Anzeigen kann an die Größe der Anzeigenfläche angepasst werden. Sie füllen die gesamte Breite des übergeordneten Div-Elements aus und passen dann ihre Höhe an den Inhalt des Companions an. Sie werden in Ad Manager mit der Companion-Größe Fluid festgelegt. Auf der folgenden Abbildung sehen Sie, wo Sie diesen Wert festlegen können.
Flexible GPT-Companions
Wenn Sie GPT-Companions verwenden, können Sie eine flexible Companion-Anzeigenfläche 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>
Flexible Ad API-Companions
Wenn Sie die Ad API für Companion-Anzeigen verwenden, können Sie eine flexible Companion-Anzeigenfläche deklarieren
indem Sie
google.ima.CompanionAdSelectionSettings.SizeCriteria
auf den SELECT_FLUID Wert 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>