PRODUCT
Follow

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 a Sizmek Ad Suite Template

When creating a Scroll Reveal in a code editor, it is recommended that you start with our official template.

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

scripts/localPreview.js

Script that enables local preview of the ad.

Does not need to be uploaded

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/reset.css

Resets the native styles of the browser so that the ad can look as intended.

Optional

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 Sizmek Ad Suite

After you finish creating your ad, proceed to setting up your ad in SAS. 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 SAS 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 3rd 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

  • clickThroughButtonContainer

  • closeButton

script.js

Global variables that define the HTML objects. (Video template only)

  • logo

  • cta_button

  • snap_to_fs_button

  • exit_fs_button

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 SAS.

Important

Important: Do not make changes to these variables.

Functions

Function Name

Description

checkIfAdKitReady

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

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.

Example:

effects: [
  {
    on: "scroll",
    changeProperty: "left",
    changeFrom: "-20%",
    changeTo: "90%"
  }
]

Effect Property Name

Type

Required

Description

on

String

Required

Determines when effect should happen. Available options include:

scrollFrom

Integer

Optional

Percentage of the scrolling when the effect starts. Default is 0. Only valid when on is set to scroll.

scrollTo

Integer

Optional

Percentage of the scrolling when effect ends. Default is 100. Only valid when on is set to scroll.

changeProperty

String

Required

CSS property to be changed.

changeFrom

String

Optional

Value of CSS property when change started, in pixels or %. Will use changeTo value if changeFrom is not specified.

changeTo

String

Required

Value of CSS property when change ended.

minChangeTo

String

Optional

Minimum changeTo value in pixels.

maxChangeTo

String

Optional

Maximum changeTo value in pixels.

width

String

Optional

Determines what to use for the width if changeproperty set to height.

height

String

Optional

Determines what to use for the width if changeproperty set to width.

animation

Object

Optional

Overrides the animation properties. By default, the animation easing type is ease-out and animation duration is 1.25 second. The developer can use the following code to override the default properties:

animation: {
 duration: 0.5,
 easing: "ease-in-out"
}

Animation property takes standard CSS transition properties.

Widget Methods

Method Name

Description

show

Show widget. Example: logo.show();

hide

Hide widget. Example: logo.hide();

remove

Remove widget. Example: logo.remove();

resizeTo

Resize widget. Example: logo.resizeTo({width:"100px", height:"20px"});

moveTo

Move widget. Example: logo.moveTo({top:"10px", left:"10px"});

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

Comments