UI template: HTML5 Banner
An ad format with two panels, initial and fullscreen. The fullscreen panel appears after a click or mouseover. On a click on the Close button, the fullscreen panel closes.
Desktop | Tablet | Phone | |||
---|---|---|---|---|---|
Windows | Mac | iOS | Android | iOS | Android |
Chrome, Firefox, Edge, IE10+ | Safari8+, Chrome, Firefox | – | – | – | – |
Standard sizes WxH, px: 300×250, 240×350, 300×250, 240×500, 300×600
Standard sizes, WxH: 100%x100%
User-initiated
“X Close” button in the upper right corner of the expanded panel (allows user to collapse the expanded state)
The minimum essential value of top and right properties for the Close button element is 5px:
up to 300 KB without video
up to 2 MB with video
The banner with all banner assets should be archived as a .zip file. It is recommended to use .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 in the following way.
All used modules should be listed as function parameters. Two and more modules should be separated by commas. In this format, the Player module may be used.
A simplified example of the globalHTML5Api.init usage for the Click to Fullscreen 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 | ||||
fixed | – | Object | Object with properties. Describes the container position according to browser window | |||
vertical (required) | center | String | The vertical alignment of the container | |||
horizontal (required) | center | String | The horizontal alignment of the container | |||
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) |
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:
|
|
currentState() | – | – | Method returns the string: resizeState.name – current container state name interactive to resizeState.name – changing the container state to the indicated one |
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 |
In case the creative contains video, see the Video player module page.
Supported file types: .jpg, .png, .gif, .svg
CSS files are supported as well.
For any questions regarding ad manuals please contact the support manager of your account.