IAB Billboard and IAB Pushdown Setup Documentation

Updated: 02/04/2019. Version: 1.5.0

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 and IAB Pushdown ad. These formats have been created according to official IAB Display Units recommendations.

Initialization

To start the initialization, follow these steps:

1) Make sure you loaded Single Expanding component in <head></head> tag inside your index.html document.

<head>
 ...

    <!-- Components -->
    <script src="//s1.adform.net/banners/scripts/components/Adform.SingleExpanding.js"></script>
    <!-- Components -->
...

</head>

2) Optionally if you need video inside the ad, then you need:

load Video Player component in <head></head> tag (below Single Expanding component) inside your index.html document.

<head>
 ...

    <!-- Components -->
    <script src="//s1.adform.net/banners/scripts/components/Adform.SingleExpanding.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>
    <!-- Components -->
...

</head>

In order to work more flexible with Video Player components, we strongly suggest to use Video Player Container. To get more details about Video Player Container, check documentation bellow.

Video Container component documentation.

Video Player Component needs to be loaded as follows:


<head>
...

 <!-- Components -->
<script src="//s1.adform.net/banners/scripts/components/Adform.SingleExpanding.js"></script>
<script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>
<script src="//s1.adform.net/banners/scripts/components/Adform.VideoContainer.js"></script>
<!-- Components -->
...
</head>

3) Make sure custom.js file is placed into scripts folder and correctly loaded into your index.html document.

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

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

var banner = document.getElementById('adf-banner');
var closeButton = document.getElementById('adf-close-button');
var clickArea = document.getElementById('adf-click-area');
var expanded = document.getElementById('adf-expanded');
var collapsed = document.getElementById('adf-collapsed');
var clickTAGvalue = Adform.getVar('clickTAG') || 'http://www.adform.com';
var landingpagetarget = Adform.getVar('landingPageTarget') || '_blank';

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

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

// 1. Setup and initialize VideoContainer (optional)
var player = new Adf.VideoContainer({
    container: '#adf-video',
    clicktag: clickTAGvalue,
    target: landingpagetarget
});

player.init();

// 2. New setup
var settings = {
    banner: banner,
    collapsed: collapsed,
    expanded: expanded,
    clickArea: clickArea,
    closeButton: closeButton,
    clicktag: clickTAGvalue,
    target: landingpagetarget,

    // If IAB Billboard //
    background: Adform.getAsset(4) // set background image from additional assets for expanded stage

    // If IAB Pushdown //
    collapsedBackground: Adform.getAsset(4), // set background image from additional assets for collapsed stage
    expandedBackground: Adform.getAsset(5) // set background image from additional assets for expanded stage
};

var pushdown = new Adf.Pushdown(settings);

// 3. Initialize IAB Billboard or IAB Pushdown
pushdown.init();

Mandatory Settings

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

Optional Settings for IAB Billboard

Name	Type	Default	Description
background	`URL`	`Adform.getAsset(4)`	Upload image as additional asset to set it as expanded stage background, you can edit additional asset number

Optional Settings for IAB Pushdown

Name	Type	Default	Description
collapsedBackground	`URL`	`Adform.getAsset(4)`	Upload image as additional asset to set it as collapsed stage background, you can edit additional asset number
expandedBackground	`URL`	`Adform.getAsset(5)`	Upload image as additional asset to set it as expanded stage background, you can edit additional asset number

Video options can be set inside player variable by passing video object. All available options are listed in Video Player Container Documentation.

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

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.