Die Situationen: Stabile Ads und Conditional Ads
Stabile Ads
Stabile Ads sind Adslots (Werbeplätze), die durch alle Breakpoints konstant angezeigt werden können. Vorsicht: Mit "angezeigt" meine ich nur, dass der Adslot (der Adtag im Markup) grundsätzlich immer da ist, dass also an genau dieser Stelle immer ein Werbemittel ausgespielt wird. Ich meine damit nicht, dass dieses Werbemittel durch alle Breakpoints die gleiche Größe hat. Das ist nicht der Fall. Im Gegenteil: Es ist derselbe - immer sichtbare - Werbeplatz, aber er zeigt für jeden Breakpoint ein, in der Größe passendes, Werbemittel. Vereinfacht gesagt: Es gibt Stellen, an denen wird immer Werbung stehen (auch wenn für verschiedene Breiten andere Werbemittel gezeigt werden).
Ein gutes Beispiel für einen stabilen Adslot ist die Banner-on-top-Position, die in fast allen (großen) Webseiten in Smallscreen- und Bigscreen-Darstellungen vorhanden ist. Folgende Aufgabe gilt es bei stabilen Ads zu lösen: Wie schaffen wir es, in ein und demselben Adtag, das jeweils passende Werbemittel für den Viewport des Users auszuspielen?
Conditional Ads
Conditional Ads sind Adslots, deren Darstellung (in einem Responsive Frontend) mit einer Bedingung verbunden ist. Fast immer ist diese Bedingung eine bestimmte Breite (im sichtbaren Bereich des Browserfensters), die erreicht werden muss. Vereinfacht gesagt: Es gibt Stellen, an denen wird nur manchmal (wenn die Breite es zulässt) Werbung stehen.
Ein gutes Beispiel für ein Conditional Ad Placement ist die Skyscraper-Position (fast immer rechts neben der Seite), die (meistens) nur in der Bigscreen-Darstellung vorhanden ist und für Smallscreen oder Tablet nicht mehr ausgespielt wird. Die Herausforderung bei Conditional Ads: Wie schaffen wir es, den Adtag nur in den Breiten auszuspielen, in denen dort auch Werbung gezeigt werden kann?
Conditional Adtags dynamisch ausspielen
Unser klassisches Responsive-Werkzeug MediaQueries können wir zur Behandlung von Conditional Ads leider nicht brauchen, weil wir den Adslot nicht ausblenden oder umplatzieren dürfen, sondern der Adtag (der Quelltext, der das Ad in die Seite einbindet) wirklich nur dann in der Seite stehen darf, wenn das Ad zu sehen ist.
JavaScript bietet sich hier (außer einem serverseitigen Include beim Rendern der Seite) als Lösung an. Conditional Adtags werden per Javascript nur dann ausgespielt, wenn das größte (oder das kleinste?) zu erwartende Werbemittel für diesen Adslot in die sichtbare Breite passt. Weil Adtags fast immer kleine JavaScripte sind, ist es die einfachste Lösung, diese um eine Bedingung zu erweitern. Hier ein Beispiel-AdTag:
<script type="text/javascript">
var ord = Number(ord) || Math.floor(Math.random()*10e12);
document.write('<a href="http://ad.doubleclick.net/Nnetwork_code/jump/first_level_ad_unit/second_level_ad_unit;pos=top;tile=tile_number;sz=widthxheight;ord=' + ord + '?" target="_blank"> <img src="http://ad.doubleclick.net/Nnetwork_code/ad/first_level_ad_unit/second_level_ad_unit;pos=top;tile=tile_number;sz=widthxheight;ord=' + ord + '?" /></a>');
</script>
Derselbe Tag mit der Bedingung, ihn nur zwischen 400 und 800 px auszuspielen:
<script type="text/javascript">
var ord = Number(ord) || Math.floor(Math.random()*10e12);
if ((window.innerWidth >= 400) && (window.innerWidth <= 800)) {
document.write('<a href="http://ad.doubleclick.net/Nnetwork_code/jump/first_level_ad_unit/second_level_ad_unit;pos=top;tile=tile_number;sz=widthxheight;ord=' + ord + '?" target="_blank"><img src="http://ad.doubleclick.net/Nnetwork_code/ad/first_level_ad_unit/second_level_ad_unit;pos=top;tile=tile_number;sz=widthxheight;ord=' + ord + '?" /></a>');
} else if (window.innerWidth > 801) {
document.write('<!--sorry-no-ad-for-this-size-->');
}
</script>
Dass sich bei diesem Vorgehen die Ads nicht anpassen, wenn ein User die Größe seines Browserfensters verändert, ist nicht schlimm. Entscheidend ist, welches Ad beim initialen Seitenaufbau gezeigt wird. Meistens sind es ja eher wir Designer und Entwickler, die mit der Grösse des Browserfestener herumspielen. Der User tut das nur sehr selten.
Kein Mapping von Breakpoint zu Werbemitteln im Frontend!
Mit dieser Methode kann man natürlich nicht nur den Tag ein- und ausblenden, sondern auch gleich mehrere Adtags für verschiedene Werbemittel sammeln und je nach Breakpoint dynamisch ausspielen. Das würde dann ungefähr so aussehen:
<script type="text/javascript">
var ord = Number(ord) || Math.floor(Math.random()*10e12);
if ((window.innerWidth >= 1) && (window.innerWidth <= 200)) {
document.write('AD-TAG-EINS');
} else if ((window.innerWidth >= 201) && (window.innerWidth <= 600)) {
document.write('AD-TAG-ZWEI');
} else if ((window.innerWidth >= 601) && (window.innerWidth <= 800)) {
document.write('AD-TAG-DREI');
} else if (window.innerWidth > 801) {
document.write('<!--sorry-no-ad-for-this-size-->');
}
</script>
Das ist nichts Neues. Vermarkter in den USA bieten ihren Publishern genau diese Lösung als BestPractice an und auch Google hat (nach Vorarbeit von Amit Agarwal und Matt Nish) diese Lösung für die dynamische Ausspielung von Google Adsense offiziell abgesegnet. Obwohl das im Moment vielleicht gut funktioniert, ist dieses Vorgehen keine schlaue Idee. Die IAB sagt in ihrem Paper über Responsive Design: "RCD (= Responsive Creative Design) is not packaging different complete ad creatives (= Werbemittel) in a single tag." Und damit haben sie recht!
Die Entscheidung, welches Werbemittel für eine bestimmte Breite ausgespielt wird, darf nicht fest im Frontend fallen, sondern muss vom Vermarkter über den Adserver getroffen werden. Nur dann hat der Vermarkter alle Möglichkeiten, Werbemittel zu optimieren, neue Lösungen zu entwickeln und Kampagnen optimiert zu planen. Und ganz ehrlich: Als Fontend-Entwickler will ich gar nicht wissen, welche und wie viele Werbemittel mein Vermarkter für welche Breite bereithält. Ich spiele seinen Adtag an der richtigen Stelle aus und sage ihm, welche Breite zur Verfügung steht. Aber wie genau mache ich das?
Adserver-Kommunikation um Breiten erweitern
Dazu muss natürlich die Kommunikation mit dem Adserver erweitert werden. Über zusätzliche Parameter im Adtag werden die verfügbaren Breiten des aktuellen Viewports übergeben und der Adserver liefert auf der Basis dieser Breiten passende Werbemittel aus. (Voraussetzung ist natürlich, dass der Vermarkter Bigscreen- und Smallscreen-Ads mit demselben Adserver ausliefern kann.)
Mein Vorschlag ist es, in Zusammenarbeit mit dem Vermarkter ein Set von zusätzlichen (eigenen) Parametern zu erarbeiten, die den Vermarkter befähigen passende Werbung für die angezeigte sichtbare Breite auszuliefern. Es ist normalerweise kein Problem, dem Adserver eigene Parameter zu übergeben. Typische Beispiele für eigene Parameter sind Keywords der Seite, Seitentypen oder Angaben zur Hierarchieebene der Seite.
Was muss der Vermarkter wissen?
- Aktuelle Breite des div-Containers, in dem das Werbemittel ausgespielt werden soll.
- Aktuelle sichtbare Breite des Viewports (für Expanding- oder Overlay-Formate).
- Das Device des Users (um zu wissen, ob man Richmedia fahren kann).
Das Device wird mit dem Aufruf des Adtags sowieso übergeben. Hier muss sich der Vermarkter selbst um eine Auflösung der Geräte kümmern. Bleiben also die beiden Breiten-Werte, die wir am einfachsten direkt im Adtag übergeben können. Viele Adtags arbeiten mit einer Zufallszahl, die im Adtag per Javascript generiert und dann in einen Platzhalter im Adtag geschrieben wird:
<script type="text/javascript">
var ord = Number(ord) || Math.floor(Math.random()*10e12);
document.write('<a href="http://ad.doubleclick.net/Nnetwork_code/jump/first_level_ad_unit/second_level_ad_unit;pos=top;tile=tile_number;sz=widthxheight;ord=' + ord + '?" target="_blank"><img src="http://ad.doubleclick.net/Nnetwork_code/ad/first_level_ad_unit/second_level_ad_unit;pos=top;tile=tile_number;sz=widthxheight;ord=' + ord + '?" /></a>');
</script>
Wenn wir uns mit dem Vermarkter darüber abgestimmt haben, wie unsere beiden neuen Breiten-Parameter heißen sollen, können wir sie auf die gleiche Weise direkt im Adtag-Script auslesen und sofort wieder übergeben:
<div id="banner">
<script type="text/javascript">
var ord = Number(ord) || Math.floor(Math.random()*10e12);
var totalwidth = window.innerWidth;
var selfwidth = document.getElementById("banner").clientWidth;
document.write('<a href="http://ad.doubleclick.net/Nnetwork_code/jump/first_level_ad_unit/second_level_ad_unit;pos=top;tile=tile_number;sz=widthxheight;ord=' + ord + ';fullwd=' + totalwidth + ';mywd=' + selfwidth + ';?" target="_blank"><img src="http://ad.doubleclick.net/Nnetwork_code/ad/first_level_ad_unit/second_level_ad_unit;pos=top;tile=tile_number;sz=widthxheight;ord=' + ord + ';fullwd=' + totalwidth + ';mywd=' + selfwidth + ';?" /></a>');
</script>
</div>
Was muss am Adserver gemacht werden?
Zugegeben, die Änderungen am Adserver sind komplexer als die im Frontend und leider bin ich kein Adtechnologe, aber ich hoffe, hier bald konkrete Vorschläge machen zu können, wie man im Adserver dynamische Breiten-Werte auflösen kann. Kennt sich jemand von Euch damit aus? Hat jemand einen Tipp, wie man das machen kann? Fest steht, dass man alle statischen Vorgaben für Ad-Größen aus den Tags entfernen und bei der Ausspielung ignorieren muss. Im gezeigten Adtag-Beispiel wäre das der Parameter "sz". Der akzeptiert zwar mehrere (mit Komma getrennte) Werbemittelgrößen, aber einen dynamsichen Wert kann er nicht auflösen. Wie gesagt: hier hoffentlich bald mehr.
Zusammenfassung
Was ich zeigen will, ist, dass es grundsätzlich - und mit den altbekannten Mitteln - möglich ist, Ads in einem Responsive Design auszuspielen. Und natürlich geht es raffinierter, als ich es hier beschrieben habe! Für das Frontend könnte man zum Beispiel eine zentrale Konfig-Datei bauen, in der man alle Adtags mit ihren Breiten-Regeln und den Ids der Ziel-Divs sammelt. Dann könnte man (mit einem externen JQuery Script ?) die Tags um die dynamischen Breiten anreichern und die dynamisch befüllten Tags onDocumentReady (UND onChange?) in die definierten Divs schreiben. (Bei deaktiviertem JavaScript hätte man dann ein supersauberes Frontend. Schwierig ist dabei aber, dass man Scripte über ein Script ausliefern müsste.) Aber anfangen können wir auf jeden Fall. Schließlich ist es eine Reise und Technologie entwickelt sich eben schrittweise weiter.