HTML5 Specifications
- Banner Formats
The following standards apply to all formats with a fixed size, i.e. fixed height and width, analogous to the IAB advertising material standards for standard forms of advertising, not including advertising material that overlap the content of the web pages, scaling proportionally or freely (e.g. sidebar, compare: http://www.werbeformen.org).
- File Size
Like web pages, HTML5 advertising material consist of several elements that cannot be merged and compressed in a file in the same way as with Flash. These are:
– HTML
– Files
– CSS
– Libraries (JavaScript, jQuery, etc.)
– Images
– Videos
To avoid unnecessary delays to the website and advertising material, it is important to keep the individual elements of the HTML5 advertising material as small as possible in terms of both number and file size in order to minimize server processes/requests. For this purpose, code compiling techniques and code optimizations must be used in a file.
The following limits must be observed:
– 100 kB physical, unpacked
– 150 kB as a redirect
– Max. 2 MB subsequent download (polite download)
This is to be achieved by compression and optimization procedures as well as by the economical use of animations and integration of external elements such as fonts and libraries, which are also included in the file size. Subdirectory structures should be avoided.
- HTML5 Close Button for Layer Advertising Material
See here: https://github.com/Unitadtechnologystandards/HTML5Lib/blob/master/src/creative/close.js
- Clicktag (only for MEW)
The spelling for clicktags is: clicktag
The spelling for multi-clicktags is: clicktag, clicktag1, clicktag2 <n>
The following lines of code must be added to the HTML5 advertising medium to transfer the click tags: The function returns all GET parameters that are passed to the file:
<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>
Example HTML and assignment of links:
2 HTML links without assigned links:
<a href=”#clicktag” id=”clicktag”>IAB clicktag</a>
<a href=”#clicktag2″ id=” clicktag2″>IAB clicktag</a>
With these JavaScript lines the click tags can be assigned to the HTML elements:
<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>
Function test of the clicktag GET parameters for transfer to the advertising material.
The advertising material must be tested by the creative agency for functioning clicktag transfer, so that unnecessary feedback loops can be ruled out.
Test:
html5werbemittel.html?clicktag=%LANDINGPAGE%
%LANDINGPAGE% should be replaced with a test target page and must be URL-encoded (encodeURIComponent function)
- Backup Image, Browser Compatibility
If a browser does not support a special feature or library used in the advertising material, a fallback JPG/GIF defined in the advertising material should be displayed. If, for example, the advertising material is not supported by IE 9, the agency must ensure that the fallback is displayed in this browser. The creative agency must test the advertising material on all common browsers and inform the marketer of any browsers to be excluded.
- Image Compression
Images should be optimized for file size. The use of PNG Crusher and scalable vector graphics is recommended.
- Video
Videos in HTML5 advertising material are added via the <video></video> tag. Ads with videos have to be provided with a preview image (poster); the video will start as soon as it is loaded or through user interaction on most mobile devices.
It should be noted that no clicktags can be added to videos on mobile devices. The clicktag must be placed in an area outside the video.
The video must be optimized with regard to quality and file size and should be streamed in a suitable server environment.
– Max. video file size = 4 MB
The video should be made available both in H264/mp4 and VP8/WebM formats.
Code example:
<video controls height=’640′ width=’360′>
<source src=’yourVideo.mp4′ type=’video/mp4′ />
<source src=’yourVideo.webm’ type=’video/webm’ />
</video>
- Animations
For animations, make sure that they do not unnecessarily overload the client CPU. Several parallel running animations and overlapping transparent images should be avoided. CSS3 and JavaScript animations should be chosen with consideration to CPU and GPU load.
- Delivery
The HTML5 advertising material should be delivered as a zip file for each banner element. If, for example, a wallpaper consists of 2 banner elements, 2 zip files would be necessary. Each zip file must contain all objects of the advertising material or the banner element, except externally loaded libraries, videos or fonts. The zip file(s) must contain an index.html file as a starting point, and all integrated scripts as well as all objects contained in the zip file(s) must be relatively linked.
Alternatively, a redirect may be delivered. Here too, all the above requirements apply, e.g. file size, number of files, etc.
Depending on the marketer, physical delivery or delivery as a redirect should take place.
Delivery of advertising material for mobile apps should always be physical, a redirect is not possible.
Redirect Specifications
All scripts to be delivered, even 3rd party scripts, must be HTTPS-enabled.
Please therefore ensure that the redirects can also be delivered in encrypted areas (https://).
SSL-Fähigkeit (obligatorisch)
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 & Video
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.