UI template: HTML5 Mobile Banner, HTML5 Banner, HTML5 Float
An ad format contains of the top scratchable area and any HTML5 banner underneath it.
Local inventory (direct publisher zones) and External SSP inventory.
Desktop | Tablet | Phone | |||
---|---|---|---|---|---|
Windows | Mac | iOS | Android | iOS | Android |
– | – | ver. 8.0+ | ver. 4.4+ | ver. 8.0+ | ver. 4.4+ |
Additionally, you can check the preview of the creative by copying the link to it and viewing it from your mobile device.
User-initiated (turned off by default)
Banner with all banner assets should be archived as a .zip file. It is recommended to use a .zip file with a template.
The HTML file must define all used sources (libraries, images, etc). A recommended file name is body.html.
globalHTML5Api connects automatically, requested using the following method:
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 Scratch format:
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 | |||
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) |
An example of module Scratch usage (click below to expand).
Method | Parameters | Type | Description |
---|---|---|---|
create | – | Object | Initialization of Scratch |
container (required) | String | HTML element where the canvas is appended to. | |
pattern (required) | String | Link to a top image. This image should be scratched to reveal the banner. | |
texture (optional) | String | Link to the background image that is placed under the pattern. It fills up space not covered by the pattern. | |
brushImg (optional) | String | An image that serves as the shape of a scratching area. Image color is ignored by the template, only shape and opacity are relevant. | |
brushSize (optional) | Number | Size of a scratching area. | |
triggerPercent (required) | Number | Percentage of the scratched area to reveal banner. | |
onComplete (optional) | Function | Callback function running upon reaching the ‘triggerPercent’ value, i.e. after the top area has been scratched. | |
onScratch (optional) | Function | Returns a percentage of scratched area. |
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);) | – | – | A function that is called on the event |
event | String | Event ‘positionChange()’ | |
callback(positionData) | Function | callback-function |
In case the creative contains video, follow the Video player module page.
Supported file types: .jpg, .png, .gif, .svg
Any event available for an HTML5 banner can be tracked.