Technische Daten:
HTML5
HTML5 Ads setzen sich aus einzelnen Website-Elementen zusammen, die miteinander agieren. Dazu gehören HTML-Dateien, CSS-Dateien, Javascript-Dateien, Bilder, Videos etc. Im Unterschied zu Flash-Ads werden all diese Einzelteile nicht in einem einzelnen, ausführbaren Element zusammengepackt. Es sind deshalb gesonderte Anforderungen zu beachten.
1. Vorbemerkung
Der Verlag Werben & Verkaufen liefert HTML5-Ads standardmäßig innerhalb eines Safe-Frames aus. Sollen Ads interaktive Elementen enthalten (z.B. verschiedene Click-Optionen, Formulare, spielerische Interaktionen, o.ä.), so ist mit dem Verlag Rücksprache über eine Direkt-Integration zu halten.
2. Dateigröße
Für ein optimales Nutzererlebnis ist es erforderlich, die Lade- und Renderingzeiten der Ads so gering wie möglich zu halten. Deshalb müssen HTML5 Ads so klein wie möglich gehalten werden und aus möglichst wenigen Einzelelementen bestehen (Reduktion von HTTP-Requests). Grafiken und Videos, aber auch CSS- und Javascript-Bibliotheken, müssen bestmöglich komprimiert sein. Lokale CSS- und Javascript-Bibliotheken sind immer in minimierter Form einzusetzen. Beim Einsatz kleinteiliger Layouts mit vielen Icons müssen, sollte wenn möglich, CSS-Sprites genutzt werden.
Die gezippte HTML5-Ad darf eine Dateigröße von 1 MB nicht überschreiten, da sonst kein Upload im Google Ad Manager möglich ist. Handelt es sich um eine HTML5-Ad mit Video, so ist das Video entweder extern zu verlinken oder separat anzuliefern.
Wir empfehlen folgende Kompressions-Tools, es gibt allerdings auch zahlreiche Alternativen:
- Grafiken: https://tinyjpg.com
- Javascript: https://javascript-minifier.com
- CSS: https://cssminifier.com
Folgende maximale Dateigrößen beziehen sich auf das komplette Ad inkl. aller Ressourcen:
2.1. Maximalgröße initial:
- Desktop: 100 KB
- Mobile: 40 KB
2.2. Maximalgröße für automatisch nachladende Inhalte
- Desktop: 150 KB
- Mobile: 100 KB
2.3. Maximalgröße für nachladende Inhalte, die eine Nutzerinteraktion erfordern (z.B. Video-Stream o.ä.)
- Desktop: 10 MB
- Mobile: 3 MB
3. Datenstruktur und Datenanlieferung
Alle Einzel-Dateien müssen im selben Ordner liegen. Auf Unterordner muss verzichtet werden. Die Haupt-Datei ist mit index.html zu benennen. Alle Pfade, die auf weitere Ressourcen verweisen, sind relativ zur Haupt-Datei und zueinander zu setzen. Die Ausnahme bilden extern eingebundene Ressourcen, wie Javascript-Bibliotheken, Web-Fonts o.ä. Diese müssen absolut referenziert werden. Die Anlieferung eines vollständigen HTML5 Ads muss in einem Zip Archiv erfolgen. Dieses Archiv enthält alle erforderlichen Bestandteile mit Ausnahme der extern eingebunden Ressourcen.
4. Coding und Bibliotheken
4.1. Meta-Tag für Ad-Größe
Die Hauptdatei (index.html) der HTML5-Ad muss ein Meta-Tag enthalten, das die Größen der Ad spezifiziert.
Beispiel für eine Ad der Größe 300 x 250 px: <meta name="ad.size" content="width=300,height=250">
Nähere Informationen in der Google Ad Manager Dokumentation (Richtlinien für die Größe befolgen): Hier Klicken!
4.2 Klick-Tag-Variable und -Aufruf über JavaScript
Die Hauptdatei (index.html) der HTML5-Ad muss ein Klick-Tag enthalten. Damit der Google Ad Manager Klicks erfassen kann, dürfen die URLs nicht hartcodiert sein.
Nähere Informationen in der Google Ad Manager Dokumentation (Richtlinien für Klick-Tags befolgen): Hier Klicken!
4.3. document.write
document.write darf nicht genutzt werden. Alle Ads werden asynchron geladen und ausgeführt. Es sind alternative DOM Operationen, wie appendChild() zu nutzen, ausgeführt über den document.onload Handler.
4.4. Code-Kompression
Das HTML-Dokument des Ads darf maximal 4.500 Zeichen enthalten. Größere Stylesheets und Javascripts sind in separate Dokumente auszulagern. CSS- und Javascript-Bibliotheken sind in minimierter Form einzusetzen. Die Kompression eigener Scripte ist ebenfalls empfohlen (Tool-Empfehlungen siehe oben).
5. Browser Kompatibilität
Die Webseiten des Verlags Werben & Verkaufen verhalten sich voll responsive. Dieses Verhalten wird über CSS3 Media-Queries und Javascript realisiert. Bei der Entwicklung von Tablet- und Smartphone-Ads muss deshalb beachtet werden, dass das Ad mit einer flexiblen Breite umgehen kann. Es findet eine automatische Skalierung des Ad-Slots auf 100% statt. Der Verlag Werben & Verkaufen unterstützt mit seinen Webseiten den Internet Explorer ab der Version 11. Für den Fall, dass ein Ad nicht auf allen Browsern einwandfrei funktioniert, muss ein JPG- /GIF - Fallback als Teil des Ads bereitgestellt werden.
Der Verlag behält sich das Recht vor, die Auslieferung auf einen kompatiblen Browser zu beschränken. -> Alle HTML5-Ads müssen UTF-8 kompatibel sein.
6. Animation
Animationen sind grundsätzlich möglich. Bei der Erstellung muss jedoch beachtet werden, dass Animationen die CPU und die GPU des Clients stark beanspruchen können. Deshalb muss auf zahlreiche parallele und sich überlappende Animationen mit transparenten Grafiken verzichtet werden.
Das SVG-Tag wird aktuell nicht unterstützt. SVGs müssen über separate Dateien eingebunden werden. Nähere Informationen in der Google Ad Manager Dokumentation: Hier Klicken!
7. Videos
Videos können per HTML5 Video-Tag <video></video> in ein Ad integriert werden. Video Ads müssen ein Vorschau-Bild mitbringen.
Autoplay ist erlaubt, sofern das Video keinen Ton enthält oder wenn der Ton stumm geschalten ist (Attribut „muted“ im Video-Tag). Damit auf iOS Autoplay korrekt funktioniert, benötigt das Video-Tag zusätzlich das Attribut „playsinline“.
Zu beachten ist, dass Videos auf mobilen Endgeräten nicht direkt verlinkt werden können. Der Clicktag muss auf einer Fläche außerhalb des Videos hinterlegt werden, z.B. auf einem zusätzlichen Button.
Die Dateigröße und die Qualität von Videos muss optimiert und dafür geeignet sein, in einer Serverumgebung gestreamt zu werden. Jedes Video muss im Format H.264/MP4/AAC zur Verfügung gestellt werden. Für optimale Kompatibilität empfiehlt sich zusätzlich eine Version im Format VP8/VP9/WebM.
