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.
In this article, you will learn:
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.
- 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.
|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:
|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:
- Provide a unique Name for the unit, and select Interscroller 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 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."
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:
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|
The position of the ad unit within the container it is served in. The options include: Top, Center, Bottom, and Scrolling.
|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
When checked, the Header Text bar will be displayed
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.