HTML5

Delivery

The individual specifications in question indicate whether an ad should be provided in HTML5 format (physically as a zip file or 3rd-party redirect via download link) and which file types and sizes are permitted. The responsible creative agency must test the techniques used in the banner for cross-browser and cross-device compatibility and ensure the executability of the ad presentation in the relevant environments. So that exclusions are unnecessary, the agency is also responsible for ensuring a suitable fallback solution within the ad presentation in the case of non-compatible browsers.

Physical provision via HTML5 zip file

1. A zip file must be supplied via download link containing all components of the ad – individual file elements for hosting of the ad presentation may not be delivered.

2. There must be an index.html on the top zip archive level from which all other components (e.g. CSS, JS, image files) are relatively referenced. Please avoid referencing external objects/resources outside the provision of the ZIP file.

3. The HTML5 project is integrated in the website using the templating solution of iq digital via cross-domain iFrame. See below for more information on clicktag transfer.

4. Video files cannot be delivered within HTML5 zip files to the host via iq digital; otherwise, the files must be supplied as a 3rd-party iFrame. The max. size of 2 MB in the host-initiated subload must not be exceeded (see File sizes and loading phases).

5. All components belonging to the ad presentation must remain in the ad iFrame tag of the marketer and must not access the top window/frame of the serving website.

6. All elements of a campaign and all content of a creative must be supplied or provided externally as HTTPS-compatible components – also see SSL conformity (HTTPS).

7. The ad format must always initially deactivate sound and may only activate sound based on a deliberate user interaction. The volume must be set as follows: EBU R 128 standard radio level.

8. Animations must not be longer than 30 seconds. Looping is only permitted during this time.

Provision via 3rd-party redirect

1. HTML5 presentations may only be delivered as 3rd-party iFrame tag.

2. In the event that the marketer ad server cannot automatically assign the required macros for the counting of clicks and cache busting to the 3rd-party ad tag, the agency should also supply instructions for positioning of the relevant macros or label the positions at which the macro in question is to be inserted – with the corresponding placeholders in the 3rd-party tag. The link to the landing page must open a new window.

3. All components belonging to the ad presentation must remain in the ad iFrame tag of the marketer or the 3rd-party host and must not access the top window/frame of the serving website.

4. All elements of a campaign and all content of a creative must be supplied or provided externally as HTTPS-compatible components – also see SSL conformity (HTTPS).

5. The ad format must always initially deactivate sound and may only activate sound based on a deliberate user interaction. The volume must be set as follows: EBU R 128 standard radio level.

6. Animations must not be longer than 30 seconds. Looping is only possible during this time.

7. Changes following initial provision of the3rd-party redirect and approval by iq Ad Management are not permitted or must be communicated and coordinated in advance.

Synchronisation

Local-Connect

HTML5 ads have meanwhile become established in the market. In practice, however, some functionalities still cause problems, depending on the ambient website and implementation of the ad within cross-origin iFrames. This is why the Ad Technology Unit of the Circle of Online Marketers (OVK) has drawn up HTML5 snippets for this functionality as a technical recommendation on the basis of international standards (IAB).

The individual functions are available at the following link, complete with detailed instructions:

URL: https://github.com/Unitadtechnologystandards/HTML5Lib/tree/master/localConnect

iq digital assumes no liability for the code templates provided by the OVK in the GIT project.

Click-Tracking (for physical provision as an HTML5 zip file)

The ad server of the marketer can only measure the clicks on an HTML5 ad correctly if a click-sensitive area which forwards the user to the client target page is implemented in the creative code (HTML5 of the creative agency) and it is possible to insert ad server macros for the counting of clicks.

When being served, ads that are delivered to iq digital physically as HTML5 zip files are implemented as cross-domain iFrame. We therefore recommend the OVK-standardised procedure for the transfer of the marketer ad server macro for the counting of clicks and client click-through for forwarding to the client target page via GET parameter.

clicktag transfer for HTML5 ad presentations in line with OVK guidelines

The following procedure is required based on the OVK guidelines to ensure that the ad server of the marketer can track clicks within the HTML5 iFrame:

The written format for the clicktag is:	clicktag
The written format for multi-clicktags is:	clicktag, clicktag2, clicktag3
Link:	The link to the landing page must open a new window.

The agency must integrate the following code lines in the HTML5 ad to transfer the clicktag:

<script>
  var getUriParams = function() {
    var query_string = {}, query = window.location.search.substring(1), 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 the links:

<a href="#clicktag" target="_blank" id="clicktag">IAB clicktag</a>
<a href="#clicktag2" target= "_blank" id=" clicktag2">IAB clicktag</a>

These Javascript lines can then be used to assign the clicktags to the HTML elements of your ad presentation:

<script>
  document.getElementById('clicktag').setAttribute('href', getUriParams.clicktag);
  document.getElementById('clicktag2').setAttribute('href', getUriParams.clicktag2);
</script>

Function test of the clicktag GET parameter for transfer to the ad:

The creative agency must test the ads for functioning clicktag transfer so that unnecessary feedback loops are avoided.

Test

html5werbemittel.html?clicktag=%LANDINGPAGE%

%LANDINGPAGE% must be replaced by a test target page and must be transferred in URL‐encoded mode (encodeURIComponent‐Funktion).

In the case of multi-click integration, the test must be supplemented by further clicktag parameters in (&)-separated mode:

?clicktag=%LANDINGPAGE%&clicktag2=%LANDINGPAGE%&… 

Separate listing of multi-clicktags within an ad is not possible in the marketer report. Clicks are always listed cumulatively per ad format in the marketer report.

Delivery

Delivery:

Provide the clicktag/landing page combinations in your ad mail.

Tracking

Non-permitted and non-communicated serving of additional scripts/services to track/measure parameters other than, for example, impression and click counting is not allowed and must be communicated and approved in advance. iq digital reserves the right to reject this kind of tracking.