IAB Billboard & Pushdown Setup Documentation

Updated: 15/12/2016. Version: 1.5

Example of IAB Billboard

Template in Adform HTML STUDIO

Example of IAB Pushdown

Template in Adform HTML STUDIO

Description

Here you will find information on how to customize IAB Billboard or Pushdown ads. These formats have been created according to official IAB Display Units recommendations.

Initialization

To start the initialization, follow these steps:

1) Make sure you keep SingleExpanding component in the head of the document. You can get rid of VideoPlayer if you don’t need to embed videos.

var components = [
            'SingleExpanding',
            'VideoPlayer' //if you remove this, remove comma after SingleExpanding
        ];

2) Make sure custom.js file is correctly loaded into your index.html document.

<!-- Components -->
    <script src="scripts/custom.js"></script>
<!-- Components -->

Note: both banner html and CSS files contain useful comments which can help you edit banner content and elements.

3) Define all variables that are needed to run the ad:

var banner = dhtml.byId('adf-banner'),
    closeButton = dhtml.byId('adf-close-button'),
    clickArea = dhtml.byId('adf-click-area'),
    expanded = dhtml.byId('adf-expanded'),
    collapsed = dhtml.byId('adf-collapsed'),
    video = dhtml.byId('adf-video');

Note: you can either use your own customized id’s or keep the default ones, make sure they are all defined.

4) Finally, set up initial settings. See example of initialization:

IAB Billboard

// 1. New setup
var settings = {
    banner: banner,
    collapsed: collapsed,
    expanded: expanded,
    clickArea: clickArea,
    closeButton: closeButton,
    clicktag: dhtml.getVar('clickTAG', '//www.adform.com'),
    target: dhtml.getVar('landingPageTarget', '_blank'),
    /* Video object - feel free to remove it */
    video: {
        sources: dhtml.getVar('videoSources'),
        poster: dhtml.getAsset(3),
        clicktag: dhtml.getVar('clickTAG'),
        container: video
    },
    /* Video object end */
    background: dhtml.getAsset(4) // set background image from additional assets
};

var Pushdown = new Adf.Pushdown(settings);

// 2. Initialize IAB Billboard
Pushdown.init();

IAB Pushdown

// 1. New setup
var settings = {
    banner: banner,
    collapsed: collapsed,
    expanded: expanded,
    clickArea: clickArea,
    closeButton: closeButton,
    clicktag: dhtml.getVar('clickTAG', '//www.adform.com'),
    target: dhtml.getVar('landingPageTarget', '_blank'),
    /* Video object - feel free to remove it */
    video: {
        sources: dhtml.getVar('videoSources'),
        poster: dhtml.getAsset(3),
        clicktag: dhtml.getVar('clickTAG'),
        container: video
    },
    /* Video object end */
        collapsedBackground: dhtml.getAsset(4), // set background image from additional assets for collapsed stage
        expandedBackground: dhtml.getAsset(5) // set background image from additional assets for expanded stage
};

var Pushdown = new Adf.Pushdown(settings);

// 2. Initialize IAB Billboard
Pushdown.init();

Mandatory Settings

Name	Type	Default	Description
banner	DOM element	dhtml.byId('adf-banner')	Main banner container
collapsed	DOM element	dhtml.byId('adf-collapsed')	Collapsed stage container
expanded	DOM element	dhtml.byId('adf-expanded')	Expanded stage container
clickArea	DOM element	dhtml.byId('adf-click-area')	Clickable area element
closeButton	DOM element	dhtml.byId('adf-close-button')	Close button element
clicktag	variable	//www.adform.com	Defines landing page URL
target	variable	_blank	Defines clicktag target window

Optional Settings

Note: optional settings can be removed from code if there is a need.

Name	Type	Default	Description
background	URL	dhtml.getAsset(4)	Upload image as additional asset to set it as expanded stage background, you can edit additional asset number
video	object	default	Read below for video object settings, set onCollapse to either stop or pause to stop or pause video on collapse

Video options can be passed to video object. All available options are listed in Video Player Component Documentation

Initially Expanded Stage

In order to set ad initially expanded, addional variable initiallyExpanded with value 1 should be implemented under “CUSTOM VARIABLE sub-section on Banner Settings section in HTML5 Studio.

To disable initially expanded action, please remove addional variable initiallyExpanded with value 1 from “CUSTOM VARIABLE sub-section on Banner Settings section in HTML5 Studio.

Exposed Methods

Adf.Pushdown.SingleExpanding you can find more info about available methods listed here.