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 Float


Preview

A fullscreen mobile format that makes the user interact with a banner. The user should shake their phone to do some action.

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. 5+ ver. 8.0+ ver. 5+

Known Issues

Motion and Orientation settings on mobile devices with iOS 12 and higher can be off by default. In this case, the shake module will show each panel automatically every five seconds

Download archive with the template:

Download

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 a folder index – banners – banner – 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. 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 JS code.
  2. Save and archive all banner assets in .zip (you should archive the files, not the folder that contains the files).

Format Requirements

Main Panel

Standard dimensions, WxH, 100%x100%

Video

  • Video player container can be of any size within the expanded panel’s borders
  • File type: .mp4
  • Max duration: 30 sec

Size

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

Asset requirements

ZIP archive

A 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 in the following way:

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

globalHTML5Api objects and methods should be defined inside a called function. All used modules should be listed as function parameters. The format can use the Video Player module and Shake module.

A simplified example of globalHTML5Api usage for the Shake format:

Expand the globalHTML5Api example code
globalHTML5Api.on('load', function(Shake){
	globalHTML5Api.init({
		'resize' : [
			{
				'name': 'state-1',
				'fixed' : {
						'vertical':'center',
						'horizontal':'center'
					},
				'width': '100%',
				'height': '100%'
			}
		]
	});
})
globalHTML5Api.init Parameters
Key Properties Type Description
resize – Array Array of objects
name (required) String Object name. Each object presents a particular container state (resizeState).
fixed – Object with properties. Describes the container position relatively to a browser window
vertical (required) top, bottom The vertical alignment of the container
horizontal (required) center The horizontal alignment of the container
width (required) String|Number Banner container width
height (required) String|Number Banner container height

Example of using the Shake format (click below to expand.

Expand the example code
var container = $('container');
    Shake.subscribe(function(){
		container.style.backgroundColor = "rgb(" + rnd(0,255) + "," + rnd(0,255) + "," + rnd(0,255) + ")";
	})

*In the example above, the callback function changes the banner’s color on the shake event.

Shake Parameters

Method Arguments Description
subscribe Function The method tracks the Shake event and launches a function after the event, that is when the user shook a device.

globalHTML5Api Methods

Method Arguments Type Description
click(URL) – – Method to call the clickthrough. A clickthrough URL may be set in a creative’s code, as well as in 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 Clickthrough URL
src(URL) – – Method returns the absolute path to file
URL (optional) String Relative path to file
globalHTML5Api.on(‘event’, callback);) – – Function calling on 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.

Event Tracking

  • View
  • Confirmed view
  • Click
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