Bitte beachten Sie folgende HTML5-Spezifikationen.

HTML5-Spezifikationen

  1. Bannerformate 

Die folgenden Standards finden auf alle Formate mit fester Größe Anwendung, d.h. fester Höhe und Breite, analog den IAB Werbemittelstandards für Standardwerbeformen, ausgenommen Werbemittel die den Inhalt der Webseiten überlagern, proportional oder frei skalieren (z.B. Sitebar, vergleiche: http://www.werbeformen.org).

 

  1. Dateigröße 

HTML5 Werbemittel bestehen wie Webseiten aus mehreren Elementen, die nicht analog zu Flash in einem File zusammengeführt und komprimiert werden können. Diese sind:

– HTML
– Files
– CSS
– Libraries (Javascript, JQuery, etc.)
– Bilder
– Videos

Damit der Aufbau der Webseite und des Werbemittels nicht unnötig verzögert wird, ist bei der Kreation zu beachten, dass die einzelnen Elemente des HTML5 Werbemittels sowohl hinsichtlich ihrer Anzahl als auch Dateigröße so klein wie möglich gehalten werden, um die Serverprozesse/Anfragen (Serverrequests) zu minimieren. Dazu sind Kompilierungsmethoden des Codes und Code-Optimierungen in einer Datei anzuwenden.

Folgende Limits müssen eingehalten werden:
– 100 kB physisch, entpackt

– 150 kB als redirect
– max. 2 MB nachgeladen (polite Download)

Dies ist durch Komprimierung und Optimierungsverfahren als auch durch sparsame Anwendung von Animationen und Einbindung externer Elemente wie Fonts und Bibliotheken einzuhalten, welche auch zu der Dateigröße dazu gerechnet werden. Unterverzeichnis-Strukturen sind zu vermeiden.

 

  1. HTML5-Close Button für Layer Werbemittel

Siehe hier: https://github.com/Unitadtechnologystandards/HTML5Lib/blob/master/clicktag/creative_clicktag.md

 

  1. Klicktag 

Die Schreibweise für Klicktags lautet: clicktag
Die Schreibweise für Multi-Klicktags lautet: clicktag, clicktag1, clicktag2 <n>

Die Folgenden Codezeilen sind in das HTML5-Werbemittel zur Übergabe der Klicktags zu integrieren – die Funktion liefert alle GET Parameter zurück, die an die Datei übergeben werden:

<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:
2 HTML Links ohne zugewiesene Links:

<a href=“#clicktag“ id=“clicktag“>IAB clicktag</a>
<a href=“#clicktag2″ id=“ clicktag2″>IAB clicktag</a>

 

Mit diesen Javascript Zeilen lassen sich dann die Klicktags den HTML Elementen zuweisen:
<script>
document.getElementById(‚clicktag‘).setAttribute(‚href‘, getUriParams.clicktag);
document.getElementById(‚clicktag‘).setAttribute(‚target‘, getUriParams.target);
document.getElementById(‚clicktag2‘).setAttribute(‚href‘, getUriParams.clicktag2);
document.getElementById(‚clicktag2‘).setAttribute(‚target‘, getUriParams.target2);
</script>

 

Funktionstest der clicktag-GET-Parameter für Übergabe an das Werbemittel.
Die Werbemittel sollen von der Kreativagentur auf funktionierende clicktag Übergabe getestet werden, damit unnötige Feedbackschleifen ausgeschlossen werden können.

 

Test:

html5werbemittel.html?clicktag=%LANDINGPAGE%
%LANDINGPAGE% ist mit einer Testzielseite zu ersetzen und muss URL-encoded übergeben werden (encodeURIComponent-Funktion)

 

  1. Backupimage, Browserkompatibilität

Sollte ein Browser ein spezielles Feature oder eine verwendete Library nicht unterstützen, welches im Werbemittel Anwendung findet, so soll ein im Werbemittel definiertes Fallback JPG/GIF ausgespielt werden. Wenn das Werbemittel zum Beispiel nicht von IE 9 unterstützt wird ist von der Agentur vorzusehen, dass in diesem Browser das Fallback angezeigt wird. Die Werbemittel sind seitens der Kreativagentur auf allen gängigen Browsern zu testen und etwaige auszuschließende Browser dem Vermarkter mitzuteilen.

 

  1. Grafikkomprimierung 

Grafiken sind hinsichtlich der Dateigröße zu optimieren. Die Verwendung von PNG-­Crusher und der Einsatz von skalierbaren Vektorgrafiken wird empfohlen.

 

  1. Video 

Videos in HTML5 Werbemitteln werden über den Tag <video></video> eingebunden. Ads mit Videos sind mit einem Previewbild (poster) zu versehen, das Video startet sobald es geladen ist bzw. durch User Interaktion auf den meisten mobilen Endgeräten.

Zu beachten ist, dass auf Videos auf mobilen Endgeräten keine clicktags gelegt werden können. Der clicktag muss auf einer Fläche außerhalb des Videos hinterlegt werden.  Das Video muss hinsichtlich Qualität und Dateigröße optimiert werden und ist in einer geeigneten Serverumgebung zu streamen.

–  Max. Video-Dateigröße = 4 MB

Das Video ist sowohl in H264/mp4 als auch in VP8/WebM zur Verfügung zu stellen.
Codebeispiel:

<video controls height=’640′ width=’360′>

<source src=’yourVideo.mp4′ type=’video/mp4′ />
<source src=’yourVideo.webm‘ type=’video/webm‘ />
</video>

 

  1. Animation 

Bei Animationen ist darauf Acht zu geben, dass diese den Client CPU nicht unnötig belasten. Mehrere parallel laufende Animationen und überlappende transparente Grafiken sind zu vermeiden. Der Einsatz von CSS3 oder Javascript Animationen ist mit Bedacht auf die CPU und GPU Auslastung zu wählen.

 

  1. Anlieferung 

Die Anlieferung des HTML5-Werbemittels erfolgt als Zip-Datei für jedes Bannerelement. Z.B. ein Wallpaper besteht aus 2 Bannerelementen, 2 Zip-Dateien wären nötig. Jede Zip-Datei enthält alle Objekte des Werbemittels oder des Bannerelements, ausgenommen extern geladene Libraries, Videos oder Fonts. In der Zip-Datei/-en muss eine index.html-Datei als Startpunkt enthalten sein und alle eingebundenen Skripte sowie alle in der Zip-Datei/-en enthaltenen Objekte müssen relativ verlinkt sein.

Alternativ kann ein Redirect angeliefert werden. Auch hier gelten alle o.g. Anforderungen, z.B. Dateigröße, Fileanzahl.

Anlieferung ist vermakterabhängig physisch oder als Redirect zu erfolgen