HTML5 Specifications

1. 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).

2. 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.

3. HTML5 Close Button for Layer Advertising Material

See here:  https://github.com/Unitadtechnologystandards/HTML5Lib/blob/master/src/creative/close.js

4. 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)

5. 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.

6. Image Compression
   

Images should be optimized for file size. The use of PNG Crusher and scalable vector graphics is recommended.

7. 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> 

8. 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.

9. 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 Capability (Mandatory)

Please note that from now on (May 2016) all campaign components (script, iFrame, redirect tags, agency tracking pixels and other externally hosted resources) must be delivered as HTTPS-compatible components in order to rule out display and measurement errors relating to violations of security settings of the various browsers across websites.
To do this, ensure that all resources are hosted on SSL-certified servers. Please therefore check whether the systems you use for hosting the advertising material provide this option in a standardised way. 
The purpose of this measure is to support the developments of the Internet Engineering Task Force (IETF) and the increasing importance of HTTPS-compatible advertising resources.

Video & Audio

Sound and video are allowed. Sound must only be played, however, when initiated by a user (onMouseover/ onClick), and not automatically with an animation. The sound must be deactivated using the same technique (Mouseover/out or onClick). Looping is not permitted. Please also make sure that the advertising material (in the onClick version) contains a clearly visible icon with which the sound can be enabled or disabled at an appropriate volume (e.g. speaker icon). When the streaming is hosted by us, there is a surcharge of €2 n./n. at CPM.

Streaming content within the advertising material must use polite loading. It must not start until the page has fully loaded.