Create a scroll reveal in a code editor – Amazon Ads Help Center

Note

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

Creating an ad using an Amazon Ad Server template

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

Files within the bundle:

README.txt

Amz_ScrollReveal_1_0_1.zip

Amz_ScrollReveal_1_0_1_DCO.zip

Amz_Scroll_Reveal_1_0_1_DCO_Video.zip

Amz_Scroll_Reveal_1_0_1_Video.zip

You can also customize the dimensions according to your requirements. Everything can be personalized, including media controls of the video.

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.	Required
`scripts/script.js`	JavaScript (logic and tracking) for the banner.	Required
`images/backup.jpg`	Fallback image shown in unsupported browsers.	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/styles/style.css`	Style sheet for the banner and its HTML elements.	Optional (if code is included in the HTML file)
`panels/expand/scripts/script.js`	JavaScript (logic and tracking) for the banner.	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 Amazon Ad Server

After you finish creating your ad, proceed to setting up your ad in AAS. For more information, see Set up a scroll reveal.

Additional resources

Prepare for bulk upload

If you are planning to upload multiple ads, make sure that the Ad Creation Wizard in AAS recognizes your workspace as a scroll reveal. Verify that the config.js file contains the following JavaScript:

define({
    "adFormatId": 10324
});

For more information about uploading ads in bulk, see Set up multiple ads using Ad Creation Wizard.

Shared libraries

If you are developing ads with third-party libraries, we recommend that you call these libraries from a CDN (Content Delivery Network) when possible. This will help improve loading time and caching.

Dynamic Creative Optimization

If you need to add Dynamic Creative Optimization (DCO) elements to your creative, see Add dynamic elements to your HTML ads using a code editor.

Advanced configuration

Customize manifest configuration file

The Manifest Configuration file, (config.js) located in the root folder of the workspace, is a metadata file that defines certain default behaviors for the ad. The following table describes the main configuration variables to customize this file.

Variable Name	Type	Description	Default Value
Auto Snap Type (`mdAutoSnapType`)	Integer	0: Snap disabled 1: Only snap upward 2: Only snap downward 3: Snap both upward and downward	3
Bottom Bar Color (`mdBottomBarColor`)	String	Any HTML color name or HTML hex color code.	white
Bottom Bar Height (`mdBottomBarHeight`)	Integer	Height of the bottom text bar in pixels.	20
Bottom Bar Label (`mdBottomBarLabel`)	String	Text in the bottom text bar.	SCROLL TO CONTINUE WITH CONTENT
Bottom Bar Label Style (`mdBottomBarLabelStyle`)	String	CSS style for bottom text bar.	color:grey; font-size:10px; font-family:arial; text-align:center;
Collapse After Scroll Away (`mdCollapseAfterScrollAway`)	Boolean	Determines if ad should be collapsed when scroll away or snap away.	No
Display Bottom Bar (`mdDisplayBottomBar`)	Boolean	Determines if ad should display bottom text bar.	No
Display Top Bar (`mdDisplayTopBar`)	Boolean	Determines if ad should display top text bar.	No
Percentage For Snap In (`mdPercentageForSnapIn`)	Integer	Percentage of the browser height, which the ad must exceed, for the snap in when user scrolls the ad in.	50
Percentage For Snap Out (`mdPercentageForSnapOut`)	Integer	Percentage of the browser height, which the ad must exceed, for the snap out when user scroll the ad away.	75
Top Bar Color (`mdTopBarColor`)	String	Any HTML color name or HTML hex color code.	white
Top Bar Height (`mdTopBarHeight`)	Integer	Height of the top text bar in pixels.	20
Top Bar Label (`mdTopBarLabel`)	String	Text in the top text bar.	ADVERTISEMENT
Top Bar Style (`mdTopBarStyle`)	String	CSS style for top text bar.	color:white; font-size:10px; font-family:arial; text-align:center;
Top Bounding Selector (`mdTopBoundingSelector`)	String	HTML selector for the object to which the ad should snap on the top. For example, a publisher site has a Header or Top Menu that the scroll reveal should not cover. Use this custom variable to declare the Header or Top menu element. If the Header is a `div` with header as its ID, the value would be `div#header`.	null

To change the panel elements and HTML structure, open the following files with your code editor and modify the ad structure, aspect, and behavior.

panels/expand/index.html
panels/script/script.js
panels/css/style.css

Variables

These JavaScropt variables, located in template files, are related to elements in the HTML.

Variable Name	Location	Description
`adContainer` `videoContainer` (Video template only) `video` (Video template only) `clickThroughButtonContainer`	`script.js`	Global variables that define the HTML objects.
`logo` `title` `cta_button` `snap_to_fs_button` `exit_fs_button` `user_action_btn` `overlay_hotspot`	`script.js`	Global variables that define widgets. (Video template only)
`adId` `rnd` `uid` `sdkData` `isMRAID` `sizeCheckerTimer` `isLandscape` `viewportHeight` `viewportWidth` `adWidth` `adHeight` `adTopPercentage` `adBottomPercentage` `adVisiblePercentage`	`script.js`	These variables store values that are necessary for the ad to run properly after the upload to AAS. Important Important: Do not make changes to these variables.

Functions

Function Name	Description
`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.
`initializeVideo`	Initializes the video based on the serving environment and custom variable. Determines how to serve the video object and add video tracking to the video module when possible.
`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.
`handleResize`	Handles the browser resize event. In the template, it calls `positionAdElements` to reposition the ad elements.
`handleBeginFullScreen`	Handles the event when a video enters full screen mode.
`handleEndFullScreen`	Handles the event when a video exits full screen mode.
`handleFullScreenChange`	Handles the event when a video change its state regarding full screen mode. Code handles the issue of the HTML elements positioning when exiting a full screen video player.
`handleKeyDown`	Handles the event when a user presses a key on the keyboard.
`handleWheelScroll`	Handles the event when a user scrolls the page using the mouse wheel.
`handleTouchStart`	Handles touch start event for mobile devices.
`handleTouchEnd`	Handles touch end event for mobile devices.
`snapToFullscreenMode`	Handles the event when a user clicks snap to full screen button.
`exitFullscreenMode`	Handles the event when a user clicks exit full screen button.
`adScrollIn`	Triggered when a user starts to scroll ad into view port.
`adScrollAway`	Triggered when a user starts to scroll ad away from view port.
`adSnapIn`	Triggered after ad snapped in.
`adSnapOut`	Triggered after ad snapped out.
`onPageScroll`	Triggered when a user scrolls the page.
`stopVideo`	Pauses the video. This function also includes an option to rewind the video to the starting point by adding the parameter in the function call. `stopVideo(true)`: Rewinds video. `stopVideo()`: Pauses video.
`adCollapsed`	Triggered when ad is collapsed.
`positionAdElements`	Repositions the ad elements.

Widgets (optional)

scroll reveal supports widgets that will be generated on the placement level when an ad loads. The ad creator can add widgets from the creative level using the Widget function. The following syntax shows how to create a widget.

var [variable_name] = new Widget([widget_properties]);

Example:

logo = new Widget({
  name: "logo",
  top: "10px",
  left: "10px",
  width: "118px",
  height: "53px",
  asset: "panels/expand/images/logo_white.svg"
});

Widget Properties

Property Name	Type	Required	Description
name	String	Required	Property name.
width	String	Required	Widget width in pixels.
height	String	Required	Widget height in pixels.
top	String	Required	Widget position, in pixels, from the top edge of the ad in pixels.
left	String	Required	Widget position, in pixels, from the left edge of the ad in pixels.
bottom	String	Required	Widget position, in pixels, from the bottom edge of the ad in pixels.
right	String	Required	Widget position, in pixels, from the right edge of the ad in pixels.
html	String	Required	HTML code for the widget content.
asset	String	Required	Asset from the Workspace root that acts as widget background.
hover	String	Optional	Asset from Workspace root; will act as a widget background when mousing over the widget.
css	String	Optional	Widget styles.
callback	String	Optional	Adds the function to call when widget is clicked. When an action/callback is added to the widget, it automatically switches the mouse cursor to a pointer, indicating clickable.
inapp	Boolean	Optional	Determines if the widget renders when ad is served In-app. Default is true.
effects	Array	Optional	Array of effect objects of the widget.

Widget effects

A widget can be animated when a user scrolls the page or when an ad is resized. The developer can use a widget effects property to set rules for how to animate the widget.