Nach langem habe ich wieder eine Anfrage für die Erstellung von Online-Werbemittel bekommen. Genau genommen ging es um einen full-responsive Sitebar Banner, in dem ein Video abspielen soll. In der Theorie eigentlich kein Problem. Das hatte ich in Vergangenheit schon ein paar Mal aufgebaut.
Was ist generell bei der Bannererstellung zu beachten?
Eine gute Planung ist das A und O. Wenn man zu Beginn schon alle Informationen zum Konzept, beigestelltem Bild- und/oder Videomaterial, CD-Vorgaben, Fonts, etc. zusammensammelt, lässt sich damit schon ein Konzept erstellen und somit fällt die Wahl des Aufbaus schon einfacher.
Folgende Fragen sollte man sich zu Beginn stellen:
- Habe ich das notwendige Material bereit? (Grafiken, Fonts, CD-Manuals, evtl. ein Video, etc.)
- Gibt es evtl. schon Vorstellungen zur Story und Animation des Banners?
- Für welches Netzwerk soll der Banner erstellt werden? Handelt es sich um eine Google Anzeige? (unterschiedliche Netzwerke benötigen unterschiedlichen Code)
- Gibt es mehrere Formatmutationen? Welche Formate sind gewünscht?
Welches Tool verwende ich zum Aufbau?
Für die Erstellung von Bannern gibt es mittlerweile einige Tools, welche die Erstellung vereinfachen oder sogar fertige Templates inkl. Animationen enthalten.
Bei Bannern für das Google Display Netzwerk verwende ich gerne den Google Web Designer, welcher schon die für Google notwendigen Codes und clickTag Schreibweise vorauswählt. Mit Hilfe einer Timeline kann damit verschiedene Animationen aufbauen. Ebenso lassen sich mit diesem Tool dynamische (programmatische) Banner erstellen, welche man mit Variablen befüllt.
Da all diese Tools leider auch große Dateimenge an Code beinhalten, habe ich mich für einen Aufbau ohne einem speziellen Banner-Tool, sondern mit meinem eigenen HTML5-Code, CSS und JavaScript entschieden. So kann ich selbst bestimmen, wieviel Code ich verwende.
TECHNISCHE SPEZIFIKATIONEN UND IAB STANDARDS
Vor der Erstellung der Banner ist es wichtig, die technischen Spezifikationen zu kennen. Jede Werbe-Plattform kann unterschiedliche Anforderungen haben. Manche Agenturen benötigen bestimmte tags im Code, um die Banner in ihrem Netzwerk ausspielen zu können.
IAB-Standards
Generell gelten auf fast allen Display-Plattformen die generellen IAB-Standards, welche standardisierte Formate und Vorgaben beinhalten. Diese Vorgaben und Formate können jedoch von der jeweiligen Ad-Agentur oder Werbeplattform noch mit eigenen Anforderungen erweitert werden.
Die IAB-Standards kann man zB. auf der Webseite der IAB Austria nachlesen.
Was ist ein clickTag?
Der ClickTag ist eine Variable, die im Code implementiert wird. Diese Variable kann der der Publisher/die Ad-Agentur dann mit der Ziel-URL zur Landingpage versehen, auf die die User bei Klick auf das Werbemittel gelangen sollen.
Nicht jede Plattform benötigt den selben Code zum Einbau des ClickTags, daher unbedingt vorher informieren, wie dieser eingebaut werden soll. In der Regel gelten hier wieder die IAB-Standards, aber manche Plattformen wie zB. Adform benötigen eine andere Schreibweise: ClickTag für Adform
Hier JavaScript-Code für die Implementierung nach IAB-Standards:
<script>
var getUriParams = function() {
var query_string = {}
var query = window.location.search.substring(1);
var parmsArray = query.split('&');
if(parmsArray.length <= 0) return query_string;
for(var i = 0; i < parmsArray.length; i++) {
var pair = parmsArray[i].split('=');
var val = decodeURIComponent(pair[1]);
if (val != '' && pair[0] != '') query_string[pair[0]] = val;
}
return query_string;
}();
</script>
</head>
<body bgcolor="#F7A409" >
<a href="#clicktag" id="IAB_clicktag" target=“_blank“>IAB clicktag</a>
<a href="#clicktag2" id="IAB_clicktag2" target=“_blank“>IAB clicktag2</a>
<script>
document.getElementById('IAB_clicktag').setAttribute('href',
getUriParams.clicktag);
document.getElementById('IAB_clicktag2').setAttribute('href',
getUriParams.clicktag2);
</script>Dateigröße
Das größte Problem bei der Bannererstellung ist vermutlich die erlaubte Dateigröße. Diese ist meistens sehr limitiert. Beispielsweise darf ein full responsive Sitebar Banner nur 120kB groß sein. Den Arbeitsaufwand für Komprimierung darf man daher nicht unterschätzen.
Tools wie zB. TinyJPG/TinyPNG können dabei helfen, Bilder möglichst klein zu bekommen.
Wo es möglich ist, wird empfohlen, SVG Grafiken zu verwenden. Diese sind meistens um ein Vielfaches kleiner als zB. PNG Grafiken. Auch der Code selbst sollte komprimiert werden.
Die genauen Dateigrößenbeschränkungen sind in den jeweiligen Tech Specs der Werbeplattform nachzulesen.
Format / Responsive
Die die meisten Formate haben standardisierte statische Pixelmaße (zB. „Medium Rectangle“: 300×250 px). Es gibt jedoch auch Bannerformate, die sich responsive der zur verfügbaren Fläche anpassen. Anders als bei Webseiten, wo man meistens nur der Breite nach Anpassungen vornimmt, muss man bei Bannern auch die Bildschirmhöhe beachten. In den meisten Fällen macht man es so, dass sich der Banner proportional verkleinert oder vergrößert. Die Maximalgröße ist hierbei mit der die window-height und window-width gesetzt.
CTA
Vergiß nicht, einen zum Klick auffordernden CTA (Call-To-Action) einzubauen. Buttons mit Texten wie „Bestelle jetzt dein XYZ!“ funktionieren dabei weitaus besser als ein „Mehr Infos“ Button.
Video
Videos überschreiten im Normalfall die maximale Dateigröße für Banner, daher dürfen Videos von einem externen Server nachgeladen/gestreamt werden. Lt. IAB-Standards beträgt das Dateigrößenlimit der nachgeladenen Inhalte 2.5MB .
Je nach Werbeplattform gibt es auch unterschiedliche Regelungen für Autoplay. Evtl. ist Autoplay auf manchen Plattformen generell verboten oder es ist erlaubt, aber nur ohne Ton (die meisten Browser blockieren ohnehin autoplay in Kombination mit aktiviertem Ton) Dazu mehr weiter unten.
Fallback Grafik
Viele Publisher möchten eine „Fallback-Grafik“ für den HTML5 Banner. Diese kann zB. in älteren Browsern, welche den Html5 Banner nicht optimal darstellen, angezeigt werden. Ebenso gibt es Bannerformate, welche am Desktop als HTML5 ausgegeben werden und mobil als Grafik. Hier ist die Grafik separat zum Banner an den Publisher anzuliefern.
Wie weiß man, ob der Banner nun alle technischen Anforderungen entspricht?
Ist der Banner fertiggestellt, komprimiert man sämtliche benötigten Dateien (html, js, css, Bilddateien) und kann diese in einem Test-Tool testen, damit man sieht, ob der erstellte Banner auch sämtliche technischen Vorgaben entspricht.
Manche Banner-Erstellungstools wie zB. Google Web Designer bieten eigene Validator Funktionen.
Hat man den Banner in einem anderen Tool oder per Hand aufgebaut, gibt es verschiedene Online-Tools zum Testen der technischen Anforderungen.
Achtung: Wie erwähnt, können sich die technischen Anforderungen je nach Werbeplattform unterscheiden.
HTML5 Banner Check-Tools:
- html5check.at
- Google HTML5 Ad Validator
- Google Ad Preview (für in Google Display Netzwerk geschaltete Banner)
- HTML5 Ad Validator von creativeqa.io
Probleme bei Videos mit Autoplay und Ton
Generell unterbinden die meisten modernen Browser Autoplay mit von Beginn an aktiviertem Ton. Das Video wird daher nicht beim Page-Load abspielen. Setzt man jedoch zum <video> Tag noch das attribut „muted“, dann spielt das Video von Beginn an ab – jedoch wie der Begriff es schon erahnen lässt, ohne Ton. Das eignet sich zB. für Hintergrundvideos in Hero-Elementen auf einer Webseite. Aber bei Bannern meistens weniger brauchbar, wenn das Video zum Beispiel gesprochene Aufnahmen oder Musik enthält, die beim User einen Wiedererkennungswert hervorrufen soll.
Generell ist in den IAB-Standards festgelegt, dass es ohnehin nicht gestattet ist, Ton per Autoplay aktiviert zu haben. Ton ist somit nur auf Interaktion (Klick) des Users möglich, oder bei Mouseover über den Banner erlaubt. Okay, das heißt, man könnte per JavaScript bei mouseover auf den Banner den Videoton mittels .muted = false auf das Video Element einschalten, … oder?
Falsch gedacht! Das ging bis vor einiger Zeit zwar noch, aber aktuelle Browser wie Chrome und Safari unterbinden das Einschalten des Tons, bevor der User nicht auf der Webseite zuvor schon mal eine Interaktion getätigt hat. Da reicht zumindest ein einziger Klick. Bei einer Webseite wäre das ja kein Problem, aber wir erstellen einen Online-Banner, der mittels iframe auf anderen Webseiten eingebunden wird. Das heißt, der User wird innerhalb des Banners nicht zuvor klicken. Und noch schlimmer: Die Browser verhindern dann nicht nur das Aktivieren des Tons bei mouseover, sondern stoppen sogar das Video. Das ist natürlich ein unschöner Zustand, wenn in einem Banner das Video abspielt und sobald man über den Banner fährt, stoppt das Video. Leider gibt es hierfür bis heute keinen Workaround. Daher gibt es nur folgende Alternativen.
Welche Alternativen gibt es?
- Das Video spielt per Autoplay ohne Ton ab und man bietet dem User einen Button, der per Klick den Ton einschaltet (dann hat man die Interaktion)
- Das Video ist zu Beginn gestoppt und man legt zB. einen großen Play Button über das Video (auch hier ist dann die Interaktion des Users notwendig)
- Man verzichtet generell auf den Ton beim Video
Aber keine der drei Lösungen hat mir so wirklich gefallen …
daher habe ich eine kleine Funktion geschrieben, die sich für mich als brauchbare Kompromisslösung herausgestellt hat.
Ich frage nun ab, ob das Video pausiert ist oder abspielt. Nur wenn es pausiert ist, lasse ich den Play-Button über dem Video anzeigen und per Klick das Video mit Ton weiter abspielen.
Das heißt, dass in den Browsern, die das Video bei mouseover stoppen dann der Play-Button erscheint, um es weiter anzusehen. In Browsern, die den Ton per Mouseover gestatten, wird es ohnehin mit Ton weiter abgespielt. Das ist zwar auch nicht die allerbeste Lösung, aber ein guter Kompromiss, dem User das Video mit Ton anzuzeigen.
Photo by Georgie Cobbs on Unsplash
