Creatives
Working with creatives
Creative technical specs
Viber Format Creatives specs
Advanced Creative settings
Creative billing
UI template:HTML5 Float
Floating ads appear above the content of a page at the top or bottom of a screen (catfish or sticky ad) and remain on screen while user scrolls the content. The ad closes entirely by clicking the close button.
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,
· banner height that exceeds 30% of a screen.
· autoplaying video ad with sound,
· banner height that exceeds 30% of a screen.
Supported platforms
| Desktop | Tablet | Phone | |||
|---|---|---|---|---|---|
| Windows | Mac | iOS | Android | iOS | Android |
| Chrome, Firefox, Edge, IE10+ | Safari6.2+, Chrome, Firefox; | – | – | – | – |
Format requirements
Main panel
- Width: 100%
- Height: max 30% of a screen’s height
Video (optional)
- Video player container can be of any size within the panel’s borders
- File type: .mp4
- Duration: 30 sec
- Frame rate: 24 fps
Audio
- User-initiated (turned off by default)
Buttons
- “X Close” button in the upper right corner of the expanded panel (allows user to collapse the ad).
The minimum essential value of top and right properties for the Close button element is 5px.
Banner size
- up to 300 Kb without video
- up to 2 Mb with video
Download an archive with the template:
Present file structure corresponds to 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.
Working with the .zip archive (template)
- Unpack an archive with the creative template.
- For creative preview use the preview page or copy all files to folder index – banners – banner- body and open file index.html in the browser using localhost. In the latter case a web server has to be installed (e.g. IIS for Windows, Apache for Mac OS).
- Open file body.html with the text editor and edit the code snippet inside tags <body> </body>.
Provide banner sizes, scripts, etc. within <body> </body> tags. Otherwise, the ad won’t show.
- Edit JS files.
- Save and archive all banner assets in .zip (you should archive the files, not the folder that contains the files).
Assets requirements
ZIP archive
Banner with all banner assets should be archived as a .zip file. It is recommended to use .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 is connected automatically, requested using the following method.
- Expand the globalHTML5Api code
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 Catfish format is shown below.
- Expand the globalHTML5Api.init example code
Parameters of globalHTML5Api.init
| 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 relatively to browser window | |||
| vertical (required) | top, bottom | 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) | ||||
Methods of 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 | |
| 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 guide.
Images
Supported file types: .jpg, .png, .gif, .svg
Important! To serve ads on secure sites (sites that are served over the HTTPS protocol), make sure that external references to files support only secure HTTPS scenarios.
Event tracking
- View
- Confirmed view
- Click
- Closed by user
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
– 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 11, 2024