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

A banner that expands to the left/right and down. It consists of the main panel and an expanded panel. During the expansion, the expanded panel is filling up with images of the same size, one by one. The amount of images, time, and order of their appearing is set in a code. After all, images have been displayed, an HTML or video can be displayed on top.

This ad format may be subject to restrictions imposed by Google in cooperation with the Coalition for Better Ads on delivery of ads in Chrome. A list of ad experiences that should be avoided in this ad format according to Initial Better Ads Standards:
· autoplaying video ad with sound in an auto-expanding banner.

Supported platforms

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
Chrome, Firefox, IE10+ Safari7+, Chrome, Firefox – – – –

Format requirements

Main panel

Standard sizes: WxH, px: 300×250, 240×350

Expanded panel

The banner container in the expanded state can be filled up with any amount of images of the same size. Also, one image can be cut into the indicated number of equal parts.
File size: recommended 60KB

Video

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

Audio

User-initiated (off by default)

Buttons

“X Close” button in the upper right corner of the expanded panel (allows user to close the expanded stage)
Audio: Mute/Unmute button control
Video: Play/Pause button control

Download archives with the template examples:

Download Flip Expand HTML5

Download Flip Expand Video

How to work with .zip archive (template)

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

Asset requirements

ZIP archive

The banner with all banner assets should be archived as a .zip file. Use a .zip file with a 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 with the following method.

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

All used modules should be listed as function parameters. Two and more modules should be separated by commas. The above-given code snippet shows how to include the Flip and Player modules.

An example of the globalHTML5Api.init usage for the Flip format.

Expand the globalHTML5Api.init example code
globalHTML5Api.init({
	'resize': [
		{
			'name': 'state-1',
			'width': '300px',
			'height': '250px'
		},
		{
			'name': 'state-2',
			'width': '900px',
			'height': '500px',
			'overlay': {
				'from': 'state-1',
				'left': 600,
				'bottom': 0
			},
			'onComplete': function () {
				flip.play();
				player.play();
			},
			'onStart': function () {
				document.getElementById('main').style.display = 'none';
			}
		}
	]
});

globalHTML5Api.init Parameters

Key Parameters Properties Type Description
resize(options) – – – globalHTML5Api.resize initialization
options – Array An 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
overlay – Object Object with properties. Describes the content overlay by the banner container
from (required) String State of the container from which the content overlaying starts (‘resizeStateName’)
left String Offset left
right String Offset right (not applicable along with ‘left’)
top String Offset top
bottom String Offset bottom (not applicable along with ‘top’)
onComplete Function Callback function running upon completion of globalHTML5Api.init.resize.to(this.name)
onStart Function Callback function running upon starting of globalHTML5Api.init.resize.to(this.name)

globalHTML5Api.resize Methods

Method Parameters Type Description
to(resizeStateName, time, eventName) – – Changing the current container state to indicated one
resizeStateName (required) String Container state to which the current one should be switched to
time (required) Number Time for the container state-changing animation
eventName  (required) String Events for tracking:

  • adExpand – container expanding;
  • adCollapse – container collapsing;
  • adExpandAuto – container auto-expanding;
  • adCollapseAuto – container auto collapsing.
currentState() – – The method returns the string:
resizeState.name – current container state name;
interactive to resizeState.name – changing the container state to the indicated one.

JS code for the Flip format looks like this (click below to expand code).

Expand example JavaScript code
var s = globalHTML5Api.src;
var flip = Flip.create({
    'map': [
        [3, 2, 1],
        [4, 5, 6]
    ],
    'items': [
        [s('flip/01.png'), s('flip/02.png'), s('flip/03.png')],
        [s('flip/04.png'), s('flip/05.png'), s('flip/06.png')]
    ],
    'content': document.getElementById('content'),
    'time': 0.3,
    'delay': 0.2,
    'onReverseComplete': function () {
        globalHTML5Api.resize.to('state-1', 0, 'adCollapse');
        document.getElementById('main').style.display = '';
    }
}).appendTo(document.getElementById('container'));

Flip Parameters

Method Parameters Properties Type Description
create(options) – – – Flip initialization
options – Object An object with properties
map (required) Array of arrays An array of indexes that describes the sequence of each element’s (item’s) appearance.
The number of arrays and indexes in them also indicates the number of Flip elements.
There are two ways to describe the sequence:

  1. To use only integer indexes (1, 2, etc.). That index searches the index-1 next to it (to the left, right, top or bottom). If succeeded, the current index will be shown right after it. Otherwise, the current index will be the starting point for the next.
  2. To use integer and combined indexes together. A combined index is a string with two integer numbers separated by a dot (‘1.2’).
    This index indicates the starting point for the current element; where a first number is a string number, the second number is a sequential number of the element in the string.
    The indeces reading order is left to right.
    An example of combined indexes:
'map': [
   [3, 2, 1],
   [4, '1.2', 2],
   ['3.2', 4, 3]
 ],

According to this disposition, the far left element in the third row will be opened from the second element in the third row (‘3.2’)
items (required) An array of arrays | String An array of elements containing an absolute path to the image source. In case the relevant path is used, the absolute one can be received by the method globalHTML5Api.src(). This method is described below.
Images sources should correspond to the elements in the ‘map’ array. If only one file is indicated, it will be automatically split into the number of elements indicated in the ‘map’ array.
time (required) Number Time of array elements appearance in seconds.
delay Number Time in seconds added to ‘time’. If two or more elements appear from one container, the delay time to the next element’s appearance can be added.
content String HTML Element that will be shown on top of the Flip container
onComplete Function The function running upon completion of Flip animation (after all Flip elements have been displayed)
onReverseComplete Function The function running upon completion of Flip animation in the reverse order (after all Flip elements have been collapsed)
appendTo(Node) – – – Adding an object to the indicated element
Node – String HTML Element, to which the created object should be appended to
play(time) – – – This method starts the Flip animation (appearing of Flip elements)
time – Number (optional) Time for each element to appear; is a multiplier for the ‘time’ property value
reverse(time) – – – This method starts the Flip animation in reverse order (collapsing of Flip elements)
time – Number (optional) Time for each element to collapse; is a multiplier for the ‘time’ property value

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

Images

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

Video

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

Event tracking

  • View
  • Confirmed view
  • Click
  • Expand by user
  • Auto-expand
  • Collapse by user
  • Auto-collapse
  • Play
  • Pause
  • 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 18, 2024