Back to Platform Overview
Glossary
Creatives
Working with creatives
Creative technical specs
Viber Format Creatives specs
Advanced Creative settings
Creative billing
UI template: HTML5 Float


An ad format consists of two panels – initial and expanded. The initial panel is positioned relative to the browser window. On the initial panel click or mouseover, or automatically the expanded panel appears. An expanded panel can contain video.
The banner can be closed entirely by a user or automatically on indicated time expiry.
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. 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
Chrome, Firefox, Edge, IE10+ Safari7+, Chrome, Firefox – – – –

Ad format requirements

Audio

  • User-initiated only (off by default)

Video

  • User-initiated or autoplayed
  • Max video duration: 30 sec
  • Frame rate: 24 fps
  • Format: .mp4
  • Aspect ratio and resolution: depends on a video container size

Buttons

  • Sound: Mute/Unmute (added by the video player module)
  • Video: Play/Pause/Resume (added by the video player module)
  • Collapse
  • Expand
  • Close; in case the banner closes automatically, there’s no need to use this button

Size

  • up to 500 Kb without video
  • up to 3 Mb with video

Download archive with template

banderole-html5_v3.zip

Present file structure corresponds to the default template only and can be changed by you. The required file in the .zip archive is body.html. All parameters such as sizes, events, click tracking etc. can be defined in the body.html file.

Working with the .zip archive (template)

  1. Unpack an archive with a creative template.
  2. For creative preview use a preview page or copy all files to a folder index – banners – banner – body and open a file index.html in the browser using localhost. For that, a web server has to be installed (e.g. IIS for Windows, Apache for Mac OS).
  3. Open the 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.
  1. Edit a file body.js.
  2. Save and archive all banner assets in .zip (you should archive the files, not the folder that contains the files).
File body.html must be in the root directory of the .zip file

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 is connected automatically, called the following way:

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

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 (see the Video player module page).

A simplified example of the globalHTML5Api.init usage for the Expandable format:

Expand globalHTML5Api example code
globalHTML5Api.on('load', function(){ 
globalHTML5Api.init({
        "resize": [{
            "name": "state-1",
            "width": "100px",
            "height": "220px",
            "fixed": {
                "vertical": "center",
                "horizontal": "left"
            },
            "onStart":function(){
                //function
            },
            "onComplete":function(){
                //function
            }
        }, {
            "name": "state-2",
            "width": "500px",
            "height": "220px",
            "fixed": {
                "vertical": "center",
                "horizontal": "left"
            }
        }, {
            "name": "state-3",
            "width": "900px",
            "height": "520px",
            "fixed": {
                "vertical": "center",
                "horizontal": "left"
            }
        }]
    });
});

globalHTML5Api.init Parameters

Key Parameters Properties Type Description
resize(options) – – – globalHTML5Api.resize initialization
options – Array An 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 the 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)

globalHTML5Api.resize Methods

Method Parameters Type Description
to(resizeStateName, time, eventName) – – Changing the current container state to the 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:

  • adExpand – an ad container is expanding;
  • adCollapse – an ad container is collapsing;
  • adExpandAuto – an ad container is expanding automatically;
  • adCollapseAuto – an ad container is collapsing automatically.
currentState() – – Method returns the string:
resizeState.name – current container state name;
interactive to resizeState.name – changing the container state to the indicated one.

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) – – The method returns the absolute path to file
URL (optional) String Relative path to file

Video

In case the creative contains video, see the Video player module guide.

Images

  • Supported file types: .jpg, .png, .gif, .svg
  • CSS files
Important! Make sure that external references to the files support only secure HTTPS scenarios.

Event tracking

  • View
  • Confirmed view
  • Click
  • Expand by user
  • Auto-expand
  • Collapse by user
  • Auto-collapse
  • Play
  • Pause
  • Resume
  • Sound on
  • Sound off
  • Progress (firstQuartile, midpoint, thirdQuartile, complete)
  • Close
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