From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

Double File Expanding Ad


Double File Expanding Ad
consists of two HTML assets – Collapsed banner asset and Expanded banner asset. 

  • Collapsed Banner Asset

    1. Collapsed banner asset includes collapsed banner. Asset should contain manifest.json file and HTML file zipped together with images, scripts and other material.

    Note: Please note that manifest.json and HTML files should be in the root directory of the .zip file, not in deeper directories.


    2. manifest.json file should define the ad dimension and the HTML file which should be used as a banner source:

    {
        "version": "1.0",
    
        "title": "html collapsed ad", 
        "description": "",  
    
        "width" : "300", 
        "height": "250", 
    
        "events": {
            "enabled": 1, 
            "list": { }
        },
    
        "clicktags": {
            "clickTAG": "http://www.adform.com"
        },
    
        "source": "300x250.html"
    }

    3. Banner is set to expand on roll over (controlled from Adform’s side). However, as on touchscreen devices the roll over function is not relevant, you should include the expand function.

    4. HTML file should include Adfrom HTML library which enables the banner to receive a clickTAG variable:

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

    5.The following JavaScript code expands the banner:

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


    6. 
    expand() function uses public method to expand the ad. Please find more information about the public methods here.

  • Expanded Banner Asset

    1. Expanded asset should contain a clickTAG.

    2. The ad should also have a Close button.

    3. HTML file should include Adfrom DHTML library:

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

    4. 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();
    }
    

    5. close() function uses public method to collapse the ad. Please find more information about the public methods here.

    6. Expanded ad example also contains an HTML5 Video Player. Please find more information about HTML5 Video Player Component here.