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

Preview

When entering the page, the user sees the initial collapsed banner. Transition to the expanded banner can be carried out on a click or on mouseover on the initial banner. When unfolding, the screenshot of the content moves to any of the four sides (right, left, up, down), opening the expanded banner.

A container with Takeover animation can only use part of the site content, for example, central, without side columns. In this case, for the container, the necessary dimensions and position are specified, and the animation will only work for the specified part.

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.
· auto-expanding banner.

Supported platforms

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
Chrome, Firefox Safari9+, Chrome, Firefox – – – –

Format requirements

Main panel

Standard dimensions, WxH, px: 300х250, 240х350, 240х400, 180х150, 320х280, 728х90, 970х90, 970х200, 650х250, 240×500, 300х600, 160х600

Expanded panel

  • Standard dimensions: 100%x100%
  • The layout of the banner should take into account the size and positioning of the container with the banner in the expanded state (after the Takeover animation was executed). Usually, they correspond to the size and location of the site content on which the banner will be displayed. The background color of the container with the banner must be the same as the one on the site.

Video

  • Video player container can be of any size within the expanded panel’s borders
  • File type: .mp4
  • Max duration: 30 sec
  • Frame rate: 24 fps

Audio

User-initiated (off by default)

Buttons

“X Close” button in the upper right corner of the expanded panel (allows user to close the expanded stage)

Size

  • max 300 Kb without video
  • max 2 Mb with video

Download an archive with the template:

Download

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

How to work with .zip archive (template)

  1. Unpack an archive with creative template.
  2. For creative preview use the Preview page
  3. Open file body.html with the text editor and edit the code snippet inside tags <body> </body>.
  4. Edit file body.js.
  5. 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. Provide banner sizes, scripts, etc. within <body> </body> tags. Otherwise, the ad won’t show.

Asset requirements

ZIP archive

Banner with all banner assets should be archived as a .zip file. Use a .zip file with the template.

HTML file (required name is body.html)

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 Takeover format:

Expand the globalHTML5Api.init example code
var takeover = Takeover.create();
globalHTML5Api.init({
	resize: [
		{
			name: "state-1",
			width: "300px",
			height: "250px",
			onComplete: function () {
				//function();
			},
			onStart: function () {
				//function();
			}
		},
		{
			name: "state-2",
			width: "100%",
			height: "100%",
			fixed: {
				vertical: "center",
				horizontal: "center"
			},
			onComplete: function () {
				takeover.show("slide", {
					time: 2,
					target: "bottom",
					onComplete: function (expand) {
						//function();
					},
					onStart: function () {
						//function();
					}
				});
			},
			onStart: function () {
				//function();
			}
		}
	]
});

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 content overlay by the banner container
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)

globalHTML5Api.resize Methods

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:

  • 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() – – The method returns the string:
resizeState.name – current container state name;
interactive to resizeState.name – changing the container state to the indicated one.

A simplified example of using the Takeover module can be found below (click to expand).

Expand the Takeover module sample code
var takeover = Takeover.create();
takeover.container(document.getElementById("container"));
takeover.show("slide", {
	time: 2,
	target: "bottom",
	onComplete: function () {
		//function();
	},
	onStart: function () {
		//function();
	}
});
takeover.on("ready", function(){
	//function();
	takeover.hide(2);
	};
});

Takeover parameters

Methods Parameters Properties Type Description
create() – – – Takeover initialization
container(HTMLElement) – – – Method to append the Takeover to an indicated container
HTMLElement – String HTML element with Takeover layout
show(“slide”, options) – – – The method starts the takeover animation
slide – String Takeover animation type
options – Object An object with properties
target (required) left, right, top, bottom String The direction of the screen content screenshot shift
time (required) Number The time for which takeover animation is displayed; in seconds
onStart (optional) Function Calling the function at the start of a  takeover animation
onComplete (optional) Function Calling the function on completion of a  takeover animation
hide(timeScale) – – – The method starts the takeover animation backward
timeScale (optional) – Number The value acts as a multiplier for time,
accelerates or slows down the animation while minimizing takeover
on(“ready”, callback) – – – The method allows you to call functions on the readiness of the screenshot of the site content
ready – String An event that occurs when a screenshot of the site is ready
callback – Function Function, which starts by the availability of the screenshot of the site

globalHTML5Api methods

Methods 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, follow the Instruction for the Video player module.

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

Known issues

The format will not work correctly if it was posted on the site in Safe Frame.

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 December 04, 2023