UI template: HTML5 Mobile Float
A type of a full-width ad that appears at the bottom of the mobile device’s screen and remains visible until the user closes it by tapping the Close button. The height of the ad for this format is 30% of the screen’s height. After tapping the banner, the user will be redirected to the target page.
Supported platforms
| Desktop | Tablet | Phone | |||
|---|---|---|---|---|---|
| Windows | Mac | iOS | Android | iOS | Android |
| – | – | ver. 7.0+ | ver. 4.4+ | ver. 7.0+ | ver. 4.4+ |
Download an archive with the template:
How to work with an archive (template)
- Unpack an archive with a creative template.
- 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).
- Open the file body.html with the text editor and edit the code snippet inside tags <body> </body>.
Additionally, you can check the preview of the creative by copying the link to it and viewing it from your mobile device.
- Edit a file body.js.
- 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 the .zip file with the 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, called the following way:
- Exand the globalHTML5Api code
globalHTML5Api objects and methods should be defined inside a called function. All used modules should be listed as function parameters. A sample of globalHTML5Api.init usage for the Mobile Halfpage format looks the following way:
- Expand the globalHTML5Api.init sample code
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 | ||
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 |
| globalHTML5Api.autoClose(timeMS, preventEvent) | – | – | Method for automatic banner closing after a set amount of milliseconds |
| timeMS (required) | Number | Amount of milliseconds before the banner closing | |
| preventEvent (optional) | Boolean | Prevents sending a tracking event close (banner closing). If the value is false, the event will be sent. Default: false |
Video
In case the creative contains video, see the Video player module page.
Images
Supported file types: .jpg, .png, .gif, .svg
File size
max 300 KB
Event tracking
- View
- Confirmed view
- Click
– 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