Jedoch sind die einzelnen Werbemittel in Container-Blöcke aufgeteilt (z.B. expandierende Elemente, Video-Streaming, Textinhalte, etc.). Das Portrait Ad überzeugt vor allem dadurch, dass es besonders gut mit dem Inhalt der Webseite kombiniert werden kann. Zudem lässt es eine Vielzahl von Ausführungen und kreativen Ideen zu.
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).
2. 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 CodeOptimierungen 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.
3. HTML5-Close Button für Layer Werbemittel
Siehe hier: https://github.com/Unitadtechnologystandards/HTML5Lib/blob/master/src/creative/close.js
4. 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)
5. 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.
6. Grafikkomprimierung
Grafiken sind hinsichtlich der Dateigröße zu optimieren. Die Verwendung von PNG-‐Crusher und der Einsatz von skalierbaren Vektorgrafiken wird empfohlen.
7. 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>
8. 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.
9. 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.
Alle auszuliefernden Skripte, auch nachträglich geladene (3rd-Party-)Skipte, müssen HTTPS fähig sein.
Bitte achten Sie daher darauf, dass die Redirects auch in verschlüsselten Bereichen (https://) ausgeliefert werden können.
Wir weisen darauf hin, dass ab sofort (Mai 2016) alle Bestandteile einer Kampagne (Script-, iFrame-, Redirect-Tags, Agentur-Zählpixel und sonstige extern gehostete Ressourcen) als HTTPS-kompatible Komponenten anzuliefern sind, um Anzeige- und Messfehler in Bezug auf Verletzungen von Sicherheitseinstellungen der unterschiedlichen Browser webseitenübergreifend ausschließen zu können.
Dafür ist sicherzustellen, dass alle Ressourcen auf SSL-zertifizierten Servern gehostet sind. Bitte prüfen Sie daher, ob die von Ihnen eingesetzten Systeme für das Hosting der Werbemittel diese Möglichkeit standardisiert zur Verfügung stellen.
Mit dieser Maßnahme soll den Entwicklungen der Internet Engineering Task Force (IETF) und der damit steigenden Bedeutung von HTTPS-kompatiblen Werberessourcen gerecht werden.
Sound und Video sind erlaubt. Der Sound darf allerdings nur user-initiiert (onMouseover/ onClick) starten, nicht automatisch mit einer Animation. Der Sound muss mit der gleichen Technik deaktiviert werden (Mouseover/out bzw. onClick). Ein Looping ist nicht gestattet. Bitte außerdem darauf achten, dass das Werbemittel (bei onClick-Variante) ein gut sichtbares Symbol enthält, mit dem der Sound bei angemessener Lautstärke an und ausgeschaltet werden kann (z.B. Lautsprecher-Symbol). Bei einem Hosten des Streamings über uns fällt ein Aufschlag von 2 € n./n. beim TKP an.
Streaming-Inhalte innerhalb des Werbemittels müssen polite geladen werden. Sie dürfen erst dann starten, wenn die Seite komplett geladen ist.