Help Center Ad Gallery

HTML5 Animate Ad

HTML5 ad uses JavaScript, CSS and HTML5 for animation and other interactions. There are many HTML5 ad templates, tools and third-party ad vendors. We have more specific instructions for HTML5 ads created by Adobe Edge.

Create a HTML5 Ad

  • Click the menu "Ads / Create a new ad"
  • Choose the ad type to be Rich-Media/HTML ad
  • Enter the HTML code into the box. For compatibility, it is recommended to modify the HTML code to strip off HEAD, BODY tags and change relative URLs into full/absolute URLs.

Supporting Files

The HTML code often refers to additional resources/files (JavaScript, CSS, image files) and you will need to make sure they are full/absolute URLs and not relative URLs. The URL could point to the file on your site.

More conveniently, 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 and CSS files. [ASUFAST:xx:xxxx] will be converted to the actual location of the component within the ZIP file.

Iframe

If the HTML5 ad contains custom CSS styling rules that affect the main page when it is served via JavaScript, you can create the ad in your account as an Iframe instead.

In this example, the Iframe points to the HTML5 ad page uploaded via Fast Delivery add-on and also contains a special click macro to track clicks.

Step 1: Here is a sample code when you create a new Rich-Media/HTML ad:

<iframe src="[ASUFAST:xx:xxxx]/myad.html?asclk=[ASClickTrackerHTML5IF]" width="300"
height="250" frameborder="0" scrolling="no" allowtransparency="true"
hspace="0" vspace="0"></iframe>
Step 2: Edit the HTML5 ad page (myad.html) to include our 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 Step 2 above
  • Add 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