Help Center Ad Gallery

HTML5 Ad from a ZIP file

If your client sends a ZIP file that contains all the creative assets (image, JavaScript, HTML, etc.), you can create an HTML5 ad from that ZIP file.

Upload the ZIP file

You need an active subscription to our Fast Delivery add-on to upload the ZIP file directly to our adserver. We recommend including the dimension in the ZIP filename because it will help with auto-detection. For example: "MyAd-728x90.zip"

Follow the menu "My Account / Add-ons / Fast Delivery", click tab "Add" and upload the ZIP file
Click on the ZIP filename and click button "Unzip" to extract its files. If you don't see the button "Unzip", please contact us to enable this feature
Click on the button "Preview" to make sure the ad displays and clicks properly

Create the HTML5 Ad

If the ad dimension can be automatically detected, often from the ZIP filename, you can create the HTML5 ad by simply clicking on the button "Create a new HTML5 ad using this code" below the text box.

If you do not see the ad creation button, you can manually create the HTML5 ad following these steps below:

Copy the tag provided in the box "Ad Code". Replace the placeholders with the correct ad dimension
Click the menu "Ads / Create a new ad"
Choose the ad type to be "Rich-Media/HTML" ad
Paste the IFRAME tag that points to the uploaded ad into the code box

Below is a sample IFRAME tag to use for the HTML5 ad:

<iframe src="[ASUFAST:xx:xxxx]/index.html?asclk=[ASClickTrackerHTML5IF]" width="300"
height="250" frameborder="0" scrolling="no" allowtransparency="true"
hspace="0" vspace="0"></iframe>

[ASUFAST:xx:xxxx] is our CDN macro. The actual macro is provided after you uploaded and extracted the ZIP file. It will be converted to the actual location of the component within the ZIP file
[ASClickTrackerHTML5IF] is our click tracking macro
Additional parameters to customize the HTML ad (eg: city, country, landing page URL, etc.) can be optionally passed into the Iframe URL

Update the HTML5 ad for click tracking

Edit the extracted ad HTML file (eg: index.html) to include our click-tracking JavaScript file and insert the click macro into the correct place. First, find the location of the existing clickTag and change it to:

<script type="text/javascript" src="https://g.adspeed.net/js/adspeed_html5.js"></script>

<script type="text/javascript">
var clickTag = adspeed_clicktag+"https://change-to-your-landing-page";
</script>

If you do not want to hard-code the landing page URL here, you can pass it into the Iframe as an additional parameter instead.

Canvas-based Animation

If your HTML5 ad uses Canvas tag, here is how add click tracking to the ad:

Add the clickTag code as in the step above
Attached the onclick event to the canvas

<canvas id="canvas" width="300" height="250" 
style="display:block; cursor:pointer; background-color:rgba(255,255,255,1.00)" 
onclick="javascript:window.open(window.clickTag,'_top')">
</canvas>

Alternatively, if there is no Canvas tag, this can typically be applied to the main DIV tag or a link A/HREF that encloses the whole HTML5 ad. For example with FlashTalking's HTML5 API:

<a href="javascript:window.open(window.clickTag,'_top');">...</a>
<!-- change <ft-default clicktag=""> to <ft-default> -->

Test a Click

After you have created the HTML ad and made changes for the click macro, preview the ad and test a click on it. Make sure it goes to the correct landing page and the click counter is increased properly in the Overall report for the same ad.

Technical Support

Since there are multiple frameworks and techniques to create an HTML5 ad, customizations might be needed. After you have uploaded all supporting files and created a test ad and it still does not work as expected, please submit a technical ticket and we'll assist you further.