Sticky Scroller Ad – Sizmek Help Center

Introduction

Overview

The Sticky Scroller format is comprised of an in-page banner and a “sticky” panel. When the user scrolls the page, and the in-page banner goes outside of the view-port, the sticky panel will animate to and stick to the pre-defined position on the page - set by use of custom variables.

Once in the sticky state, the panel will remain in position until the user scrolls the in-page banner back in view, which will position the sticky panel back to its original position - atop the in-page banner.

Users can close the sticky panel on close button and it will no longer go into the sticky position when scrolling the banner out of view, remaining on it's original in-page position.

If the video template is used, and the video is playing on the page, it will pause when scrolled out of view and resume playing again when scrolled back into view.

Default size of the sticky panel is 300x180, however most customization's will include different dimensions, those can be set using custom variables - mdAdhesionWidth, mdAdhesionHeight.

The Sticky Scroller supports both adaptive and responsive behaviors and can be customized to suite a number of different setting to suite different advertiser needs and publisher requirements.

Sticky Scroller states:
In-page 500x280 Sticky Scroller while in view-port.

As the user scrolls away from the banner unit, a sticky panel will come into view.
The following image shows the sticky panel aligning to the bottom-right corner of the page.

Demos/Downloads

The following table provides links to the templates and demo for the Sticky Scroller format.

Template	StickyScroller_1.1.0_300x168_Video.zip StickyScroller_1.1.0_500x280_Video.zip
Demo	Preview demo

Workspaces Available

WORKSPACE	VIDEO	BANNER DIMENSION	DEFAULT PANEL DIMENSION
CIT_RELEASED_StickyScroller_1.1.0_500x280_Video.zip	Yes	500x280	500x280
CIT_RELEASED_StickyScroller_1.1.0_300x168_Video.zip	Yes	300x168	300x168

HTML

Supported Platforms

Platform	Supported Version
Internet Explorer	11.0 and later
iOS	iOS 10 and later
Android	Android 6 and later
MS Edge	42.X and later
Firefox	Recent versions
Chrome	Recent versions
Safari (Mac)	9.0 and later

Format Properties

Listed below are common properties available to the format.

Feature	Supported
Polite Loading	✓
Safeframe Support	❌
AdKit ready ¹	✓
Secure Serving	✓
Sizmek Advertising Suite Support	✓
Ad Builder Templates Available	❌

¹Allows for DCO Support as well as Additional Assets.

Implementing Sticky Scroller Using Workspaces

The following HTML5 template files are included.

File Name	Description
`index.html`	The banner markup file that is displayed on page.
`panels/expand/index.html`	Panel markup file. Contains all the panel creative assets and script essential to display and support panel functionality.

CSS

The following CSS template files are included.

File Name	Description
`styles/reset.css`	A style sheet that overrides browser default styles.
`styles/style.css`	Style sheet for banner creative.
`panels/expand/styles/style.css`	Style sheet for desktop panel creative.

Scripts

The following JavaScript template files are included.

File Name	Description
`scripts/localPreview.js`	local preview support file.
`scripts/script.js`	Script file for banner to load and initialize banner creative.
`panels/expand/scripts/script.js`	Core script file to panel to load and initialize panel creative.

Images

The following image template files included in the images folder.

File Name	Description
`images/backup.jpg`	backup image for banner.
`images/Sizmek_logo_RGB_White.svg`	logo image
`panels/expand/images/`	logo image

Customizing Banner Assets

To update the layout, design of banner, open index.html file.

index.html

If you want to add additional creative elements other than static images then you need to update index file. The index file holds:

Banner creative assets.
Clickthrough button (90x25).
User Action button (90x25).
Contains a script that is used to initialize the Ad and handles panel Expansion logic(500x280).

Customizing Panel Assets

To update the layout, design of panel, open index.html file located in expand folder.

panels/expand/index.html

If you want to add or remove creative elements then you need to update index file.

This file holds:

Panel creative assets.
Close Button.

Header section of index.html loads essential CSS styles, EBloader scripts file.

panels/expand/script/script.js

This file is a core panel script. It's responsible for initializing panel, and displaying it when all the assets are loaded. With scroll event, the user will get an additional variable with messageData that contains information related to panels view-port area visibility

Variable Name	Description
`scrollYPercent`	Value in percentage, Indicate the Panel vertical visibility related to viewport area.
`scrollXPercent`	Value in percentage, Indicate the Panel horizontal visibility related to viewport area.

Variables

Variable Name	Description
closeButton	Global variable(s) that will be used for defining the HTML objects later. You may add/edit/remove the variable(s) if modifying the HTML objects.
adId, rnd, uid, expansionDiv	These variables use to store values that are necessary when running the ad. Please do NOT make any change to these variables.

Functions

Function Name	Description
checkIfAdKitReady	Check to see if the Adkit is initialized and then proceed to initialize creative.
initializeLocalPreview	This is the function to test ad locally.
initializeCreative	Initialize creative. You may add your own script here if you wish to execute a script when the creative is initialized.
initializeGlobalVariables	This is where we initialize the global variables for HTML objects in the template.
addEventListeners	This is where we add all the event listeners. In the template, we have added the click event to the click through button,
handleClickthroughButtonClick	Call this function for the default click-through in retracted state.
handleCloseButtonClick	Call this function to close the default panel.
onPageScroll	Call this function to get ScrollX and ScrollY percent

Custom Variables

MDX	DESCRIPTION	DEFAULT VALUE	ACCEPTED VALUES
mdEyeDivZIndex (Eye Div ZIndex)	Dynamically set eyeDiv (panel container) z-index through this variable, default is undefined so no changes will happen to eyeDiv (panel container) z-Index	undefined	any integer (positive or negative)
mdAutoRepositionInterval (Auto Reposition Interval)	Interval amount in milliseconds to reposition the panel on expand	0	any positive integer
mdIsDomainConfigEnabled (ProgEnable)	Boolean variable used to enable or disable the format for programmatic functionality.	false	true / false
mdProgSettingsFolderPath (Prog Settings Folder Path)	path to store the settings file on the server	"//services.serving-sys.com/programmatic/DomainList/"	Valid server path as a string
mdBannerSizeInheritance (Banner Size Inheritance)	Option for making banner size inherite from the publisher ad container size or browser width.	default	default, publisherContainerSize, browserWidth.
mdMaxBannerWidth (Max Banner Width)	Max banner width when mdBannerSizeInheritance set to publisherContainerSize	500	any positive integer
mdMaxBannerHeight (Max Banner Height)	Max banner height when mdBannerSizeInheritance set to publisherContainerSize.	250	any positive integer
mdAdhesionVisibilityTimeout (Adhesion Visibility Timeout)	This will determine the amount of time in milliseconds the adesion panel will be visible if the user does not interact with the ad.	0	Number in Milliseconds
mdVisibilityThreshold (Visibility Threshold)	The threshold visibility of the banner to show the sticky panel upon scroll away	0	integer (-1 to 100) -1 will always displays the stickey panel 100 will always show the banner
mdAdhesionWidth (Adhesion Width)	This variable is used to determine the width of the sticky panel , multiple values can be entered when in adaptive mode	300	any positive integer numbers
mdAdhesionHeight (Adhesion Height)	This variable is used to determine the width of the sticky panel , multiple values can be entered when in adaptive mode	170	any positive integer numbers
mdPanelBreakpoints (Panel Breakpoints)	Set the breakpoint widths. When using adaptive mode	300	any positive integer numbers
mdAdhesionResizeStyle (Adhesion Resize Style)	Set the size of the sticky panel accorindg to various customizations	fixed	Fixed,adapative, matchBanner, css selector
mdFullWidth (Full Width)	Adhesion panel will be full width	No	Yes / no
mdHideBanner (Hide Banner)	Hide then banner from view, the panel will display instead in the banner position	Yes	Yes /no
mdTransitionEffect (Transition Effect)	Transition easing type and duration	easeOutCubic, 2000	String – easing effect , duration in milliseconds
mdFullWidth (FullWidth)	if set to true the sticky panel width will be 100% of the viewport width	No	Yes/No
mdPanelAnchor (Panel Anchor)	position where the panel will display when in the sticky state	fixed	default, CSS Selector, pixel values percentage values fixed positions
mdUseAnimator (Use Animator)	use built-In client Animator	false	setting to true will use the built in client animator functionality istead of then the custom script.
mdParentLevelsToResize	Only applied when serving default image. Affects the number of levels of parent elements to resize to the default image size.	0	Set the parent level.
mdBackupImgPath	Relative path to the backup image, if a custom image is desired. This allows a fallback experience to display an image that is not a 320x50 even though the tag is a 320x50 tag. Template workspace includes a file that could be used here as an example, if this custom var were set to "images/970x250_Default.jpg"	undefined	Valid image path

Customizing the Sticky Scroller

Common Customizations

Placement of the sticky panel

Setting the mdPanelAnchor custom variable determines the placement of the sticky panel.
The panel can be placed by using the following fixed locations:

Description	Usage
Fixed to bottom left (Viewport Relative)	bottom-left
Fixed to bottom right (Viewport Relative)	bottom-right
Fixed to bottom center (Viewport Relative)	bottom-center
Fixed to top left (Viewport Relative)	top-left
Fixed to top right (Viewport Relative)	top-right
Fixed to top center (Viewport Relative)	top-center
fixed pixel location (Viewport Relative)	100px,100px
Fixed percentage (Viewport Relative)	50%,50%
Fixed to page element using CSS selector (Page relative)	#headline

Setting size of the sticky panel and adaptive and responsive behavior

Setting the mdAdhesionResizeStyle custom variable determines the way the sticky panel will be sized according to the following options.

Description	Usage
Sets the sticky panel to the size of the Banner	matchBanner
Sets the size of the sticky panel according adaptive window size determined by breakpoints. See: mdPanelBreakpoints, mdAdhesionWidth, mdAdhesionHeight	adaptive
Sets fixed width and height See: mdAdhesionWidth mdAdhesionHeight	fixed
Sets dimensions of sticky panel to the size of an element on the page using CSS Selector	CSS selector (eg. #headline)
Sets the Adhesion panel width to 300px and the Adhesion panel height to 180px	default

Setting the mdFullWidth custom variable will set the width of the sticky panel to the width of the browser window. If used in conjunction with mdAdhesionResizeStyle = adaptive, the height breakpoints will still be respected.

Setting the Transition effect and duration

Setting the custom variable mdTransitionEffect with 2 values, the first value is the transion the second value is the duration in milliseconds.

Setting mdTransitionEffect to easeOutCubic , 2000

This will animate the sticky panel using the easeOutCubic transition and will be done in 2000 miliseconds.
The full list of available transitions are available on http://easings.net/

If the mdUseAnimator custom variable is set to true, the following CSS easing methods can be used in the mdTransitionEffect custom variable:

ease
linear
ease-in
ease-out
ease-in-out

Starting the Ad in the StickyPanel state

Setting the mdVisibilityThreshold custom variable to -1 will start the ad experience from the Sticky Panel state.

Setting up the Sticky Scroller in the Sizmek platform

Sizmek MDX setup

Archive the Sticky Scroller workspaces into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
In the Sizmek MDX, under Creative Assets, create new Workspace by uploading the ZIP file.
Under the Ads section, create ad use the workspace you have uploaded.
Set Ad Format to Sticky Scroller and fill out the form.
Note: On the Sizmek Platform, your user account will need access to the Sticky Scroller format in the list of available custom formats. If you do not have access to this format, please reach out to Support to gain permissions for this format

Add the panel to the Panels List. Choose the index.html file in the ‘panels/expand’ folder as the Creative Asset. Set the Dimensions to “500x280”, or whatever dimensions are required by your publisher. Set “Auto Retract When” to “Never” and “Position Type” to “Banner Relative”.
Save the Ad.
Under the Advanced Features section, customize the Variables to your needs.
Create a new placement for the Ad.
Fill out the form. Set the Placement type to In Banner and the Banner size to 500x280.
After you’ve saved your placement, you can then generate preview tags to test on your web site.

Custom Script Notice:

Since the Time Sticky Scroller format is a HTML5 Custom Format, there is no need to attach a custom script since the appropriate one will be pulled in automatically. For reference, the following custom script is being used:

PL_StickyScroller.js

Sizmek Advertising Suite Setup

Archive the workspace into a new ZIP file, preserving the directory structure. You can do this with

WinZip, 7Zip, or another archiving program.
Click Creative > Asset Library, Upload your Workspace the chosen folder.
Click Creative > Ads and click the New Ad and select Blank Ad.
Select the workspace location and all the details will be auto filled.
Under the Advanced Features section, customize the Variables to your needs.
Create a new placement for the Ad.
Fill out the form. Set the Placement type to In Banner and the Banner size to 500x280
After you’ve saved your placement, you can then generate preview tags to test on your web site.