Back to Platform Overview
Glossary
Creatives
Working with creatives
Creative technical specs
Viber Format Creatives specs
Advanced Creative settings
Creative billing

UI template: HTML5 Mobile Float


Preview

The format of a full-screen banner, displayed over the content of the site immediately after the page is loaded. The banner remains on the screen until the user clicks the Close button in the upper right corner of the banner. After clicking on the banner, the user navigates to the landing page.

This ad format is the subject to restrictions imposed by Google in cooperation with the Coalition for Better Ads on delivery of ads in Chrome.

Supported platforms

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
– – ver. 8.0+ ver. 4.4+ ver. 8.0+ ver. 4.4+

Format requirements

Main panel

Standard dimensions, WxH, 100%x100%

Please note If the website does not support a mobile or tablet version, it is recommended to specify the creative template parameters, such as height and width, using percentage units (%), rather than viewport height (vh) and viewport width (vw). Using percentage units is often preferred in such cases, as they provide a consistent layout across devices, ensuring a seamless user experience and allows for the creation of flexible and fluid creatives that seamlessly adapt to different screen dimensions.

    Video

    Video player container can be of any size within the panel’s borders

    • File type: .mp4
    • Duration: 30 sec

    Audio

    User initiated (turned off by default)

    Size

    max 300 Kb without video
    max 2 Mb with video

    Download an archive with the template:

    Download

    How to work with .zip archive (template)

    1. Unpack an archive with creative template.
    2. For creative preview use the preview page or copy all files to folder index – banners – banner- body and open file index.html in browser using localhost. In the later case a web server has to be installed (e.g. IIS for Windows, Apache for Mac OS).

      3. Additionally, you can check the preview of the creative by copying the link to it and viewing it from your mobile device.

    3. Open file body.html with the text editor and edit the code snippet inside tags <body> </body>.
    1. Edit JS files.
    2. 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 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, requested using the following method.

    Expand the 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 comma-separated.
    An example of the globalHTML5Api.init usage for the Mobile Fullscreen format:

    Expand the globalHTML5Api.init example code
    globalHTML5Api.on("load",function(){
  globalHTML5Api.init({
    'resize': [
      {
       'name': 'state-1',
       'fixed' : {
         'vertical':"center",
         'horizontal':'center'
      },
      'width' : '100%',
      'height' : '100%'
    }
   ]
  });
});

    globalHTML5Api.init Parameters

    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
    fixed – Object with properties. Describes the container position relatively to a browser window
    vertical (required) center 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
    enableScroll() – – Method enables a page scrolling
    disableScroll() – – Method disables a page scrolling. After the banner has been closed, the page scrolling should be enabled with the method enableScroll();
    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.

    Event tracking

    • View
    • Confirmed view
    • Click
    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