Requirements for HTML5 Banner Files

Greta
Greta
  • Updated

Build HTML5 banners based on Adform's specifications.

Each HTML5 banner prepared for the Adform system should be compressed as a .zip file with the following files:

  • A metadata file called manifest.json: The manifest.json file defines banner parameters (such as name, description, dimensions, events, clicktags, and source). Adform parses and registers these parameters in the Adform system once you upload the banner's .zip file as an asset.

    An example manifest.json file includes:

    {
    "version": "1.0", 

    "title": "300x250 Example Banner", 
    "description": "optional string",  

    "width" : "300", 
    "height": "250", 

    "events": {
        "enabled": 1, 
        "list": { 
            "1": "myEventName1",
            "2": "myEventName2",
            "3": "myEventName3"
        }
    },

    "clicktags": {
        "clickTAG": "https://site.adform.com",
        "clickTAG2": "http://site.adform.com/company/about-adform/"
    },

    "source": "yourbanner.html"
}

    You can enable (1) or disable (0) events for your banner in the manifest.json file. If you use custom events, you must define them in an events list section in the manifest.json file. If your banner has multiple clickTAG instances, you must define all of them in a clicktags section in a manifest.json file.

    Note

    clickTAG names are case sensitive. For example, if you define "clickTAGmainCTA" in the "clicktags" section of the manifest.json file, you must access it in JavaScript with "dhtml.getVar("clickTAGmainCTA")".

  • An HTML source file the name of which matches the title defined in a manifest.json file.

    Note

    A manifest.json file and a defined main HTML source should be located in the root of the .zip file. Otherwise, Adform can't extract the zipped content correctly and notifies you with an error when uploading the .zip file. Also, Adform measures the total banner 'weight' when the file is unzipped.

  • JavaScript sources: such as jQuery, GreenSock animation libraries and components, and so forth if they are used in a banner. You can include libraries as local assets or as external sources.

  • Other assets: such as images, fonts, XML files, and so forth from local directories or from external paths.

Add Adform DHTML Library to HTML

Every HTML5 banner uploaded to Adform must have Adform DHTML library inserted within the <head> tags of the 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>

How Does clickTAG Work?

clickTAG variables make the banner clickable and send the user to the desired landing page:

  1. You can receive a clickTAG value in a banner using this code:

    const clickTAGvalue = dhtml.getVar('clickTAG', 'https://example.com');

  2. After a user clicks, land them with this code:

    element.addEventListener('click', function(){
    window.open(clickTAGvalue, '_blank');
});

Locally (when the banner isn't in Adform), the banner lands directly to https://example.com.

However, when you upload the banner in Adform, Adform reads the clickTAG value and adds click tracking:

  1. First, Adform parses the manifest.json file and sees which and how many different clickthroughs the banner needs to support.

    • For Adform to see the banner clickthroughs, you need to assign landing pages (clickTAG values) in the manifest.json file, such as:

      clickTAG:   https://site.adform.com/
clickTAG2:  https://site.adform.com/company/about-adform/

  2. To track a particular click, Adform creates redirect links (clicktrackers) for the assigned landing pages (clickTAG values). This only works when the banner is live or in Adform.

    Assigned landing pages

    Landing pages with clicktrackers

    		 
    clickTAG:   https://site.adform.com/
clickTAG2:  https://site.adform.com/company/about-adform/
    		 
    clickTAG:   https://track.adform.net/C/?bn=1234567;C=1;more;various;params // which redirects to https://site.adform.com/
clickTAG2:  https://track.adform.net/C/?bn=1234567;C=2;more;various;params // which redirects to https://site.adform.com/company/about-adform/

Run this code to test how clickTAG works both on your local machine and when a banner is in Adform:

const clickTAGvalue = dhtml.getVar('clickTAG', 'https://example.com');
console.log('clickTAG:', clickTAGvalue);

Was this article helpful?

/
How we can make it better?

Thank you for your feedback!