Banner Specifications (HTML5)

This page guides you through the additional steps required to use HTML5 banners.

File Structure

Each HTML5 banner should be archived as a ZIP file. This ZIP file contains:

1. A metadata file called manifest.json The manifest.json file defines banner parameters such as name, description, dimensions, events, click tags, and source.

{
    "version": "1.0",
    "title": "300x250 Example Banner",
    "description": "optional string",
    “width" : "300",
    “height": "250",
    “clicktags": {
        "clickTAG": "https://www.test.com",
        "clickTAG2": "https://radiateb2b.com"
    },
    "source": "yourbanner.html"
}

1. HTML source file with the same name referenced in the manifest.json file. There should only be one HTML source file per banner.

2. JavaScript sources like jQuery, GreenSock animation libraries and components, etc., if they are used in a banner. Libraries can be included as local assets or as external sources.

3. Other assets like images, fonts, XML files, etc., that could be taken from local directories or from external paths.

Note: The manifest and source html file should be stored in the root of the zip file.

File Size

The total size of your zip file should not exceed 200Kb. Zip files above this size will incur extra media spend fees.

Tracking Clicks

In order to track clicks within the banners, additional code is required within the HTML file. 1. The following should be included in the header:

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

1. Add a clickTAG to a particular div: Set id (or class name) value for clickTAG area/layer:

<div class="click-layer" id="clickLayer"></div>

1. Take this particular element by its id (or class name) and set the ‘onclick’ function to it. Place this script somewhere below the element in the HTML document (to make sure the element is created earlier than the code is executed):

<script>
    var clickArea = document.getElementById('clickLayer');
    clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.example.com');
    landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');
    clickArea.onclick = function() {
        window.open(clickTAGvalue,landingpagetarget);
    }
</script>

A click on a click layer area calls a function that opens a window with a clickTAG URL value from the manifest file or the fallback static URL. When a banner is uploaded to the system, getVar returns URL defined in the system next to asset.

When a banner is being tested locally, a fallback URL is taken as if a clickTAG is ‘null’ so far.

The cursor style for a clickTAG can be changed to a pointer by adding the following to a click function:

clickArea.style.cursor = “pointer”;

1. (Optional) Adding multiple clickTAGs If you need to have multiple clickTAGs on the same banner, do the following: Set id or (class name) for click elements:

<div id="element">
    <div id="linkbox">
        <a id="left">My Link1</a>
        <a id="center">My Link2</a>
        <a id="right">My Link3</a>
    </div>
</div>

Define a clickTAG value for each clickTAG instance. Collect all clickTAG instance elements from the HTML document by using getElementById or getElementsByClass methods. Set the ‘onlick’ function to each element separately. Place this script somewhere below the click elements in the HTML document (to make sure the elements are created earlier than the code is executed):

<script>
    clickTAGvalue = dhtml.getVar('clickTAG', 'https://radiateb2b.com');
    clickTAGvalue2 = dhtml.getVar('clickTAG2', 'https://info.radiateb2b.com/');
    clickTAGvalue3 = dhtml.getVar('clickTAG3','https://accoutbasedmarketing.agency/');
    landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');
    var center = document.getElementById('center');
    var left = document.getElementById('left');
    var right = document.getElementById('right');
    center.onclick = function() {
        window.open(clickTAGvalue,landingpagetarget);
    }
    left.onclick = function() {
        window.open(clickTAGvalue2,landingpagetarget);
    }
    right.onclick = function() {
        window.open(clickTAGvalue3,landingpagetarget);
    }
</script>

A click on a particular click layer area calls a function that opens a window with an inherited particular clickTAG URL value from the manifest file or the particular fallback static URL (when testing locally).

When a banner is uploaded to the system, getVar returns the URL defined in the system next to the asset. When a banner is being tested locally, a fallback URL is taken as if a clickTAG is ‘null’ so far.

Finally, make sure you register multiple clickTAGs to the manifest.json file before the banner is uploaded to system.