Responsive Header Component Documentation

Updated: 14/07/2017. Version: 1.5

Example of Responsive Header Component: Responsive Header Ad

Template in Adform HTML STUDIO

Download Responsive Header Component

Description

Responsive Header Component allows users to easily and quickly create AOL MSN Responsive Header banner with multiple features.

Note: Responsive Header Component is adapted only for MSN Responsive Header banner which could be launched on MSN network.

Initialization

To start with Responsive Header Component, 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) Download component from the link above

3) Load Responsive Header Component into your index.html document.

<!-- Components -->
    <script src="scripts/Adf.ResponsiveHeader.min.js"></script>
<!-- Components -->

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

4) Optional Step. If Video Player is initialized and used, then Video Container Component should be loaded as well.

<!-- Components -->
    <script src="scripts/Adf.ResponsiveHeader.min.js"></script>
    <script src="scripts/Adf.VideoContainer.min.js"></script>
<!-- Components -->

Video Container Component API Documentation

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

// 1. New setup
var header = new Adf.ResponsiveHeader({
    clicktag: Adform.getVar('clickTAG'),
    target: Adform.getVar('landingPageTarget'),
    scaleClose: false, 
    collapsedHeight: 66, 
    iframeClick: 1, 
    expandedStages: [
        dhtml.getAsset(4) || "", //628x162
        dhtml.getAsset(5) || "", //970x250
        dhtml.getAsset(6) || "", //1272x328
    ],
    collapsedStages: [
        dhtml.getAsset(7) || "", //628x66
        dhtml.getAsset(8) || "", //970x66
        dhtml.getAsset(9) || ""  //1272x66
    ]
});

// 2. Initialize Responsive Header
header.init();

Mandatory Settings

Name	Type	Default	Description
clicktag	variable	//www.adform.com	Defines landing page URL
target	variable	_blank	Defines clicktag target window
scaleClose	boolean	false	Set true if you want to resize close button together with banner
collapsedHeight	integer	66	Set 31 if you want to display only IAB Leave-behind “Show Ad”

Optional Settings

Name	Type	Default	Description
iframeClick	boolean	1	set 0 (or false) if you know how to add Adform clickTAG to your iframe code, if 1 or true iframe will be covered by a clickable element
expandedStages	array	none	You can set expanded stage background images through additional assets (from 4 to 6) or add relative path to images or HTML files (from the smallest to the biggest if 3, autoresize will enable if only one asset is set)
collapsedStages	array	none	You can set expanded stage background images through additional assets (from 7 to 9) or add relative path to images or HTML files (from the smallest to the biggest)

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

Additional Custom Variables

While setting Responsive Header on Adform platform you might notice two additional options:

Name	Type	Default	Description
selectiveLoad	boolean	0	if set to 0 all 3 stages elements get loaded together during banner initialization, if set to 1 stages are loaded/removed during browser resize
initiallyExpanded	boolean	1	this setting makes sure that expanded stage is visible on banner load, it is mandatory, according to AOL specs, to leave it unaltered

Exposed Methods

• Adf.ResponsiveHeader
  
  • .SingleExpanding

Adf.ResponsiveHeader.SingleExpanding

You can find more info about available methods listed in the following document