Submit a request
PRODUCT
Privacy Policy  |  Terms of Use  |  Cookie Preference
Follow
Last Update:
  viewable by end users
  editable by agents

Note

Note: To learn more about this format, preview a demo, or to see build guides for other authoring tools, see About Sticky Scroller.

Create an Ad Using a Sizmek Ad Suite Template

When creating a Sticky Scroller in a code editor, it is recommended that you start with our official template bundle.

Files within the Bundle:

README.txt

Amz_StickyScroller_1_0_0_Video.zip

Amz_StickyScroller_1_0_0_Video_DCO.zip

Download the template and then select the desired folder from the list of available dimensions and options.

You can customize the dimensions according to your requirements. In addition, you can customize the panel, by using the mdAdhesionWidth and mdAdhesionHeight variables.

Included Files

The following table describes the list of files that are included in the downloadable template.

File Name

Description

Required

index.html

HTML file for the banner.

Required

config.js

Configuration/manifest file for the ad. Used for actions such as default ad settings, and Dynamic Creative.

Optional

styles/style.css

Style sheet for the banner and its HTML elements.

Optional (if code is included in the HTML file)

panels/expand/styles/style.css

Style sheet for desktop panel creative.

Optional (if code is included in the HTML file)

scripts/script.js

JavaScript (logic and tracking) for the banner.

Required

panels/expand/scripts/script.js

JavaScript (logic and tracking) for the expanded panel of the banner.

Required

images/backup.jpg

Fallback image shown in unsupported browsers.

Required

images/logo.png

Logo for your ad.

Required

panels/expand/

This folder contains all files related to panel and its creative assets.

Optional

panels/expand/index.html

HTML file for the panel.

Required

panels/expand/images

This folder contains the image assets for the scroll panel.

Optional

panels/expand/videos/video.mp4

Temporary video that you should replace with your own video.

Required for video format

Setting up Your Ad in Sizmek Ad Suite

After you finish creating your ad, proceed to setting up your ad in SAS. For more information, see Set up a Sticky Scroller.

The config.js file includes the manifest ad data. This file contains metadata used to configure the ad in SAS during the upload. For more information about the manifest files, see Manifest Ad Data.

Additional Resources

Customize Banner Assets

You can update the layout and design of the banner, and add creative elements other than static images in the index.html file.

The index.html file includes the following:

  • Banner creative assets

  • Script that is used to initialize the ad and handles panel expansion logic (500 x 280)

Customize Panel Assets

  • You can update the layout and design of the panel in the expand folder located in the index.html file, panels/expand/index.html.

  • To add or remove creative elements, update the index.html file.

The panels/expand/index.html includes the following:

  • Panel creative assets

  • Close button

  • User action button

  • Click-through button

  • Script that is used to handles panel expansion logic

The Header section of the index.html loads essential CSS styles, and the EBloader scripts file, panels/expand/script/script.js. This file is a core panel script, and is responsible for initializing the panel, and displaying it when all of the assets are loaded.

With the scroll event, the user will get an additional variable with messageData that contains information related to the panel's viewport area visibility.

Variables

The following tables provide additional variables that are available for this format. You can use these additional items to fully customize your ad.

Variable Name

Description

scrollPos

Indicates the panel's vertical and horizontal visibility related to viewport area.It has properties of 'x' and 'y'. The values are in a percentage.

closeButton

Global variables that are used for defining the HTML objects later.

You can add/edit/remove the variables if modifying the HTML objects. You can use this variable to control the display of the Close button in MRAID, where a Close button is already present by default.

  • adId

  • rnd

  • uid

  • sdkData

  • expansionDiv

Used to store values that are necessary when running the ad. Do not make changes to these variables.

Functions

The following table provides additional functions that are available for this format. You can use these additional items to fully customize your ad.

Function Name

Description

checkIfAdKitReady

Checks to see if the AdKit is ready, and then proceeds to initialize creative.

initializeCloseButton

Initiate the close button coresponding to the closing call from MRAID.

initializeCreative

Initializes the creative.

You can add your own script if you want to run a script when the creative is initialized.

initializeGlobalVariables

Initializes the global variables for HTML objects. In the template, positionAdElements is also called to position the ad elements.

addEventListeners

Adds all of the event listeners. In the template, the click event for the click-through and user action counter was added. In addition, the webkitendfullscreen event listener for iOS devices was added in order to handle some positioning issues when exiting the full screen video player.

handleCloseButtonClick

Invoked to close the panel, and enable the page scrolling before the ad is collapsed. This function also pauses the video.

handleClickthroughButtonClick

Click handler for the click-through button. Calls this function for the default click-through. This function also pauses the video.

onPageScroll

Call this function to get ScrollX and ScrollY percentage.

visibilityState

Invoked to change the visibility of the panel.

animationStarted

Called when the panel is completely shrunk down.

animationComplete

Called when the panel is entiely expanded.

Custom Variables

Variable Name in SAS

(Variable Key in config.js)

Description

Default and Accepted Values

Eye Div ZIndex

(mdEyeDivZIndex)

Sets eyeDiv (panel container) z-index dynamically.

Default is undefined, meaning, there are no changes to eyeDiv (panel container) z-Index.

Default: Undefined

Accepted: Any integer (positive or negative)

Auto Reposition Interval

(mdAutoRepositionInterval)

Interval amount, in milliseconds, to reposition the panel on expand.

Default: 0

Accepted: Any positive integer

ProgEnable

(mdIsDomainConfigEnabled)

Boolean variable used to enable or disable the format for programmatic functionality.

Default: false

Accepted: true/false

Prog Settings FolderPath

(mdProgSettingsFolderPath)

Path to store the settings file on the server,

Default: //services.serving-sys.com/programmatic/DomainList/

Accepted: Valid server path as a string

Banner Size Inheritance

(mdBannerSizeInheritance)

Determines whether the banner size inherits from the publisher ad container size or browser width.

Default: default

Accepted:

  • default

  • publisherContainerSize

  • browserWidth

Max Banner Width

(mdMaxBannerWidth)

Max banner width when mdBannerSizeInheritance is set to publisherContainerSize.

Default: 500

Accepted: Any positive integer

Max Banner Height

(mdMaxBannerHeight)

Max banner height when mdBannerSizeInheritance set to publisherContainerSize.

Default: 250

Accepted: Any positive integer

Adhesion Visibility Timeout

(mdAdhesionVisibilityTimeout)

Determines the amount of time, in milliseconds, the adhesion panel is visible if the user does not interact with the ad.

Default: 0

Accepted: Number in Milliseconds

Visibility Threshold

(mdVisibilityThreshold)

The threshold visibility of the banner to show the sticky panel upon scroll away.

Default: 0

Accepted: Integer (-1 to 100)

  • -1 will always displays the sticky panel

  • 100 will always show the banner

Adhesion Width

(mdAdhesionWidth)

Determines the width of the sticky panel; multiple values can be entered when in adaptive mode.

Default: 300

Accepted: Any positive integer

Adhesion Height

(mdAdhesionHeight)

Determines the width of the sticky panel; multiple values can be entered when in adaptive mode.

Default: 170

Accepted: Any positive integer

Panel Breakpoints

(mdPanelBreakpoints)

Sets the breakpoint widths, when using adaptive mode.

Default: 300

Accepted: Any positive integer

Adhesion Resize Style

(mdAdhesionResizeStyle)

Sets the size of the sticky panel, according to various customizations.

Default: fixed

Accepted:

  • fixed

  • adapative

  • matchBanner

  • css selector

Full Width

(mdFullWidth)

Determines whether adhesion panel will be full width.

Default: No

Accepted: Yes/no

Hide Banner

(mdHideBanner)

Determines whether to hide the banner from view. If set to Yes, the panel will display in the banner position.

Default: Yes

Accepted: Yes/no

Transition Effect

(mdTransitionEffect)

Transition easing type and duration.

Default: easeOutCubic, 2000

Accepted: String – easing effect, Duration in milliseconds

Full Width

(mdFullWidth)

If set to Yes, the sticky panel width will be 100% of the viewport width.

Default: No

Accepted: Yes/No

Panel Anchor

(mdPanelAnchor)

Determines the position the panel will display, when in the sticky state.

Default: fixed

Accepted:

  • Default

  • CSS Selector

  • pixel values

  • fixed positions

Use Animator

(mdUseAnimator)

Determines whether to use the built-In client animator.

Default: false

Accepted: Setting to true will use the built in client animator functionality instead of then the custom script.

mdParentLevelsToResize

This variable is only used when the ad is serving a default image.

When set to any value over 0, the number of publisher parent elements of our tag resizes to the default image size, if they are smaller than the default image serving.

Default: 0

Accepted: 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 320 x 50, even though the tag is a 320 x 50 tag.

For example, if this custom variable is set to images/970x250_Default.jpg, a file will attempt to load from the images folder. You must be sure this file exists in the Workspace.

Default: Undefined

Accepted: Valid relative path to an image resource.

Customizing the Sticky Scroller

The following sections describes common customizations for the Sticky Scroller.

Placement of the Sticky Panel

Setting the mdPanelAnchor custom variable determines the placement of the sticky panel. This table describes the various fixed locations for panel placement.

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

Set the Size of the Sticky Panel, and Adaptive and Responsive Behavior

Setting the mdAdhesionResizeStyle custom variable determines the way in which the sticky panel will be sized. This table describes the 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 the following custom variables:

  • mdPanelBreakpoints

  • mdAdhesionWidth

  • mdAdhesionHeight

matchBanner

Sets a fixed width and height.

See the following custom variables:

  • mdAdhesionWidth

  • mdAdhesionHeight

fixed

Sets the dimensions of the sticky panel to the size of an element on the page.

CSS selector (for example, #headline)

Sets the adhesion panel width to 300 px and the adhesion panel height to 180 px

default

Setting the mdFullWidth custom variable sets 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.

Set the Transition Effect and Duration

Set the custom variable mdTransitionEffect with two values:

  • The first value is the transition.

  • The second value is the duration, in milliseconds.

For example, setting mdTransitionEffect to easeOutCubic , 2000 uses the easeOutCubic transition to animate the sticky panel. This transition will finish in 2000 miliseconds. For a complete list of transitions, click here.

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

Start the Ad in the Sticky Panel State

Setting the mdVisibilityThreshold custom variable to -1 starts the ad experience from the sticky panel state.

Demo

Click here to preview a demo of Sticky Scroller format.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments