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

UI template: HTML5 Mobile Banner


Preview

The ad format consists of a main panel and an expanded one. The main panel appears on a page load in a content zone that is 100% of a site’s width. An ad container enlarges and the expanded panel appears on a page scroll. The expanded panel may contain video. Video playback starts automatically when the banner reaches a user’s viewport.

An ad format requires a mobile-friendly website. Viewport meta tag must contain the following parameters: width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no
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.

Supported platforms

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
– – ver. 8.0+ ver. 4.4+ ver. 8.0+ ver. 4.4+

Known issues

  • Autoplay doesn’t work on iOS versions lower than 10.
  • Video can autoplay with sound off.
  • A banner created using the Adobe Edge technology may not be clickable in the Safari Mobile browser.

General format requirements

Banner dimensions

Main panel

Portrait device orientation
A default height of a collapsed banner is 1/3 of the maximum expanded banner’s height.
Banner width: the banner container always extends to 100% of screen width.

Landscape device orientation
A default height of a collapsed banner is 1/3 of the maximum expanded banner’s height.

Expanded panel

Portrait device orientation
A default height of the expanded banner is equal to the expanded banner’s width (aspect ratio of banner’s sides is 1:1).

Landscape device orientation
The default height of the expanded banner is 80% of the device’s screen height.

Video

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

Audio

User-initiated (off by default).

Banner size

  • max 300 KB without video.
  • max 2 MB with video.

Download an archive with the 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 the archive (template)

  1. Unpack the archive with the creative template.
  2. To preview the creative use the preview page. You may also copy all files to a folder index – banners – banner – body and open the 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. Additionally, you can check the preview of the creative by copying the link to it and viewing it from your mobile device.

  3. Open the file body.html with the text editor and edit the code snippet inside tags <body> </body>.
  1. Edit a file body.js.
  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. It is recommended to use the .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 in the following way.

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 separated by commas. In this format the Player and Extend modules may be used.

A simplified example of the globalHTML5Api usage for the Mobile Extend format is shown below.

Expand the globalHTML5Api example code
globalHTML5Api.on("load", function (Extend, Player) {
    var extend = Extend.create({
        expandPercent: 95,
	 minSize: 20,
        onExpand: expand,
        onCollapse: collapse
    });	
    player = Player.create({
        src: "images/adm_video.mp4",
        container: document.getElementById("player")
    });  
});

Parameters of Extend

Method Parameters Type Description
create – Object Extend initialization
expandPercent (optional) Number A trigger value calculated in % of the banner’s height. Upon reaching this value the ‘expand’ event is fired and callback functions are passed.
Default value is 50%.
minSize (optional) Number A minimal size of the expanded panel, in % of the device’s screen height.
maxSize (optional) Number A maximum size of the expanded panel, in % of the device’s screen height.
onExpand (required) Function Callback functions running upon reaching the trigger ‘expandPercent’ value.
The expanded panel animation starts here.
onCollapse (required) Function Callback functions running upon reaching the value that is less than the trigger ‘expandPercent’ value, provided that the ‘expand’ has already been fired.
The collapsed panel animation starts here.

Методы globalHTML5Api

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
globalHTML5Api.on(‘event’, callback);) – – Function calling upon an event
event String Event ‘positionChange()’
callback(positionData) Function callback function

Video

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

Images

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

CSS files are supported as well.

Event tracking

  • View
  • Confirmed view
  • Click
  • Expand by user
  • Collapse by user
  • 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 09, 2024