A nonintrusive, automatically responsive, in-feed unit which scrolls into view as a user scrolls through the page content.
Resources:
Download our PSD templates for this format
Explore our Ad Gallery for examples of this format
In this article, you will learn:
Best practices for Reveal unit sizing based on target devices
How to configure the Reveal units properties
Best practices for trafficking Reveal units
Best practices for Reveal unit sizing based on target devices
Below you will find some guidance on sizing your reveal units for maximum interoperability across devices and platforms.
Our Build Tips
- If trafficking on mobile devices, build an ad based on the smallest device you may target
- Background overflow should be used to fill the full ad container on larger devices
- If you are utilizing background overflow, leave the responsive option unchecked
Our Recommended Background Sizing
Background overflow is an integral part of the Reveal's impact and should always be used to fill the full placement area on larger devices.
The following sizes are recommendations only.
Adventive always recommends testing your units on live pages prior to trafficking a campaign when possible.
| Device Type | Width | Height |
| Mobile (Phone) | 736 px | 736 px |
| Tablet (iPad, Surface, etc) | 1024 px | 1024 px |
| Desktop | 2560 px | 1440 px |
Our Recommended 'Safe Area' Sizing
'Safe Area' is the area in which all important content should be contained to, to ensure that it is visible on all devices. You can checkout the 'Safe Area' and how your content aligns to it by toggling the 'Safe Area' checkbox in the Reveal settings panel. The following sizes are recommendations only for the 'Safe Area' for each device type:
| Device Type | Width | Height |
| Mobile (Phone) | 320 px | 488 px |
| Tablet (iPad, Surface, etc) | 768 px | 988 px |
| Desktop | 1230 px | 560 px |
Best practices for trafficking Reveal units
Below you will find some guidance on trafficking reveal units in your 1st party ad server for maximum interpretability between devices:
- The Reveal format assumes that the window containing the page is scrollable.
- When trafficking a Reveal, it should always be placed inline or so that a user needs to scroll down through content to reach the ad.
- The Reveal format can only be trafficked in a Friendly iFrame
- When trafficking in DFP / GAM - ensure that "Serve in SafeFrames" is unchecked.
See our article about Delivery Groups to read about serving multiple scroller units in a responsive delivery group which can target multiple devices with a single tag
How to build a Reveal unit
Below you will find a step-by-step process to build a desktop reveal unit. The steps below, combine with the recommended sizing charts above are similar when building mobile or tablet specific Reveal units:
- Provide a unique Name for the unit, and select Reveal from the Format dropdown
- Select the pre-populated Desktop option from the Dimensions dropdown (or select Custom to create your own)
- Backup Image (Optional) and Click URL (Optional) may be left blank at this time, click Submit.
Configuring the canvas
The builder will now load the main Reveal canvas based on the recommended sizes listed above, or the custom sizes you have inputted in step #2.
The "white" section in the below example is consider the "Safe Area" where the most important content should reside. Place your background image on the stage (overflow is fine), then ensure that the text/content are within the "Safe Area."
Configuring the General Ad Properties
Modifications can easily be made to the general ad configuration using the General Ad Properties panel on the right-hand side of the builder window. See this article for instructions on configuring the General Ad Properties.
How to configure the Reveal units properties
The Reveal properties configuration options are explained below:
| Reveal Area |
The area of the ad that you want to the Reveal (expressed in % or pixels) to display (e.g 100% = Full Screen Reveal ; 50% = Half Screen) |
| % Area Of | % of the reveal area refers to the entire screen height, or the height of the ad itself |
| Extra Padding | allows you to add padding to the Reveal unit (i.e. in the instance you plan to also run an Adhesion at the bottom of your site at the same time - this would allow you to set the amount of pixels for padding so your 100% Reveal minus the amount of pixels for padding would allow for your other unit/adhesion to not conflict on the site with this reveal unit) |
| Show "Safe Area" |
When checked, the Safe Area overlay will be visible to aid in creative placement. |
| Safe Area Width | Overrides the default Safe Area Width |
| Safe Area Height | Overrides the default Safe Area Height |
| Position |
The position of the ad unit within the container it is served in. The options include: Top, Center, Bottom |
| Content Background Color |
The background color that will be displayed in the event you (a) do not have background imager, or (b) the background image does not fill the entire placement area on larger devices |
| Show Header |
When checked, the Header Text bar will be displayed |
| Header Text |
The Header Text that will be displayed in the ad header text bar. By default, this is set to "ADVERTISEMENT" |
| Show Header Shadow |
When checked, a Shadow will appear under the Header Text bar. |
| Header Background Color | The background color of the Header Text bar |
| Header Font Color | The font color of the Header Text |
| Show Footer | When checked, the Footer Text bar will be displayed |
| Footer Text | The Footer Text that will be displayed in the ad footer text bar. By default, this is set to "SCROLL TO CONTINUE WITH CONTENT" |
| Show Footer Shadow | When checked, a Shadow will appear under the Footer Text bar. |
| Footer Background Color | The background color of the Footer Text bar |
| Footer Font Color | The font color of the Footer Text |
Previewing the Reveal Unit
To preview the Reveal unit you have just created, follow the instructions in this article.