Interscroller

A nonintrusive, automatically responsive, in-feed unit which scrolls into view as a user scrolls through the page content, delivering rich, highly-impactful brand experiences.

download-template

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 Interscroller unit sizing based on target devices

How to build a Interscroller unit

How to configure the Interscroller units properties

Best practices for trafficking Interscroller units


Best practices for Interscroller unit sizing based on target devices

Below you will find guidance on sizing your Interscroller units for maximum interoperability across devices and platforms.  

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

Recommended Background Sizing

Background overflow is an integral part of the Interscroller'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 1080 px 1920 px
Desktop 2560 px 1440 px


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 Interscroller settings panel. The following sizes are recommendations only for the 'Safe Area' for each device type:

Device Type Width Height
Mobile 960 px 1420 px
Desktop 1366 px 768 px

Best practices for trafficking Interscroller units

Below you will find some guidance on trafficking Interscroller units in your 1st party ad server for maximum interpretability between devices:

  • The Interscroller format assumes that the window containing the page is scrollable.
  • When trafficking a Interscroller, it should always be placed inline or so that a user needs to scroll down through content to reach the ad.
  • The Interscroller 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 Interscroller unit

Below you will find a step-by-step process to build a desktop Interscroller unit.  The steps below, combine with the recommended sizing charts above are similar when building mobile or tablet specific Interscroller units:

  1. Provide a unique Name for the unit, and select Interscroller 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 Interscroller 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 Interscroller units properties

The Interscroller properties configuration options are explained below:

Interscroller Area

The area of the ad that you want to the Interscroller (expressed in % or pixels) to display (e.g 100% = Full Screen Interscroller ; 50% = Half Screen)

% Area Of % of the Interscroller area refers to the entire screen height, or the height of the ad itself 
Extra Padding allows you to add padding to the Interscroller 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% Interscroller minus the amount of pixels for padding would allow for your other unit/adhesion to not conflict on the site with this Interscroller 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, and Scrolling.

When selected, Scrolling, forces the ad unit to transition in from the bottom of the browser window and once fully in view, will scroll with the page.  Upon reaching the top of the page, the unit will transition out.

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
Responsive Height When checked, the size of the Interscroller will automatically adjust to fit the height of the browser window.  When used in conjunction with the responsive screen setting, the ad unit will automatically resize to fit the width and height of the browser window.

 

Previewing the Interscroller Unit

To preview the Interscroller unit you have just created, follow the instructions in this article.