Technical specification for physical html5 advertising media

Delivery format	Single HTML file + additional images/videos

Delivery format	Single HTML file + additional images/videos
3rd-Party-Tracking	allowed
Videoformats	H264/mp4 und VP8/WebM
Video filesize	max. 5 MB
Videostart & Audiostart	Only after explicit useraction
Leadtime	5 days or 10 days for mobile HTML5 formats

General guidelines

Deliver the HTML5 media ad as index.html, with full HTML syntax (Doctype definitions, <head>, <body>, etc.)
As much content (scripts, CSS, etc.) as possible should be included directly in the index.html instead of being outsourced to separate files.
When reloading external resources, make sure that they are enabled for cross-domain access on the server side (CORS).
Use an alternative graphic to replace the ad media for browsers that do not fully support HTML5.
The orientation of the displaying device should be taken into account and the advertising medium should be optimized for "Landscape" and "Portrait" displays.
The tracking/counting of user actions (except clicks) by a separate server must be done by the ad creator.

Deliver the HTML5 media ad as index.html, with full HTML syntax (Doctype definitions, <head>, <body>, etc.)
As much content (scripts, CSS, etc.) as possible should be included directly in the index.html instead of being outsourced to separate files.
When reloading external resources, make sure that they are enabled for cross-domain access on the server side (CORS).
Use an alternative graphic to replace the ad media for browsers that do not fully support HTML5.
The orientation of the displaying device should be taken into account and the advertising medium should be optimized for "Landscape" and "Portrait" displays.
The tracking/counting of user actions (except clicks) by a separate server must be done by the ad creator.

JavaScript guidelines

Use small, compact JS frameworks. Larger libraries like jQuery are usually unnecessary and increase the data load of the ad media exponentially.
Reduce your final JS code as much as possible. Use minifiers or similar tools so that your ad can be transferred to the viewer as quickly as possible.
Avoid logs (e.g. console.log or etc.) and possible errors to optimize the performance of your ad and not overload the browser console.

Use small, compact JS frameworks. Larger libraries like jQuery are usually unnecessary and increase the data load of the ad media exponentially.
Reduce your final JS code as much as possible. Use minifiers or similar tools so that your ad can be transferred to the viewer as quickly as possible.
Avoid logs (e.g. console.log or etc.) and possible errors to optimize the performance of your ad and not overload the browser console.

Click measurement

You have the possibility to have clicks on links to external sites measured by the Ströer Digital AdServer. For this purpose, dynamic assignment of the link URLs must be enabled in the HTML5 advertising medium.
When the ad medium is played out, the complete URLs of Ströer are inserted into the ad medium and measured when the user clicks.
During development of the media ad, the link URL-encoded (encodeURIComponent() ) can be transferred to the ad media using GET parameters.

`yourAdvertisingMaterial.html?clicktag1=http%3A%2F%2Fwww.youreUrl.de&clicktag2=http%3A%2F%2Fwww.yourOtherUrl.de`

`yourAdvertisingMaterial.html?clicktag1=http%3A%2F%2Fwww.youreUrl.de&clicktag2=http%3A%2F%2Fwww.yourOtherUrl.de`

Fill all links to be measured with the name "#clicktag" as placeholder and an ID attribute of the same name. If you want to use different links with different targets, you have to number the placeholders sequentially ("#clicktag", "#clicktag2", etc.)

1
2

<a href="#clicktag" id="clicktag" target="_blank">Linktext 1</a>
<a href="#clicktag2" id="clicktag2" target="_blank">Linktext 2</a>

Insert the following script in the <head> of your ad media:

<script type="text/javascript">
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>

Either at the end of the HTML file or when initiating the ad media, the dynamic assignment of the URLs must be triggered with the following code

<script type="text/javascript">
    document.getElementById('clicktag').setAttribute('href', getUriParams.clicktag);
    document.getElementById('clicktag2').setAttribute('href', getUriParams.clicktag2);
</script>

Pre-test click measurement

The advertising material should be tested by the creative agency for functioning clicktag transfer so that unnecessary feedback loops can be excluded.
Test: html5mediaad.html?clicktag=%LANDINGPAGE%

*%LANDINGPAGE% is to be replaced with a test target page and must be passed URL - encoded (either via the encodeURIComponent function or e.g. with the help of this page: https://meyerweb.com/eric/tools/dencoder/)

The advertising material should be tested by the creative agency for functioning clicktag transfer so that unnecessary feedback loops can be excluded.
Test: html5mediaad.html?clicktag=%LANDINGPAGE%

*%LANDINGPAGE% is to be replaced with a test target page and must be passed URL - encoded (either via the encodeURIComponent function or e.g. with the help of this page: https://meyerweb.com/eric/tools/dencoder/)

Guidelines for animations

Animations should be created as resource-saving as possible. Avoid the excessive use of transparency effects (opacity) or the triggering of browser "repaints". You can find more information about paint/repaint here.
Remove unneeded GIFs (e.g. a loading animation) completely from the HTML tree instead of just hiding the image. Hidden GIF animations continue to burden the browser.
Use the animation possibilities of CSS3 (Animation, Keyframe, Translate, etc.)

Never use animations with JavaScript's setInterval() or setTimeout().
JavaScript animations should always use the requestAnimationFrame API of the browser. Further information about requestAnimationFrame() can be found here.

Animations should be created as resource-saving as possible. Avoid the excessive use of transparency effects (opacity) or the triggering of browser "repaints". You can find more information about paint/repaint here.
Remove unneeded GIFs (e.g. a loading animation) completely from the HTML tree instead of just hiding the image. Hidden GIF animations continue to burden the browser.
Use the animation possibilities of CSS3 (Animation, Keyframe, Translate, etc.)

Never use animations with JavaScript's setInterval() or setTimeout().
JavaScript animations should always use the requestAnimationFrame API of the browser. Further information about requestAnimationFrame() can be found here.

Guidelines for pictures & videos

For an optimal image display on all devices, all images should be adapted for HDPI, if reasonable.
In order to keep the data load of the advertising medium low despite HDPI, the formats Progressive JPEG / Progressive PNG, SVG or WebP (limited browser support) are suitable. However, the choice of format is not restricted and is at the developer's discretion.
To deliver individual image versions to the correct device or pixel density, it is recommended to use CSS3 image-set() or <img>'s srcset element (note browser support).
Use server requests for smaller images sparingly. If you want to use many smaller image files (icons, logos), they should be loaded either as CSS sprites or directly in HTML as DataURI.
Videos must be provided as H264/mp4, as well as VP8/WebM and must not exceed 5 MB. When integrating videos, use the Browser Video API.
For videos in the advertising material, the sound may only be started after explicit action by the user (click on a "Sound on" button, etc.).

For an optimal image display on all devices, all images should be adapted for HDPI, if reasonable.
In order to keep the data load of the advertising medium low despite HDPI, the formats Progressive JPEG / Progressive PNG, SVG or WebP (limited browser support) are suitable. However, the choice of format is not restricted and is at the developer's discretion.
To deliver individual image versions to the correct device or pixel density, it is recommended to use CSS3 image-set() or <img>'s srcset element (note browser support).
Use server requests for smaller images sparingly. If you want to use many smaller image files (icons, logos), they should be loaded either as CSS sprites or directly in HTML as DataURI.
Videos must be provided as H264/mp4, as well as VP8/WebM and must not exceed 5 MB. When integrating videos, use the Browser Video API.
For videos in the advertising material, the sound may only be started after explicit action by the user (click on a "Sound on" button, etc.).

HTML5 on mobile devices

For in-app advertising formats we support the standardized API MRAID (Mobile Rich Media Ad Interface Definitions) of the Interactive Advertising Bureau (IAB). In order to access device functions, such as the creation of a calendar entry, the ad media must be MRAID-compatible.
Data from motion and alignment sensors of the mobile device may be read and used for the interaction of the advertising medium, but may not be used in a blocking manner. Functions such as closing or reducing the size of advertising media may not depend exclusively on the movement of the device.

For in-app advertising formats we support the standardized API MRAID (Mobile Rich Media Ad Interface Definitions) of the Interactive Advertising Bureau (IAB). In order to access device functions, such as the creation of a calendar entry, the ad media must be MRAID-compatible.
Data from motion and alignment sensors of the mobile device may be read and used for the interaction of the advertising medium, but may not be used in a blocking manner. Functions such as closing or reducing the size of advertising media may not depend exclusively on the movement of the device.