Scroller Reveal Ad Format

The Reveal Scroller ad format is a non-intrusive, in-feed ad unit, scrolling into view as a user scrolls through content (inline, in-feed).  This format is automatically responsive and can include video, slideshows or other rich components

Note, we recommend testing prior to your first campaign as page placement may require adjustments to your Scroller Reveal units.  Please also see helpful sizing and creative tips below.

This article will walk you through creating a reveal unit using Adventive’s Reveal template.

Example Demos:

• In Article Desktop
• Header Reveal
• In Article Tablet
• Mobile (50% reveal area selected)
• Mobile (100% reveal area selected)
• Mobile Example 2 (100% reveal area selected)
• Video Reveal

Helpful sizing tips (Best Practices)

• If you are trafficking on mobile devices, build a creative based on the smallest device that you might target.
• Background overflow can be used to fill the full ad container on larger devices
• If setting the Reveal unit up for desktop - it's recommended to target directly to that container on site
• Leave Responsive option unchecked if you are utilizing overflow

• Mobile - 736w x 736h
• Tablet: - 1024w x 1024h
• Desktop - 2560w x 1440h

• Mobile - 320w x 488h
• Tablet - 768w x 988h
• Desktop - 1230w x 560h

Reveal Ad Unit

Desktop Example:

In the Builder, Create a New File, type in File Name, and select Reveal from the dropdown. 

Select Pre-populated ad dimensions for Desktop, Tablet, Mobile, or click custom to enter your own.

Backup Image – Any image asset that matches the dimensions you’ve entered will be displayed in the dropdown list. You can select one here or add a backup in the builder under general properties in the “Fallback Image” field.  This Backup Image will be displayed if the user’s browser is out of date and cannot support HTML5.

Click URL – The default click URL. The click URL is automatically applied to any area of the ad unit without an associated click or event action (i.e. buttons, hitboxes, expand actions etc.). Users that click on the fallback image will also be directed to this URL.

Click Submit.

Setting Up Your Canvas
A Purple canvas will load onto the screen with a White Safe Area showing in the middle. 
You will place your background image on the purple canvas, then your text/content within the white safe area.

Ad Properties (In the Properties panel to the right of the Builder)

Width and Height
The Width and Height of your canvas will be the sizes you chose from the Create New File template. You can change these at any time by clicking into the field boxes.

Transparency
Opacity of the ad canvas

Responsive Screen
Selecting this option will automatically scale the ad screen to the size of the user’s browser both width and height - in these examples we will leave Responsive unchecked.

Ad Name
Click to change or update the name of your ad

Default Click URL
Click to change or update the default click URL
UPDATE:  You can now choose to have the Default Url open in a “New Tab” or the “Same Tab” by clicking on the dropdown arrow next to the “Open In” field in General Properties

Fallback Image
Click to add or update your fallback image. This will open your assets, displaying only images that are identically sized to the initial load screen dimensions of your ad unit.

Reveal Settings:

• Reveal Area – choose the % or pixel area of the screen that you want the reveal ad to display (i.e., 100%-full screen reveal, 50%-half of the screen will show the reveal, etc.)
• 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 - this is checked as a default so you can see the purple canvas and the white safe area.  If unchecked you will just see the full sized white canvas.  The Width and Height Safe Area Field default settings are based on the dimensions/device you chose when creating the file.  You can click into the fields and change if needed - however, keep in mind the best practice sizes listed at the top of this article.
• Position - choose top, center, or bottom from the dropdown
  Top - positions the unit at the top of the container
  Center - positions the unit in the center of the container
  Bottom - positions the unit at the bottom of the container
• Content Background Color - click in the box to add a background color (i.e. in case your background overflow image doesn't fill the full placement area on larger devices)
• Show Header – select if you want a reveal header
• Header Text – click in the field to change the default “Advertisement” and type in new text for your Header area
• Show Header Shadow – select to add a shadow under the header area for it to appear raised above the content
• Header Background Color – click in the box to change the header background color
• Header Font Color – click in the box to change the header font color
• Show Footer – select if you want a reveal footer
• Footer Text – click in the field to change the default “Scroll to Continue with Content” and type in new text for the Footer
• Show Footer Shadow – select to add a shadow above the footer area for it to appear raised above the content
• Footer Background Color – click in the box to change the footer background color
• Footer Font Color – click in the box to change the footer font color

Add Assets

Click on the Asset icon  and select or upload your asset.  See top of article for Asset Best Practices per device.

You can also add any other elements to the ad using the Tools/Components like Video, etc.

Desktop Build Example:

Upload a 2560x1440 Background image and a 1230x560 asset with important logo/text and center it in the White Safe Area:

*  Leave Responsive Unchecked in General Properties.

Desktop Reveal Settings Example:

As an example - we will change the Reveal Area of this Desktop unit to be 400px in height (click on the arrow next to the field to change from percentage to px):

For this example, we will leave the Position as Center as we will plan on serving it In-Article (middle container area) but we will uncheck the Header Text and Footer Text to make it more streamline (up to you as a publisher):

Save the ad.

Go to the Preview icon  to view your ad. (Adjust by dragging your browser in/up to see the reveal).

* A new previewer for Reveal is coming!  For now, it is best to set up the unit in a campaign, export a tag and traffic to the container you plan to run the unit in on your test site.

You can go back into the build, edit your settings and Save, then Republish the unit in the campaign (without exporting a new tag) and you should see your edits live on your test site within a few minutes.

Mobile Build Example:

In the Builder, Create a New File, type in File Name, and select Reveal from the dropdown. 

Leave the pre-populated ad dimensions for Mobile selected, or click custom to enter your own.

Backup Image – Any image asset that matches the dimensions you’ve entered will be displayed in the dropdown list. You can select one here or add a backup in the builder under general properties in the “Fallback Image” field.  This Backup Image will be displayed if the user’s browser is out of date and cannot support HTML5.

Click URL – The default click URL. The click URL is automatically applied to any area of the ad unit without an associated click or event action (i.e. buttons, hitboxes, expand actions etc.). Users that click on the fallback image will also be directed to this URL.

Click Submit.

Setting Up Your Canvas
A Purple canvas will load onto the screen with a White Safe Area showing in the middle. 
You will place your background image on the purple canvas, then your text/content within the white safe area.

Upload a 736x736 Background image and a 320x488 transparent asset with important logo/text:

Center the transparent asset over the White Safe Area:

* Leave Responsive Unchecked in General Properties.

Mobile Reveal Settings Example:

Default Reveal settings:

As an example - we will change the Reveal Area of this Mobile unit to be 50% (click into the field to change the % - or click on the arrow to change in px):

Save the ad.

Go to the Preview icon  to view your ad. (Adjust by dragging your browser in/up to see the reveal).

* A new previewer for Reveal is coming!  For now, it is best to set up the unit in a campaign, export a tag and traffic to the container you plan to run the unit in on your test site.

You can go back into the build, edit your settings and Save, then Republish the unit in the campaign (without exporting a new tag) and you should see your edits live on your test site within a few minutes.

As an 2nd Mobile example - we will change the Reveal Area back to 100% (click into the field to change the %):

 Save the ad.

Go to the Preview icon  to view your ad. (Adjust by dragging your browser in/up to see the reveal).