Help Center Ad Gallery

HTML5 Adobe Animate Ad

HTML5 ads are replacing Flash/SWF ads. Tools used to create HTML5 animate ad include: Adobe Edge Animate, Adobe Animate CC and animation JavaScript frameworks. This ad format can display on more devices (including iPhone, iPad, iOS mobile devices) without the need for a Flash plugin in the browser. If you already have a SWF file, you can try to convert it or re-create it in HTML5. Adobe Edge Animate will export the ad into a ZIP file that contains all the necessary images, HTML and JavaScript files to display the ad. Typically, it contains a HTML file, an image folder, and several JavaScript files.

Setup

There are several options to serve this ad format in AdSpeed using the Rich-Media ad format. First, upload the ad folder to your own website or use our Fast Delivery add-on to upload the single ZIP file directly to our system. Second, create it as a new Rich-Media/HTML ad.

Scenario 1: Edge, Edge Preload and Edge Actions

If you have 3 JavaScript files: adname_edge.js, adname_edgePreload.js, and adname_edgeActions.js. Change "adname" to your HTML5 ad name.

Click the menu "Ads / Create a new ad"
Choose the ad type to be Rich-Media/HTML ad
Enter the HTML code from the Edge Animate HTML file

Change the JavaScript to point to the absolute URL of the file adname_edgePreload.js

Check file adname_edgePreload.js and make sure it is using the full URLs for the dependency libraries and not relative/shorten links:

aLoader=[ 
 {load:"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"},
 {load:"//animate.adobe.com/runtime/3.0.0/edge.3.0.0.min.js"},
 {load:"//www.example.com/html5ad/adname_edge.js"},
 {load:"//www.example.com/html5ad/adname_edgeActions.js"}
]

Check file adname_edge.js and make sure it is pointing to the correct location of the ad image folder:
```
var im='//www.example.com/html5ad/images/';
```

Check file adname_edgeActions.js and make sure it is using a a click macro like clickTAG for click tracking and not a static link:

(function($,Edge,compId){
 var Composition=Edge.Composition,Symbol=Edge.Symbol;
 (function(symbolName){
  Symbol.bindElementAction(compId,symbolName,"${_Stage}","click",function(sym,e){
   window.open(clickTAG,"_blank");
  });
 })("stage");
})(jQuery,AdobeEdge,"adname");

Scenario 2: Edge

If you have the HTML and only one JavaScript file: adname_edge.js. In this case, "adname" prefix is your HTML5 ad name.

Click the menu "Ads / Create a new ad"
Choose the ad type to be Rich-Media/HTML ad
Enter the HTML code from the Edge Animate HTML file

Change the JavaScript to point to the absolute URL of the file adname_edge.js

Check file adname_edge.js and make sure it is pointing to the correct location of the ad image folder:
```
var im='//www.example.com/html5ad/images/';
```
Check file adname_edge.js and make sure it is using a click macro like clickTag for click tracking

ZIP Macro

If you use our Fast Delivery add-on to upload the ZIP file, you can use a shortcut/macro in the URL to quickly and conveniently link to the HTML5 components like JavaScript, CSS, image files. [ASUFAST:xx:xxxx] will be converted to the actual location of the component within the ZIP file.

Troubleshooting

If you have problems setting it up, we can help. First, please upload the ad into a folder on your website or upload the HTML5 ad ZIP file to Fast Delivery add-on. Second, submit a technical ticket with details (eg: URL, ad ID, any special instructions).

Print Was this helpful? Yes / No