Use Different Standard HTML5 Banner Formats

Vaida
Vaida
  • Updated

You can code different formats and animations for your HTML5 banners. Making your banners adaptable and able to fit a wider variety of placements can help to increase your reach, as well as allow more creative freedom for the visuals and the message of your banners.

Any HTML5 banner must have an HTML file and a manifest.json file zipped together with images, scripts, and other banner materials. When you code a banner, you must add DHTML library to your banner HTML file and assign clickTag values. Make sure to read about an HTML5 banner's structure and requirements before working on your banners.

Create Standard HTML Ads

A standard HTML ad looks like this: Banner preview.

This type of banner is static and doesn't have animations or interactions. It has a manifest.json file that defines the ad dimension, an HTML file that is the banner's source, and the necessary visuals as separate files.

You can assign a clickTAG value to a standard HTML banner with this JavaScript code:

<script>
    var banner = document.getElementById('banner');
    clickTAGvalue = dhtml.getVar("clickTAG", "http://www.example.com"); //banner will receive clickTAG value - if not defined, banner will land to example.com
    landingpagetarget = dhtml.getVar("landingPageTarget", "_blank"); //landingPageTarget variable enables to change target from Adform system.

    banner.onclick = function() {
        window.open(clickTAGvalue, landingpagetarget); //when banner is clicked it will open new window directing to clickTAG value
    }
</script>

Create Single-File Expanding Ads

A single-file expanding ad looks like this: Banner preview

The single expanding banner format consists of a collapsed part (smaller size) and on click, the ad expands to a larger version. The expanded banner can offer video and other rich media experiences. The expanded part accommodates a link to the predefined landing page. The ad maintains expanded size until the Close button is clicked.

SingleExpanding Component

Use the SingleExpanding JavaScript component to create an animated single-file expanding banner. To use SingleExpanding component, add a component script to the banner's HTML file and initialize the component by calling SingleExpanding.init( ) method. To destroy a single expanding component, use SingleExpanding.destroy( ) method.

To use the SingleExpanding component, add it to the banner's HTML file:

<script>
        document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
    </script>
    <!-- Components -->
    <script src="//s1.adform.net/banners/scripts/components/Adform.SingleExpanding.js"></script>
    <!-- Components -->

Settings

For a complete SingleExpanding component setup, define additional settings. These settings, however, are optional and have default values.

Easing Animations

expandEasing and collapseEasing properties are used to set animation easing type. You can pass your own easing function or use one of the following static properties:

var SingleExpanding = Adform.Component.SingleExpanding;
var index = Math.floor(Math.random() * 15);
var easing = [
    SingleExpanding.regularEaseIn,
    SingleExpanding.regularEaseOut,
    SingleExpanding.regularEaseInOut,
    SingleExpanding.backEaseIn,
    SingleExpanding.backEaseOut,
    SingleExpanding.backEaseInOut,
    SingleExpanding.strongEaseIn,
    SingleExpanding.strongEaseOut,
    SingleExpanding.strongEaseInOut,
    SingleExpanding.bounceEaseIn,
    SingleExpanding.bounceEaseOut,
    SingleExpanding.bounceEaseInOut,
    SingleExpanding.elasticEaseIn,
    SingleExpanding.elasticEaseOut,
    SingleExpanding.elasticEaseInOut 
][index];

Supported Events

Use SingleExpanding.on( ) and SingleExpanding.off( ) methods to add or remove single expanding event listeners.

Code Example for Single-File Expanding Ads

Place the provided code in a banner's .html file.

Create a scripts folder, then create custom.js file and place it inside the newly created folder.

Inside the custom.js file, place the code which you can find below:

Create a styles folder, then create a custom.css file and place it inside the newly created folder.

Inside the custom.css file, place the code which you can find below:

Create Double-File Expanding Ads

A double-file expanding ad looks like this: Banner preview

The double-file expanding banner has two HTML assets: a collapsed banner asset and an expanded banner asset.

Collapsed Banner Asset

The collapsed banner asset includes a collapsed banner. The banner is set to expand on rollover (controlled from Adform’s side). Because the rollover function isn't relevant on touchscreen devices, include the expand function instead.

The following JavaScript code expands a banner:

    var banner = document.getElementById('banner');
    banner.onclick = function() {
       expand();  
    }
function expand() {
    dhtml.external.expand && dhtml.external.expand();
}

The expand( ) function uses a public method to expand the ad.

Expanded Banner Asset

The expanded ad should have a clickTAG and a close button.

The Adform DHTML library enables the banner to receive a clickTAG variable and activates the close button:

clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.example.com');
landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');

var closebutton = document.getElementById('closeImage');
var banner = document.getElementById('banner');

closebutton.onclick = function() {
close();
           }

banner.onclick = function() {
window.open(clickTAGvalue,landingpagetarget);
           }

function close() {
dhtml.external.close && dhtml.external.close();
}

The close( ) function uses a public method to collapse the ad.

An expanded ad example also contains an HTML5 Video Player. You can find more information about HTML5 Video Player Component in Use Videos in HTML5 Banners article.

Create Floating HTML Ads

A floating HTML ad looks like this: Banner preview

A floating HTML banner consists of one HTML asset. It should contain a clickTag and should also have a close button.

Adform HTML library enables the banner to receive a clickTAG variable and activates the close button:

<script>
    var banner = document.getElementById('banner');
    clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.example.com');
    landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');

    var closebutton = document.getElementById('closeImage');
    var banner = document.getElementById('banner');

    closebutton.onclick = function() {
        dhtml.sendEvent(dhtml.CLOSE_BUTTON_PRESS);
        close();
    }

    banner.onclick = function() {
        window.open(clickTAGvalue, landingpagetarget);
    }

    function close() {
        dhtml.external.close && dhtml.external.close();
    }
</script>

The close( ) function uses a public method to close the ad.

Create Click to Float Ads

This type of ad is used in special TakeOver formats, when clicking on a standard ad calls a floating banner.

To creat this type of ad, the standard HTML ad must have an additional Adform code snippet:

function showFloat() {
  var bn = dhtml.getVar('bn');
  var fbn = dhtml.getVar('floatBN');
  if (fbn) parent.ADFCall(fbn, 'show');
  parent.ADFCall(bn, 'show');
};

buttonFloat.onclick = function () {
    showFloat();
};

Make Your Banners Responsive

To enable a banner to be responsive when serving from the Adform tag, you have to add a call to resize function:

  • resize (width, height) — resize the html asset and parent iframe. The width and height can be expressed as a number (in pixels), or a string defining the percentage (for example, "100%").

This function needs to be included because all HTML5 banners in Adform are put inside iframes with asset height and width specified in the manifest.json file. The resize function allows scaling that iframe.

The resize function is called on dhtml.external object. Here's a usage example:

if (dhtml.external && dhtml.external.resize) dhtml.external.resize ('100%', '100%');

However, for the banner to actually become responsive, you need to make its styling responsive. That includes setting HTML elements dimensions with relative values (in percentages), and positioning elements in locations relative to other elements. For example, if the banner has to be scaled to the full window in width, the main wrapper element’s styling should be:

#someWrapper {
width: 100%;
…
}

Also, the elements inside it should have relative positions:

#someElement {
left: 10%;
bottom 30%;
…
}

This is needed so that they stay in their relevant places after the banner is resized.

Use Polite Load Ads

There are two types of polite load ads:

  • Polite Image + Main Banner (such a banner can be easily set up in Adform system without special code snippets)

  • The Main banner with Polite load snippet

Polite image + Main banner

For this polite load ad type, you need a polite image and a main banner. While the site loads, Adform displays the polite image. Then, after the site is fully loaded, Adform displays the main banner, which is a standard HTML5 ad, instead of the polite image.

Polite banner from one file (with a code snippet inside)

To implement polite loading in an HTML5 banner, you need to add a polite source in the HTML file, such as an image that is shown before the page fully loads. Then, after a page loaded event fires, the actual heavier HTML5 banner is loaded with JavaScript. Polite loading functionality in JavaScript can be implemented via Adform's DHTML library. It consists of two parts:

Define a function which loads heavy content like this:

dhtml.sharedEvents.once('pageLoadComplete', function() {
    // code that loads heavy content
});

Enable polite loading for a banner:

dhtml.external.initPoliteMode();

Keep in mind that pageLoadComplete event works only when the banner is served from the Adform system. You can also use this code both when serving the banner from the Adform system and also when you want to simulate polite loading while testing locally:

var bn = dhtml.getVar('bn', 0);
if (bn) 
{
    // when banner is served from tag
    dhtml.sharedEvents.once('pageLoadComplete', init);
    dhtml.external.initPoliteMode();
}
else 
{
    // when testing locally
    setTimeout(init, 2000);
}

function init() {
    // load heavy content
}

bn — is a variable that will be 0 when testing locally, and will be the banner's tag number when served from Adform.

This type of polite loading ad can be easily tested in the Adform Studio. There is a fake 5 second page load in the banner preview window. This means that for 5 seconds you'll see the polite image.

Note

If you roll over the banner when the page is loading, Adform scripts identify this as user interaction and fire Polite Loaded event.

Was this article helpful?

/
How we can make it better?

Thank you for your feedback!