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!

Adobe Edge Banners

Adobe Edge Animate lets web designers create interactive HTML animations for web, digital publishing, rich media advertising and more, reaching both desktop and mobile with ease. In order to make such banners be compatible with Adform system creative should follow specifications below. 

Tip: Use Adform‘s HTML5 Studio to automatically add required scripts and to auto apply main clickTAG.

 

 Note: this describes the usage of external non Adform related systems and please check respective documentation for most up to date information.

 

  • Adding the clickTAG via Adobe Edge tool

    Adding a clickTAG to Adobe Edge Animate banner consists of these steps:

    1. Include Adform HTML library https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js :

    Adobe Edge Add Js

    2. Open code editor Window > Code. Choose Stage element (or any other element you want to add a clickTAG to) and choose to add ‘click’ handler:

    Adobe Edge Add Click

    3. Insert Adform’s clickTAG code to the handler:

    window.open(
    dhtml.getVar('clickTAG', 'http://www.adform.com'), 
    	dhtml.getVar('landingPageTarget', '_blank')
    );
    

    Adobe Edge Add Clickfunction

     More info about Adform HTML banner clickTAGs can be found here.


    Done - Adform clickTAG inserted.

    Note: When testing the banner locally, after click you will be landed to the fallback value ( http://www.adform.com ) and when uploaded to Adform, the landing page will be received from assigned value in the system. 

     Note: Only the published part should be uploaded to the system. Usually that can be found in Edge’s project folder: publish/web/

     

  • Adding the clickTAG directly to code

    If you received Adobe Edge Animate banner source without Adform's clickTAG implemented you may add clickTAG code directly to Edge banner actions JS file and make the banner compatible with Adform system.  Workflow:

    1. Define Adform DHTML library:

    • If there is edgePreload.js file,  define Adform library there:

      aLoader = [
            { load: "edge_includes/jquery-2.0.3.min.js"},
            { load: "edge_includes/edge.4.0.1.min.js"},
            { load: "https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js", user: true },
            { load: "index_edge.js"},
            { load: "index_edgeActions.js"}];
    • Or if edgePreload.js is not included, define Adform DHTML library in banner's main HTML source:

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

    2. Add clickTAG code to edgeActions.js file:

       //Edge symbol: 'stage'
       (function(symbolName) {
          Symbol.bindElementAction(compId, symbolName, "${Stage}", "click", function(sym, e) {
             window.open(
             	dhtml.getVar('clickTAG', 'http://www.adform.com'), 
             	dhtml.getVar('landingPageTarget', '_blank')
             );         
          });
          //Edge binding end
       })("stage");
       //Edge symbol end:'stage'

    Note: this code is applied for "Stage" banner element but also could be applied on some specific area, button, symbol, etc. 

     

  • Local Connections ads built with Adobe Edge

    Using Adform local connection API for banners built with Adobe Edge banner creation tool is quite different as Adobe Edge employs specific functions to start the animations. So, in order to start the animations in both the members of the synchronized ad, at the exact same time, the code snippets below might just help.

    In the 1st member's html file (end of the <body> tag) enter:

    	var connection = dhtml.connect('channel'),
        compId = dhtml.byId('Stage').className;
        
        AdobeEdge.bootstrapCallback(function(compId){
            AdobeEdge.Symbol.bindElementAction(compId, 'stage', 'document', 'compositionReady', function(sym, e){
                sym.stopAll(-1, false);
                sym.setAutoPlay(false);
    			
                if (sym.ci) {
                    for(var i = 0; i < sym.ci.length; ++i) {
                        sym.ci[i].setAutoPlay(false);
                    }
                }
    			
                connection.on('animate', function() {
                    sym.playAll();
                });
                
                connection.join();
            });
        });

    Similarly, for the 2nd member enter:

    	var connection = dhtml.connect('channel'),
        compId = dhtml.byId('Stage').className;
        
        AdobeEdge.bootstrapCallback(function(compId){
            AdobeEdge.Symbol.bindElementAction(compId, 'stage', 'document', 'compositionReady', function(sym, e){
                sym.stopAll(-1, false);
                sym.setAutoPlay(false);
    			
                if (sym.ci) {
                    for(var i = 0; i < sym.ci.length; ++i) {
                        sym.ci[i].setAutoPlay(false);
                    }
                }
    			
                connection.expect(2, function() {
                    connection.emit('animate');
                    sym.playAll();
                });
                
                connection.join();
            });
        });

    Note: Do not forget to add Adform DHTML library reference in each creative's section. 

     

    For more information about Adform local connection API, pleas see "Local Connection Ads" section.