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 Banner, HTML5 Banner, HTML5 Float


Preview

An ad format contains of the top scratchable area and any HTML5 banner underneath it.

This ad format may be the 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
– – ver. 8.0+ ver. 4.4+ ver. 8.0+ ver. 4.4+

Download an archive with the template:

Download

How to work with .zip archive (template)

  1. Unpack an archive with the 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

Banner dimensions

  • Banner dimensions depend on HTML5 Banner format and device.
  • Recommended size for smartphones is 300×250 or 300×300 (px).

Video

  • Recommended video file’s aspect ratio is 16:9
  • File type: .mp4
  • Duration: 15 sec

Audio

User-initiated (turned off by default)

Banner size

  • up to 300 Kb without video
  • up to 2 Mb with video

Assets requirements

ZIP archive

Banner with all banner assets should be archived as a .zip file. It is recommended to use a .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 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. In this format, the Player module may be used.
A simplified example of the globalHTML5Api.init usage for the Scratch format:

Expand the globalHTML5Api.init example code
globalHTML5Api.on("load", function (Scratch, Player) {
    globalHTML5Api.init({
        "resize": [{
            "name": "state1",
            "width": "300px",
            "height": "300px",
            "onComplete": function () {
                        //function();
              },
            "onStart": function () {
                        //function();
              }
        }]
    });
})

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
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).

Expand the example code
var container = document.getElementById("banner_container");
    var scratch = Scratch.create({
        "pattern": "image/pattern.png",
        "container": container,
        "brushImg": "image/brushstroke.png",
        "triggerPercent": 50,
        "texture":"image/texture.jpg",
        "brushSize":30,
        "onComplete":function(){
            //function();
        },
        "onScratch": function(){			
            //function();
        }
    })

Parameters of Scratch

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.

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
globalHTML5Api.on(‘event’, callback);) – – A function that is called on the event
event String Event ‘positionChange()’
callback(positionData) Function callback-function

Video

In case the creative contains video, follow the Video player module page.

Images

Supported file types: .jpg, .png, .gif, .svg

Event tracking

Any event available for an HTML5 banner can be tracked.

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