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 can subscribe to our Fast Delivery add-on to upload the ZIP file directly to our adserver.
  • Follow the menu "My Account / Add-ons / Fast Delivery", click tab "Add" and upload the ZIP file
  • Click on the ZIP filename and click the link "Unzip" to extract its files. If you don't see "Unzip" link, please contact us
  • Click on the link "Stand-Alone Preview" to make sure the original ad displays and clicks properly
  • Copy the tag provided under the field "Ad Code" to be used in the next step. Replace the placeholders with the correct ad dimension.

Create an HTML5 Ad

  • Click the menu "Ads / Create a new ad"
  • Choose the ad type to be Rich-Media/HTML ad
  • Enter 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 the 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 the click tracking macro

Update the HTML5 ad

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.
<script type="text/javascript" src="//g.adspeed.net/js/adspeed_html5.js"></script>

<script type="text/javascript">
var clickTag = adspeed_clicktag+"https://landing.page";
</script>
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)">
</canvas>

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.

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.3.2 (build 20170915). This page was updated ..."
  • Website
    "Documentation for API methods to manage one or multiple websites. API Version1.3.2 (build 20170915). This page was updated on Fri, ..."
  • Channels
    "Documentation for API methods to manage one or multiple channels. API Version1.3.2 (build 20170915). This page was updated on Fri, ..."
  • 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 ..."