Admixer HelpCenter

English

Russian

Ukrainian

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

An ad format with two panels – initial and expanded. An initial panel consists of nine 3D elements in a form of a cube. A click on one of these elements opens an appropriate expanded panel. On central element (#4) click the expanded panel with video opens. Main panel animation may cover some part of a site’s content. Must include “X Close/Collapse” button in the upper right corner of the expanded panel.

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.

General format requirements

Main panel

Standard dimensions, WxH, px: 300×600
File type: .png, .jpg

Expanded panel

Standard dimensions, WxH, px: 900×600
File type: .png, .jpg

Dimensions of banner images, WxH, px.

200×200 – 4 files for the ‘cube’ faces
300×150 – 2 files for top and bottom panel
900×600 – 4 files for the expanded panels, one of which is used as a video player background (900×600-vid in the template)

Video

Video player container can be of any size within the expanded panel’s borders (video container size in the example is 600×337; this size can be changed)
File type: .mp4
Max duration: 30 sec

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

up to 3 Mb

Download an archive with the template:

3d-expand_v4.zip

Working with the .zip archive (template)

Unpack an archive with a creative template.Open folder images and change the images with yours. The file name is better to remain unchanged.
In case of changing the file name and/or file extension, open file body.html with the text editor and edit the following code snippets:

Files for the initial panel

#p1{top:0px;left:0px;background:url('images/1.jpg');}
#p2{top:0px;left:100px;background:url('images/2.jpg');}
#p3{top:0px;left:200px;background:url('images/3.jpg');}
#p4{top:100px;left:0px;background:url('images/2.jpg');}
#p5{top:100px;left:100px;background:url('images/4.jpg');}
#p6{top:100px;left:200px;background:url('images/2.jpg');}
#p7{top:200px;left:0px;background:url('images/3.jpg');}
#p8{top:200px;left:100px;background:url('images/2.jpg');}
#p9{top:200px;left:200px;background:url('images/1.jpg');}

Where images – folder name, 1.jpg – file name. These files serve as ‘cube’ faces.

HTML code

<div id="top"><img src="images/top.jpg"></div>
<div id="bottom"><img src="images/bottom.jpg"></div>

Where top.jpg – top panel file name.
bottom.jpg – bottom panel file name.

Files for the expanded panel

   <div id="size_2"
         style="position: absolute;width: 900px; height: 600px;transform-origin: 0 0;opacity: 0; right: 0;">
        <img src="images/900x600-2.jpg">
    </div>
    <div id="size_3"
         style="position: absolute;width: 900px; height: 600px;transform-origin: 0 0;opacity: 0; right: 0;">
        <img src="images/900x600-1.jpg">
    </div>
    <div id="size_4"
         style="position: absolute;width: 900px; height: 600px;transform-origin: 0 0;opacity: 0; right: 0;">
        <img src="images/900x600-3.jpg">
    </div>
    <div id="size_vid"
         style="position: absolute;width: 900px; height: 600px;transform-origin: 0 0; background-image:url(images/900x600-vid.jpg);opacity: 0; right: 0;">
        <div id="player_container" style="position : absolute; width: 600px; height: 337px; top:131.5px; z-index: 1;">
        </div>
    </div>

The number of initial panels coincides with the number of the corresponding expanded panels. For example, on element 200×200 #1 (file 1.jpg) click, the panel 900×600 #1 (file 900×600-1.jpg) expands.

Files with the same name use as a source the same picture so they are equal.

In case the link to the target page for top, bottom, expanded panels should be different, open file body.js with the text editor and indicate the target URL link (globalHTML5Api.click(‘https://yourdomain.com’)) for an appropriate panel – top (“Link – Top”), bottom (“Link – Bottom”) and expanded (Link – 1, 2, 3):

body.js file code

s_2.onclick = function(_event) {
  prevent(_event);
  globalHTML5Api.click(‘’);
  //alert(“Link – 2”);
};
s_3.onclick = function(_event) {
  prevent(_event);
  globalHTML5Api.click(‘’);
  //alert(“Link – 1”);
};
s_4.onclick = function(_event) {
  prevent(_event);
  globalHTML5Api.click(‘’);
  //alert(“Link – 3”);
};
s_v.onclick = function(_event) {
  prevent(_event);
  globalHTML5Api.click(‘’);
  //alert(“Link – Video”);
};
topLink.onclick = function(_event) {
  prevent(_event);
  globalHTML5Api.click(‘’);
  //alert(“Link – Top”);
};
bottomLink.onclick = function(_event) {
  prevent(_event);
  globalHTML5Api.click(‘’);
  //alert(“Link – Bottom”);
};

Video file should be named video.mp4 and placed in the root directory of the .zip file.
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.

This template refers to the predefined banner experience. Panels’ dimensions, banner parameters may be changed in compliance with manuals: Video player module and Expandable.

Event tracking

View
Confirmed view
Click
Expand by user
Collapse by user
Play
Pause
Resume
Sound on
Sound off
Progress (firstQuartile, midpoint, thirdQuartile, complete)

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

Updated on November 17, 2023