Creatives
Creative billing


Preview

The ad format consists of two panels, initial and expanded. On click or mouseover, an expanded panel appears pushing the web page content down. Clicking the X Close button, the expanded panel collapses.

Supported platforms

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
Chrome, Firefox, Edge, IE10+ Safari7+, Chrome, Firefox

Format requirements

Main panel

Standard dimensions, WxH, px: 728х90, 970×90

Expanded panel

Standard dimensions, WxH, px: 728х315, 970×415

Video (optional)

  • Video player container can be of any size within the expanded panel’s borders
  • File type: .mp4
  • 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 archive with the template:

Download

How to work with .zip archive (template)

  1. Unpack an archive with a creative template.
  2. For creative preview use the preview page or copy all files to a folder index – banners – banner – body and open a file index.html in a 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>.
  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).

Asset requirements

ZIP archive

The banner with all banner assets should be archived as a .zip file. 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 the following way:

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

globalHTML5Api objects and methods should be defined inside a called function. 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.
A simplified example of the globalHTML5Api.init usage for the Pushdown format:

Expand the globalHTML5Api.init example code
globalHTML5Api.on('load', function(){
  globalHTML5Api.init({
    'resize': [
    {
      'name': 'state-1',
      'width': '728px',
      'height': '90px',
      'onComplete': function () {
        //function();
              },
      'onStart': function () {
        //function();
              }
    },
    {
      'name': 'state-2',
      'width': '728px',
      'height': '315px'
    }
   ]
  });
});

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

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

Images

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

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)
For any questions regarding ad manuals please contact the support manager of your account.
Updated on December 18, 2023