Note
Note: To learn more about this format, preview a demo, or to see build guides for other authoring tools, see About Sticky Scroller.
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.
The following table describes the list of files that are included in the downloadable template.
File Name |
Description |
Required |
---|---|---|
|
HTML file for the banner. |
Required |
|
Configuration/manifest file for the ad. Used for actions such as default ad settings, and Dynamic Creative. |
Optional |
|
Style sheet for the banner and its HTML elements. |
Optional (if code is included in the HTML file) |
|
Style sheet for desktop panel creative. |
Optional (if code is included in the HTML file) |
|
JavaScript (logic and tracking) for the banner. |
Required |
|
JavaScript (logic and tracking) for the expanded panel of the banner. |
Required |
|
Fallback image shown in unsupported browsers. |
Required |
|
Logo for your ad. |
Required |
|
This folder contains all files related to panel and its creative assets. |
Optional |
|
HTML file for the panel. |
Required |
|
This folder contains the image assets for the scroll panel. |
Optional |
|
Temporary video that you should replace with your own video. |
Required for video format |
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.
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)
-
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.
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 |
---|---|
|
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. |
|
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. |
|
Used to store values that are necessary when running the ad. Do not make changes to these variables. |
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 |
---|---|
|
Checks to see if the AdKit is ready, and then proceeds to initialize creative. |
|
Initiate the close button coresponding to the closing call from MRAID. |
|
Initializes the creative. You can add your own script if you want to run a script when the creative is initialized. |
|
Initializes the global variables for HTML objects. In the template, |
|
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 |
|
Invoked to close the panel, and enable the page scrolling before the ad is collapsed. This function also pauses the video. |
|
Click handler for the click-through button. Calls this function for the default click-through. This function also pauses the video. |
|
Call this function to get ScrollX and ScrollY percentage. |
|
Invoked to change the visibility of the panel. |
|
Called when the panel is completely shrunk down. |
|
Called when the panel is entiely expanded. |
Description |
Default and Accepted Values |
|
---|---|---|
Eye Div ZIndex ( |
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 ( |
Interval amount, in milliseconds, to reposition the panel on expand. |
Default: 0 Accepted: Any positive integer |
ProgEnable ( |
Boolean variable used to enable or disable the format for programmatic functionality. |
Default: false Accepted: true/false |
Prog Settings FolderPath ( |
Path to store the settings file on the server, |
Default: Accepted: Valid server path as a string |
Banner Size Inheritance ( |
Determines whether the banner size inherits from the publisher ad container size or browser width. |
Default: default Accepted:
|
Max Banner Width ( |
Max banner width when |
Default: 500 Accepted: Any positive integer |
Max Banner Height ( |
Max banner height when |
Default: 250 Accepted: Any positive integer |
Adhesion Visibility Timeout ( |
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 ( |
The threshold visibility of the banner to show the sticky panel upon scroll away. |
Default: 0 Accepted: Integer (-1 to 100)
|
Adhesion Width ( |
Determines the width of the sticky panel; multiple values can be entered when in adaptive mode. |
Default: 300 Accepted: Any positive integer |
Adhesion Height ( |
Determines the width of the sticky panel; multiple values can be entered when in adaptive mode. |
Default: 170 Accepted: Any positive integer |
Panel Breakpoints ( |
Sets the breakpoint widths, when using adaptive mode. |
Default: 300 Accepted: Any positive integer |
Adhesion Resize Style ( |
Sets the size of the sticky panel, according to various customizations. |
Default: fixed Accepted:
|
Full Width ( |
Determines whether adhesion panel will be full width. |
Default: No Accepted: Yes/no |
Hide Banner ( |
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 ( |
Transition easing type and duration. |
Default: easeOutCubic, 2000 Accepted: String – easing effect, Duration in milliseconds |
Full Width ( |
If set to Yes, the sticky panel width will be 100% of the viewport width. |
Default: No Accepted: Yes/No |
Panel Anchor ( |
Determines the position the panel will display, when in the sticky state. |
Default: fixed Accepted:
|
Use Animator ( |
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. |
|
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. |
|
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. |
The following sections describes common customizations for the Sticky Scroller.
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 |
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:
|
matchBanner |
Sets a fixed width and height. See the following custom variables:
|
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 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
Click here to preview a demo of Sticky Scroller format.
Comments