HTML5

A complete HTML fragment inserted into the page using the iframe tag.

The author of the code is responsible for the ad displaying and working correctly across all major including their mobile versions.

HTML5 banner example Download source files

The file type

HTML5 banners must be delivered as a standalone .ZIP archive.

Banner structure

An HTML5 banner archive (.ZIP) must contain a main file with the “.html” extension (index.html) and any other files necessary for proper rendering of the banner. All files and directories have to be stored in the root of the archive.

Supported file types

The allowed file types in an HTML5 banner archive (ZIP) are listed below:

  • CSS
  • JS
  • HTML
  • JSON
  • GIF
  • PNG
  • JPG
  • SVG
  • WOFF
  • WOFF2
  • TTF
  • EOT
  • XML

Number of files

The file count in the HTML5 banner archive must not exceed 40 files.

Data size

The total data size of HTML5 banner is determined by the size of all the files after packing into a ZIP archive.

Loading data from external sources

Additional loading of data from external sources is not allowed, excluding only some supporting libraries stored on CDN servers.

Allowed external sources are:

  • fonts.googleapis.com
  • code.jquery.com
  • s0.2mdn.net/ads/studio/
  • s1.adform.net
  • cdn.jsdelivr.net/npm/lottie-web
  • ajax.googleapis.com/ajax/libs/jquery/
  • code.createjs.com/createjs
  • code.createjs.com/1.0.0/createjs.min.js
  • cdnjs.cloudflare.com/ajax/libs/bodymovin/

When loading those support libraries, the script adress must start with “https://” (see example below).

<script src="https://cdn.example.com/file.js"></script>

Target URL

There is only one URL allowed for redirecting from an HTML5 banner.

The target URL address must be delivered separately along with the banner archive. The clickthrough can be defined using HTML (see example below), or may not be defined at all (and therefore will be added automatically). Clickthrough using JavaScript (eg. Window.open();) is not allowed.

<a href="http://www.domena.cz" target="_top">
    <div id="rectangle">
        … 
    </div>
</a>
RTB

The click-through needs to be implemented in compliance to the adserver's requirements (in order to make sure the platform responsible for managing the campaing is monitoring click-throughs). Specifications may be different for each adserver.

Documentation:

Notice

  1. There can only be one file with the ".html" extension in the banner archive.
  2. Filenames in the banner archive must not contain special and accented characters. If the banner is generated by an external application (Adobe Edge Animate, Google Web Designer), it is necesarry to make sure there are no special or accented characters present in the layer/object names before exporting the banner.
  3. Animated HTML5 banners must not use too many of the user's system resources. If the advertisement is using too many system resources, browsers may automatically block it and won't display it.

Additional information

To make working with HTML5 banners easier, name each ZIP archive as follows: HTML5 + size + nameOfTheBanner (ex.: HTML5_970x210_leaderboard.zip). This will also significantly speed up the process of deploying a banner to the advertising system.

For Direct sales and Sklik you can verify the correctly creation banner using our tool for Verifiing HTML5 banner.

Verifiing HTML5 banner