HTML5 Ads Guide

What are HTML5 ads

HTML5 ads, also known as rich media ads, include advanced features like animations or other elements that encourage viewers to interact and engage with content. These ads are formatted using HTML5 language, which allows developers to add animations directly into the source code of a page.

These types of ads are like mini web pages and contain multiple file types that can combine HTML, Javascript, CSS, Web Fonts, shared javascript libraries, SVG, WebGL, and other standard assets, such as images. This eliminates the need for plugins like Adobe Flash, which is no longer supported by RollWorks or any of its partners.

Picture1.gif

 

Zip file requirements

The maximum zip file size is 150KB.

Each HTML5 ad must be its own zip file that contains all code and assets (including public, commonly used JavaScript libraries). It must contain all files referenced from the HTML document:

  • Root of the folder should be a single, well-structured, and complete HTML document
  • The ad must be loadable into an iFrame (when being served).
  • Supported Shared Libraries: Adobe Edge, CreateJS (Easeljs, Movieclip, TweenJS, SoundJS, and PreloadJS), JQuery, Angular JS, Tumult Hype, Swiffy, GSAP (TweenLite, CSSPlugin, and EasePack).
  •  

Links must reference file locations.

Assets must be loaded securely using https.

Code references to external domains are not permitted (no cross-domain scripting).

Local storage or session storage libraries are not permitted.

CDN calls are not allowed within the creative's HTML file due to security reasons.

 

Technical requirements

  • The maximum zip file size is 150KB.
  • The animation limit for an HTML5 ad is 30 seconds. Looping the animation is not allowed.
  • Use the <!DOCTYPE html><html>, and <body> tags

  • Use the <meta> tags to identify the size of the ad:

    • <meta name="ad.size" content= "width=300, height=250">
  • Declare a clickTag variable. ClickTag is a click-through URL: a shortcut to set the click-through URL in the platform.

    • <script type="text/javascript">
      // Change the value of this string to your URL
      var clickTag = "https://www.adroll.com";
      </script>
    • This must be passed as a parameter to any window.open event in the ad code.

      <div id="clickArea" style="width: 300px; height: 250px" onclick="window.open(clickTag ,'_blank');">

 

Sizes supported

RollWorks Supports the following sizes for HTML5 ads:

0x3 Web Video

200x200 Mid Square

400x80 Email Banner

120x240 Vertical Banner

234x60 Half banner

468x60 Banner

120x60 Tiny Rectangle

250x250 Square

500x100 Email Banner

120x600 Skyscraper

300x100 3:1 Rectangle

728x90 Leaderboard

125x125 Square Button

300x250 Inline Rectangle

88x31 Micro Banner

160x600 Wide Skyscraper

300x600 Half-Page

970x250 Billboard

180x150 Small Rectangle

320x50 Mobile Leaderboard

 

180x60 Rectangular Button

336x280 Large Rectangle

 

 

How to create HTML5 ad creatives

We recommend working with a graphic designer that can satisfy the above requirements to create HTML5 ads. Once you have created your HTML5 ad we recommend using this validator tool to validate the asset.

If you have a contract with RollWorks we can assemble HTML5 ads for you, the amount you can request is limited depending on your package. Click here to learn what creative services we offer by package, including HTML5 ad assembly.

 

How to upload HTML5 ads to RollWorks

You cannot upload HTML5 ads to the RollWorks platform directly. Please contact RollWorks Customer Support via chat or email and we will upload the ads on your behalf.

 

 

 

Was this article helpful?
0 out of 0 found this helpful

Articles in this section

Chat with an agent
Mon - Fri 10am - 6pm EST
Send a support email
Mon - Fri 10am - 6pm EST
Community
Get the latest product news and join other ABM practitioners