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.
Print Was this helpful? Yes / No

Other Articles in Ad Gallery

This section provides demo, sample and instructions for the most common and popular ad creative templates. Click on a template link to view the description, demo and instructions to create in the ad server, customize it to suite your purpose and integrate the ad with your platform.

Cannot find an answer for your question? Ask our Customer Care team

Related

  • Campaign
    "Documentation for API methods to manage your campaigns in our ad server. API Version1.4.5 (build 20231101). This page was updated ..."
  • Channels
    "Documentation for API methods to manage one or multiple channels. API Version1.4.5 (build 20231101). This page was updated on Sun, ..."
  • Website
    "Documentation for API methods to manage one or multiple websites. API Version1.4.5 (build 20231101). This page was updated on Sat, ..."
  • HTML5 Animate Ad
    "HTML5 ad uses JavaScript, CSS and HTML5 for animation and other interactions. There are many HTML5 ad templates, tools and ..."
  • 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 ..."