HTML5 Ad Instructions

Material Delivery

If you know how to build websites, you also know how to build HTML5 ads. You may use any tool you want, Notepad++, CoffeeCup, Sublime, Notepad etc. An HTML5 ad is like an HTML5 page, but smaller and simpler. You may also design your ad using HTML5 animation tools, such as Adobe Edge or Google Web Designer.

Please follow these instructions when building an ad:

  1. The creative must have one root HTML file (index.html).
  2. You may use folder structure where e.g. the style files and images are located in separate folders.
  3. HTML5 materials must be delivered in a zipped file (.zip) containing all the files related to the ad.
  4. Clicks must open in a new browser window (_blank).
  5. Use unique identifiers, classes, variables and function names for each ad.
  6. The margin value of the creative's style configurations must be 0 so that additional borders do not appear around the outer edges of the banner.
  7. You should preferably use double quotation marks (").
  8. Please note that your ad creative will be published inside an iframe on the media page/app. Please check that click tracking has been done according to our instructions.
  9. The default character encoding in HTML is UTF-8.
  10. Calculating the file size: All of the files related to the ad - images, script files, fonts, style files - must be included when calculating the ad's file size.
  11. Keep the number of files reasonable; each individual file load burdens and prolongs the loading of the ad/page. The maximum number of host-initiated file requests is 15.
  12. By default, all older browsers that do not support HTML5 (such as IE9 and older versions) are excluded from the campaign. However, if you wish to include old browser versions in your campaign, please deliver a backup image with your HTML5 material that can be used with older browsers.

    How to Add Click Tracking to HTML5 Material?

    The instructions below explain how to add click tracking to material when HTML5 material is run directly through Sanoma's system.

    Sanoma Click API

    Add the following code snippet to the head section of your HTML code:
     

    <script src="https://sn.sanoma.fi/js/ClicksApi.js"></script>

    Defining the ClickTAGs

    Example 1: Example in cases where clickthrough URL is defined directly in the html:

    <a href="javascript:void(0);" onclick="SanomaClicksApi.openClickUrl('https://yourlinkgoeshere'); return false;">Click here</a>

    Example 2: SanomaClicksApi supports either specifying clickTag name as argument or using default tagname provided by Xandr by omitting argument altogether. 

    <a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag('clickTAG'); return false;">Click here</a> 

    <a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag(); return false;">Click here</a>

    Download instructions: Adobe Edge

    Download instructions: Google Web Designer

    HTML5 best practices

    Improve Initial Display

    • Use inline CSS styles and HTML so that the initial display of the ad would load as fast as possible.

    • Limit initial dependencies on any render-blocking .js and .css files.
    • Load interactive elements as a deferred or secondary subload.
    • Defer heavy file weights (e.g. a video) until the user initiates interaction.
    • Avoid any unnecessary downloads.
    • In order to boost the loading of an ad, always combine files whenever possible, e.g. JavaScript libraries, HTML, CSS.
    • In order to improve the initial visual experience, check the device and the connection speed to provide the most optimum solution. For instance, display a lighter version of the ad in devices with slower connection speeds, so that the user experience would still be as good as possible.

    Image Assets

    • Optimise all images
    • Preload images when necessary
    • Consolidate images whenever possible (sprite sheet)
    • Use sprite sheets for multiple display assets and animation

    Avoid:

    • Ads may not employ rapid or "strobing" animation of any graphic, copy, or background elements.
    • Avoid animation effects that are CPU intensive (20% average CPU usage accepted, sustained spikes over 70% will be rejected)
    • Avoid or reduce the usage of:
      • loops and timers (cancel/Clear all setInterval and setTimeout once their job is done)
      • setInterval
      • setTimeout
      • requestAnimationFrame
      • eval() to avoid security risks
      • global variables
    • Minimize DOM access
    • jQuery is not recommended for HTML5 ads for these reasons:
      • Degraded performance on mobile devices because of reliance on time-based animations.
      • Unnecessary file weight: the majority of the library's functionality isn't required.

    HTML5 Animation Tools

    You are welcome to use animation tools of your choice to create an ad, e.g. Adobe Edge and Google Web Designer. Please note that the material must include a clickTAG so that the ad clicks will be passed on to the ad server.

    We have created step-by-step instructions on how to add click tracking. In addition to general instructions, we have compiled our own instructions on how to add click tracking in Adobe Edge and Google Web Designer as well as for HTML5 materials that have been created in Adobe Flash and converted to HTML5 using Swiffy.

    Useful Resources