Rich media ads include advanced features like animations or other elements that encourage viewers to interact and engage with content. They’re typically formatted with HTML5, which allows developers to add animations directly into the source code of a page. They are also often referred to as HTML5 ads.
These ads are like mini web pages and contain multiple files 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.
Note: Flash is no longer supported by AdRoll or any of its partners.
The animation limit for HTML5 ads is 30 seconds. No looping.
Example
Sizes Supported
HTML5 ads are supported only on Web Inventories and here is the list of the recommended ad sizes:
| Type | Size |
| Medium Rectangle | 300 X 250 |
| Half Page | 300 X 600 |
| Wide Skyscraper | 160 X 600 |
| Billboard | 970 X 250 |
| Leaderboard | 728 X 90 |
| Mobile Leaderboard | 320 X 50 |
Mobile ad sizes
Please know that the possibility of showing a certain ad size on mobile depends on the publisher. Some publishers may allow certain sizes on mobile and others don't. The most common mobile ad sizes are 320x50, and 300x250.
Format Guidelines
| Field | Guidelines |
| Supported File Types |
|
| File Size |
|
| Zip compression |
|
| Links |
|
| Secure loading |
|
| Not Permitted |
|
| Animation Limit |
|
Technical Requirements
-
Use the <!DOCTYPE html>, <html>, and <body> tags.
-
<meta> tags must be used to identify the size of an 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');">
-
Create Rich Media Ads
We recommend working with a graphic designer that can satisfy the above requirements to create Rich Media ads. If you don't have a designer, please reach out to your Account Manager to learn what other options are available.
Note: You can find the supported rich media ad sizes here.
Upload Rich Media Ads
Note: This is a managed account feature.
You can upload the rich media ads from the Ad Library tab on your dashboard or directly by Editing an Existing Campaign or while Creating a New Campaign.
All the self-serve account holders may reach out to our Customer Support team for assistance if required.
Custom Rich Media Ads
Our in-house creative team is available to build impactful, on-brand ads. Browse through some of our creative capabilities and designs here.
Note: Spend requirements apply. Please reach out to your Account Manager for more details.
HTML5 Best Practices
- Clear Message: Ensure the message is concise, clear, and tailored to the desired audience. Avoid or minimize using jargon or acronyms where possible.
- Minimal Text: Keep text minimal and focused, delivering the key message efficiently. Maximum character count of 60-70 is recommended.
- Professional Design: Maintain a professional appearance with clean design elements and consistent corporate branding.
- Brand Visibility: Maintain consistent branding throughout the ad for brand recognition.
- Alignment with Landing Page: Ensure the creative messaging and branding aligns with the landing page it directs users to, providing a seamless experience.
- Relevant Imagery: Use high-quality images or graphics relevant to the B2B industry or target audience. Select images with a center focus to allow cropping for different ad sizes.
- Strong Call-to-Action (CTA): Include a clear and compelling CTA that prompts users to take action.
- Compliance with Ad Standards: Adhere to industry standards and guidelines for ad sizes, formats, and file types outlined in this article.
- Subtle Animations: Use animations sparingly and strategically to draw attention to key elements without overwhelming the viewer (simple “build-in” animations where elements slide into place are commonly effective). Avoid animations that are purely decorative and add no value.
- Conservative Timing: Be mindful of animation timing, ensuring that animated elements are on screen long enough for viewers to digest the information but not so long that they become impatient or lose interest.