Reveal (Interscroller)

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 build a Reveal unit

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:

  1. Provide a unique Name for the unit, and select Reveal from the Format dropdown
  2. Select the pre-populated Desktop option from the Dimensions dropdown (or select Custom to create your own)
  3. Backup Image (Optional) and Click URL (Optional) may be left blank at this time, click Submit.

new-desktop-reveal

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."

builder-reveal

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.