Rich Media (HTML5) Web Ads Guide

What are Rich Media (HTML5) Web Ads?

Rich media Ads, also known as HTML5 Ads include advanced features like animations or other elements that encourage viewers to interact and engage with content. Rich Media ads are formatted using HTML5, 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 Flash, which is no longer supported by RollWorks or any of its partners.

Picture1.gif

 

What are the Zip file requirements for Rich Media (HTML5) Ads?

Check.png 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)

Check.png Links must reference file locations

Check.png Assets must be loaded securely using https

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

Ex.png Local storage or session storage libraries are not permitted

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

 

What are the technical requirements for HTML5 Rich Media Ads?

  • The maximum 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');">

 

What sizes are supported for Rich Media (HTML5) Ads?

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 do I create Rich Media (HTML5) Ads?

We recommend working with a graphic designer that can satisfy the above requirements to create Rich Media (HTML5) Ads. Once you have created your Rich Media (HTML5) Ad you can use this tool to validate the asset.

 

How do I upload Rich Media (HTML5) Ads to RollWorks?

Uploading your Rich Media Ads via the RollWorks platform is not available at this time. Please reach out to the Customer Support team for help uploading your Rich Media Ads.

 

 

 

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