HTML5-Banner Spezifikation

Seit September diesen Jahres werden Flash-Banner nicht oder inkorrekt dargestellt. Da HTML5-Werbemittel immer beliebter werden hat sich der Unit Ad Technology Standards des OnlineVermarkterkreis (OVK) im Bundesverband Digitale Wirtschaft (BVDW) e.V, anhand der internationalen Standards (IAB) in Zusammenarbeit mit Vertretern von deutschen und österreichischen Medien, Vermarktern und Kreativ‐/Onlineagenturen einen möglichen Standard für die Anlieferung von HTML5-Werbemitteln erarbeitet.

Dennoch ist diese Richtlinie unverbindlich, weshalb sich nicht jeder daran hält. Deshalb sollte grundsätzlich bei jedem Werbeanbieter folgende Fragen gestellt werden.

Fragen-Katalog:

  1. HTML5 Banner überhaupt möglich bzw. kann das getestet werden?
  2. Welche Anzeigegrößen (z.B. 728 x 90, 300 x 1.050) sind für das eigene Hosting erlaubt? Oder muss man bei bestimmten Größen auf einen externen Werbehoster (Redirect) zurückgreifen?
  3. Gibt es eine max. kb Grenze? Wenn ja, wie hoch?
  4. Sind Unterordner erlaubt (z.B. /css, /img)?
  5. Welches Framework wird unterstützt (z.B. OVK, Adobe Edge, Google, GSAP)?
  6. Welche Software inkl. Libraries (Adobe Edge Animate, Google Web Designer) wird unterstützt?
  7. clickTag (welches Trackingverfahren? wieviele möglich? genaue Schreibweise - clicktag, clicktag1, clicktag2 ?)
  8. Fallback als JPG oder GIF (inkl. max. Größe)?
  9. Einbindung von Video möglich? Wenn ja, inklusive Hosting bis zu welcher max. MB-Größe?
  10. Anlieferung physisch (ZIP-Datei und meistens im Unterordner) oder als Redirect (Hosting und die Erstellung der Redirect-Tags die Tools von Rich Media Dienstleistern wie z.B. Mediamind, Flashtalking, Doubleclick Studio, etc.)?

Folgende Spezifikation ist laut OVK inkl. IAB die Optimalste:

  • max. 200 kb (mit extern geladenen Bibliotheken, Fonts, …)
  • index.html als Basisdatei mit relativ verlinkten Elementen
  • Anzahl von Elementen klein halten (viele Serverrequests vermeiden)
  • CPU- und GPU-schonende Animationen
  • Max. Video‐Dateigröße = 2,5 MB (H264/mp4 als auch in VP8/WebM) und inkl. Previewbild (poster) auf dem Adserver
  • Schreibweise für clickTag lautet: clicktag (Hinweis: Testen nicht vergessen)
  • Schreibweise für Multi-clickTag lautet: clicktag, clicktag1, clicktag2


clickTag-Funktion vom OVK:

// liefert alle GET Parameter zurück
<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>

Beispiel HTML und Zuweisung der Links:

<a href="#clicktag" id="clicktag" target=“_blank“>IAB clicktag</a>

clickTag den HTML Elementen zuweisen:

<script>
	document.getElementById('clicktag').setAttribute('href', getUriParams.clicktag);
</script>

OVK und BVDW: http://www.werbeformen.de/ovk/ovk-de/werbeformen/spezifikationen/html-5.html
IAB Guide: http://www.iab.com/guidelines/iab-display-advertising-guidelines/

Tags

Banner