Back to Platform Overview
Glossary
Creatives
Working with creatives
Creative technical specs
Viber Format Creatives specs
Advanced Creative settings
Creative billing

UI template: HTML5 Banner


Preview

An ad format is a standard banner with a fixed page position, the specified value of height, and the width of 100% of a parent container.

Supported platforms

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
Chrome, Firefox, Edge, IE10+ Safari6.2+, Chrome, Firefox; – – – –

Format requirements

Main panel

Standard dimensions, WxH: 100%x90px, 100%x120px, 100%x200px, 100%x250px, 100%x300px

Video (optional)

  • Video player container can be of any size within the expanded panel’s borders
  • File type: .mp4
  • Duration: 30 sec
  • Frame rate: 24 fps

Audio

User-initiated (turned off by default)

Size

  • max 300 Kb without video
  • max 2 Mb with video

Download an archive with the creative sample.

Download

Present file structure corresponds the default template only and can be changed by you. The required file in a .zip archive is body.html. All parameters such as dimensions, events, click tracking etc. can be defined in the body.html.

How to work with .zip archive (template)

  1. Unpack an archive with creative template.
  2. For creative preview use the preview page or copy all files to the folder index – banners – banner – body and open file index.html in browser using localhost. In the later case a web server has to be installed (e.g. IIS for Windows, Apache for Mac OS).
  3. Open file body.html with the text editor and edit the code snippet inside tags <body> </body>.
  1. Edit file body.js.
  2. Save and archive all banner assets in .zip (you should archive the files, not the folder that contains the files).

Assets requirements

ZIP archive

Banner with all banner assets should be archived as a .zip file. It is recommended to use .zip file with template.

HTML file

The HTML file must define all used sources (libraries, images etc). A recommended file name is body.html.

API connection and usage

globalHTML5Api connects automatically, requested using the following method.

Expand the globalHTML5Api code
globalHTML5Api.on('load', function(){
  /*
    YOUR CODE IS HERE
  */
});

All used modules should be listed as function parameters. Two and more modules should be comma-separated. In this format the Player module may be used.
A simplified example of the globalHTML5Api.init usage for the Flexible format.

Expand the globalHTML5Api.init example code
globalHTML5Api.on('load', function(){
 globalHTML5Api.init({
  'resize': [
   {
    'name': 'state-1',
    'width': '100%',
    'height': '90px'
   }
  ]
 });
});

globalHTML5Api.init Parameters

Key Parameters Properties Type Description
resize(options) – – – globalHTML5Api.resize initialization
options – Array Array of objects with properties. Each object presents the container state (resizeState)
name (required) String Object (state) name
width (required) String|Number Banner container width
height (required) String|Number Banner container height

globalHTML5Api Methods

Method Arguments Type Description
click(URL) – – Method to call the clickthrough. Target URL may be set as a parameter or from the user interface. The URL set in the code has a higher priority than the URL set from the UI, which can lead to a conflict. Therefore, it is mandatory to use only one of the available methods.
URL (optional) String Target URL
src(URL) – – Method returns the absolute path to file
URL (optional) String Relative path to file
close() – – Method to close the banner

Video

In case the creative contains video, see the Video player module page.

Images

Supported file types: .jpg, .png, .gif, .svg

Important! To serve ads on secure sites (sites that are served over the HTTPS protocol), make sure that external references to files support only secure HTTPS scenarios.

Event tracking

  • View
  • Confirmed view
  • Click
  • Play
  • Pause
  • Resume
  • Sound on
  • Sound off
  • Progress (firstQuartile, midpoint, thirdQuartile, complete)
Chrome will limit the resources a display ad can use before the user interacts with the ad by removing heavy creatives from the page. An ad is considered heavy if the user has not interacted with it (for example, has not tapped or clicked it) and it meets any of the following criteria:
– Uses the main thread for more than 60 seconds in total
– Uses the main thread for more than 15 seconds in any 30-second window
– Uses more than 4 megabytes of network bandwidth

For any questions regarding ad manuals please contact the support manager of your account.

Updated on April 17, 2024