DOCUMENTATION
« Documentation home

HTML5 Ad Guidelines

Ad ZIP file

When delivering HTML5 ad assets to be uploaded to Canned Banners, ensure that all files and assets are in a single ZIP file with no sub-directories. You may only include one creative per ZIP file.

Your ZIP file must include:

  • One HTML file
  • All referenced JS files
  • All referenced CSS files
  • Webfont files (if applicable – see 'Fonts' section below)
  • All image assets (JPEG, GIF, PNG, SVG, etc)
  • Static backup JPEG creative

A sample ZIP directory containing all the assets for an HTML5 ad unit.

HTML file

All of your ad's HTML must be contained in a single, complete, and valid HTML file. Your HTML file may also contain some or all of the ad's CSS and Javascript (as opposed to placing that code in seperate files).

Below is a sample HTML document.

<html>

   <head>
      <title>My HTML5 Ad</title>
      <meta name="ad.size" content="width=300,height=250">
      <link rel="stylesheet" type="text/css" href="style.css">
      <script type="text/javascript" src="animation.js"></script>
   </head>

   <body>
      <div class="bannerAd" onclick="window.open('$D{CLICK_URL_COMPLETE}', '_blank');">
         <div class="headline">Hello world!</div>
         <img src="logo.png" class="logoImg" />
         <img src="background.jpg" class="adBg" />
      </div>
   </body>

</html>

Clicktag

Within your ad code, use the Canned Banners $D{CLICK_URL_COMPLETE} macro where the ad's landing page URL is referenced.

Below is sample ad HTML using $D{CLICK_URL_COMPLETE} with an 'onclick' event.

<div class="bannerAd" onclick="window.open('$D{CLICK_URL_COMPLETE}', '_blank');">
...
</div>

Below is sample HTML using an HREF tag.

<a href="$D{CLICK_URL_COMPLETE}" target="_blank">
...
</a>

Please note:

  • The $D{CLICK_URL_COMPLETE} macro will only populate with the click URL itself, so the macro must be enclosed in quotes in order for the final rendered Javascript or HTML to work.
  • Do not hard-code a static landing page URL within your creative code. Use the $D{CLICK_URL_COMPLETE} macro, as this will allow the landing page to remain flexible and will allow click tracking when your ad runs.

Third-party JS libraries

Third-party JS libraries may be used. You must include all referenced JS code in your ad ZIP file (see 'HTML5 ad ZIP file' above).

Static backup banner

Please include a static backup JPEG banner. The filename must be the ad size (width x height) plus '-backup.jpg'. So the backup banner for a 300x250 creative would be named '300x250-backup.jpg'.

Fonts

Common desktop fonts (e.g., Arial, Georgia) may be used without a webfont reference. Google Fonts may be loaded from the Google CDN within your CSS. Custom webfonts must be included in your ad ZIP file.

Below is sample CSS for setting a common desktop font.

body {
   font-family:Arial, Helvetica, sans-serif;
}

Below is sample CSS for importing a webfont from Google Fonts.

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

Below is a sample of custom webfonts in your HTML5 ad ZIP file. There is no specific requirement for font file formats. Please use whichever formats will give your creative the level of browser compatibility you're comfortable with.

Additional resources

Below are a few additional resources and reference materials.

Contact us to learn more about the Canned Banners Dynamic Ads platform.

CONTACT US