PRODUCT
Follow

Introduction

Overview

The Scroll Reveal is a HTML5 format that creates a reveal ad experience once the ad scrolls into view.  It’s not as though the ad scrolls with the page content.  On the contrary, as publisher content scrolls, the ad pushes up or pushes down publisher content and opens up a view window for a fixed, full-screen wallpaper ad.  Completely customizable with snaps into full screen view option. User can snap back from full screen view by either scroll the page or click on a button from the ad. The ad also can be default to a full screen ad with snap-in and snap-out animation as the top edge of the ad exceeds a certain percentage of the browser height.  At this point, the ad has disappeared.  In general, the snap-in / snap-out animation happens when the user scrolls the page, but for iOS devices, the user will need to release their finger when done sclrolling so the snap-in / snap-out animation can be fired up.

The Scroll Reveal has two text bars.  One aligns at the top edge of the view window, and the other aligns to the bottom edge of the view window. Both text bars are customizable in color, text, and font style and can either be aligned at the placement level or at the creative level. By default, two text bars are hidden, you can switch to display bars by change custom variable.

The new Scroll Reveal also introduce new element call widget, ad creator can setup multiple widgets from creative level and the widgets will be rendered from placement level when ad loads on publisher page. The widget can either be fixed position from the view window, or animated in position, dimension, or opacity. Fixed positioning widgets will aligned in the fixed position within view window and scroll with view window as user scroll the page. Animated widgets will be animated based on the view window dimension or view window scroll percentage in the browser.

The Scroll Reveal come with two templates, Original Scroll Reveal and Parallax Reveal. Both templates are based on the same code base, the major different is Original Scroll Reveal only uses fixed positioning widgets while Parallax Reveal is using animated widgets for the parallax effects.

This format includes a fully “domain configurable” solution.  This allows one tag to be served across different domains, where Certification and Support can use the “Domain Settings Admin Tool” to change custom variables, JavaScript and CSS on specific domains, so a single tag can work everywhere as expected. (Note: This has previously been referred to as a “programmatic” solution, but is more appropriate for PMPs and smaller networks that have been certified with Sizmek)  For more information on the domain configurable formats in general, and how to preview the different certified settings, please see Domain Config Solution for Custom Formats

The image below show the ad reveal the creative contents (video and background image) gradually as user scroll through the publisher page, notice that the ad contents are stay fixed fixed position as user scrolls.

regular.gif

The image below shows the ad snap to full screen and then snap back to the normal state.

snapped.gif

Parallax Effect

In this new version of Scroll Reveal, ad creator is able to create widgets and design how to animate the widgets so they can have parallax effects while user scroll through the publisher page. The image below shows how parallax effects looks like in our Parallax Template.

parallax.gif.gif

Inline Mode

The Scroll Reveal relies on having the support of fixed positioning and css clipping property.  However, some browsers or devices may not fully support those two functionalities.  Because of that, the Scroll Reveal also provides a fallback option to use the fallback to put the ad inline.  The inline mode does not use fixed positioning and css clipping property to display the ad and hence, the ad will scroll along with the page scroll. The following images show the inline mode, notice that the ad contents scroll with user scroll the page.

inline.gif

OS and Browser that forced to use inline mode

The following OS and Browser are forced to use inline mode because of the limitation on the CSS support.

  • Android 4.2 and below
  • Windows Phone all versions
  • Native Android Browser for all Android versions

Scroll Reveal Functionality

Ad Builder

Workspace

Inline Mode

Responsive Panel

Responsive Creative Component**1

Widget Supported

Parallax Effects

** 1 – By default, the creative component will be responsive, you may also set it to fixed size in component property.

Note: All the functionalities are identical for Ad Builder and Workspace version

Demos/Downloads

The following table provides links to the template and demo for the Scroll Reveal format.

Template

ScrollReveal_Video_2.0.0.zip

Demo

Preview demo

Supported Platforms

Platform

Supported Version

Windows

Internet Explorer 10+, Microsoft Edge, Firefox, Chrome

Mac

Safari, Firefox, Chrome

iPhone

iOS 9.0 and later

iPad

iOS 9.0 and later

Android

Android 6.0 and later (including Tablet)

Note: Functionalities fully supported in mobile & tablet browsers, but not in Apps

Format Properties

Listed below are common properties available to the format.

Feature Supported
Polite Loading
Safeframe Support
MRAID (in APP Support)1
AdKit ready 2
Programmatic (One-Tag Solution)
Secure Serving
Sizmek Advertising Suite Support
Ad Builder Templates Available

 1 Will only support expand to fullscreen as an interstitial ad without reveal effect, animated widget may not working properly.

Allows for DCO Support as well as Additional Assets.

Note: This format uses the HTML5 Expandable Banner as the base format.

Implementing Scroll Reveal

Workspaces Available

Workspace

Video

Banner Dimension

Default Panel Dimension

ScrollReveal_Video_2.0.0.zip

Yes

1x1

Full viewport width and 30% of viewport height

ScrollReveal_Parallax_2.0.0.zip

No

1x1

Full viewport width and adaptive height

Included Template Files

HTML

The following HTML template files are included.

File Name

Description

index.html

The 1x1 banner file.

panels/expand/index.html

The default panel file.

CSS

The following CSS template files are included.

File Name

Description

panels/expand/styles/style.css

Style sheet for default panel creative.

 
Scripts

The following JavaScript template files are included.

File Name

Description

scripts/script.js

Script file for banner to load and initialize banner creative.

panels/expand/scripts/script.js

Core script file to default panel to load and initialize panel creative.

config.js

Manifest file

scripts/localPreview.js

Script file for enable local preview

Images

The following image template files are included in the images folder.

File Name

Description

images/backup.jpg

Backup image.

panels/expand/images/logo_white.svg

Logo image. (video template only)

panels/expand/images/logo_dark_blue.svg

Logo image. (Parallax template only)

panels/expand/images/background_portrait.js

Panel background image for portrait mode.

panels/expand/images/background_landscape.js

Panel background image for landscape mode.

panels/expand/images/poster.jpg

Poster image for the video. (video template only)

panels/expand/images/snap_to_fullscreen_icon.svg

Snap to full-screen button image. (video template only)

panels/expand/images/snap_to_fullscreen_hover_icon.svg

Hover state image for snap to full-screen button. (video template only)

panels/expand/images/exit_fullscreen_icon.svg

Exit to full-screen button image. (video template only)

panels/expand/images/exit_fullscreen__hover_icon.svg

Hover state image for exit to full-screen button. (video template only)

panels/expand/images/cloud.png

panels/expand/images/hands.png

panels/expand/images/sun_with_cloud.png

panels/expand/images/clickthrough.png

Widget assets. (Parallax template only)

Videos

The following video template files are included in the videos folder:

File Name

Description

panels/expand/videos/video.mp4

Demo video in mp4 format. (video template only)

Customizing Scroll Reveal

To customize the default Panel:

To customize the default Panel, first open panels/expand/index.html in an HTML-authoring environment so you can edit/alter all the html elements within <body> tag in the index.html to create your own creative content.

Second, you may also want to make changes to the panels/expand/styles/style.css based on your content design. Finally, open panels/expand/scripts/script.js in JavaScript editing tool and add your own script for default Panel here. Below are the variable and function explanations for the template.

Variables

Variable Name

Description

adContainer, videoContainer, video, clickThroughButtonContainer, closeButton

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

logo, cta_button, snap_to_fs_button, exit_fs_button

Global variables that define widgets. (Video template only)

logo, footer, cta_area, cloud_1, cloud_2, sun, hands

Global variables that define widgets. (Parallax template only)

adId, rnd, uid, sdkData, isMRAID, sizeCheckerTimer, isLandscape, viewportHeight, viewportWidth, adWidth, adHeight, adTopPercentage, adBottomPercentage, adVisible Percentage

These variables are used by ad and should be read only, please do not remove or edit. You may read the value of these variables based on your need.

Functions

Function Name

Description

checkIfAdKitReady

Check to see if the adKit is ready and then proceed to initialize creative.

initializeCreative

Initial 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 and widgets. In the template, we also call positionAdElements to position the ad elements.

initializeVideo

This is where we initialize the video tracking.

addEventListeners

This is where we add all the event listeners. In the template, we have added the click event to the click through button. We also add the webkitendfullscreen event listener for iOS devices here to handle some positioning issues when get out of the full screen video player.

handleClickthroughButtonClick

Call this function for the default click-through. This will stop the video playing as well.

handleCloseButtonClick

Call this to handle close button click, this will stop the video and collapse the panel.

handleResize

This function handles the browser resize event. In the template, it calls positionAdElements to reposition the ad elements.

handleBeginFullScreen

This function handles the event when video entering full screen mode.

handleEndFullScreen

This function handles the event when video exit full screen mode.

handleFullScreenChange

This function handles the event when video change its state about full screen mode. We have added the code to handle the issue of the html elements positioning when got out of full screen video player.

handleKeyDown

This function handles the event when user press key on keyboard.

handleWheelScroll

This function handles the event when user scroll the page using mouse wheel.

handleTouchStart

This function handles touch start event for mobile devices.

handleTouchEnd

This function handles touch end event for mobile devices.

snapToFullscreenMode

This function handles the event when user click on snap to full screen button.

exitFullscreenMode

This function handles the event when user click on exit full screen button.

adScrollIn

This function will be triggered when user starts to scroll ad into view port.

adScrollAway

This function will be triggered when user starts to scroll ad away from view port.

adSnapIn

This function will be triggered after ad snapped in.

adSnapOut

This function will be triggered after ad snapped out.

onPageScroll

This function will be triggered when user scroll the page.

stopVideo

This function will pause the video. This function also has rewind video to starting point option by adding the parameter in the function call.

adCollapsed

This function will be triggered when ad collapsed.

positionAdElements

This function repositions the ad elements.

Widget

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

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

For examples:

The following code will render a 118x53 widget using logo_white.svg as background position at 10, 10 from top left.

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

The following code will render a 100x30 widget using button tag as its content position at 10, 10 from top right when ad is not served in App, handleClickthroughButtonClick function will be called when user click on this widget.

cta_button = new Widget({
  name: "cta_button",
  top: "10px",
  right: "10px",
  width: "100px",
  height: "30px",
  html: '<button style="width: 100%; height: 100%; background-color: #0068ff; color: white; border: none; user-select: none; outline: none; cursor: pointer;" onmouseout="this.style.backgroundColor=\'#0068ff\';this.style.color=\'white\';" onmouseover="this.style.backgroundColor=\'#fff\';this.style.color=\'#0068ff\';">Clickthrough</button>',
  callback: "handleClickthroughButtonClick",
  inapp: false
});

Widget Properties

Property Name

Type

Required

Description

name

String

Yes

Property name.

width

String

Yes

widget width in px.

height

String

Yes

widget height in px.

top

String

Must specify top or bottom

widget position from top edge of the ad in px.

left

String Must specify left or right widget position from left edge of the ad in px.

bottom

String Must specify top or bottom widget position from bottom edge of the ad in px.

right

String Must specify left or right widget position from right edge of the ad in px.

html

String Must specify html or asset html code for widget content.

asset

String Must specify html or asset asset from workspace root, will treat as widget background.

hover

String No asset from workspace root, will treat as widget background when mouse over the widget.

css

String No widget styles

callback

String No function to be called when widget clicked, mouse cursor set to pointer automatically when callback is set

inapp

Boolean No decide if widget render when ad served in app or not, default is true

effects

Array No Array of effect objects of the widget

Widget Effect

Widget can be animated when user scroll the page or when ad resized. Ad creator can use widget effects property to set rules for how to animate the widget.

For examples:

The following example will change the widget left position from -20% to 90% when user scroll the ad into viewport.

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

By default, the scroll percentage is calculated when the top edge of the ad scroll into viewport (from the bottom edge of the viewport to the top edge of the viewport, from 0% to 100%). So, ad creator does not need specific the scroll range unless ad creator wants the widget effect happens between certain scroll percentage. The following example show you how to change the widget opacity only when scroll from 90% to 100%.

effects: [
  {
    on: "scroll",
    scrollFrom: 90,
    scrollTo: 100,
    changeProperty: "opacity",
    changeFrom: "0",
    changeTo: "0.7"
  }
]

The following example shows how to apply more than one effects on one widget. These effects will change widget left position from -430px to 100px when page scrolls between 20% to 40% and change the width of the widget to 30% of the ad when ad resized. Notice, both effects have limited the maximum and/or minimum value of the change to make sure widget plays effect properly.  

effects: [
  {
    on: "scroll",
    scrollFrom: 20,
    scrollTo: 40,
    changeProperty: "left",
    changeFrom: "-430px",
    changeTo: "100px",
    maxChangeTo: "0px"
  },
  {
    on: "resize",
    changeProperty: "width",
    changeTo: "30%",
    minChangeTo: "200px",
    maxChangeTo: "430px"
  }
]

Effect Property Name

Type

Required

Description

on

String

Yes

Decide when effect should happen. Available options are:

scroll: effect happens on user scroll publisher page

resize: effect happens on ad resized

scrollFrom

Integer

No

Number of percentage of the scrolling when effect start, default is 0, only take affect when "on" set to scroll.

scrollTo

Integer

No

Number of percentage of the scrolling when effect end, default is 100, only take affect when "on" set to scroll.

changeProperty

String

Yes

Decide what CSS property to be changed. Supported property are: width, height, top, left, bottom, right, opacity, and display.

changeFrom

String No Value of CSS property when change started, in px or %, will use "changeTo" value if "changeFrom" is not specified.

changeTo

String Yes Value of CSS property when change ended.

minChangeTo

String No Minimum changeTo value in number of px.

maxChangeTo

String No Maximum changeTo value in number of px.

width

String No

Define what to be used for the width if "changeproperty" set to height. Available options are:

auto: will calculate the width based on the aspect ratio of the widget.

nochange: the width will stays the same.

[x]px: the width will be changed to [x]px. 

[x]%: the width will be changed to [x]% of the ad width.

height

String No

Define what to be used for the height if "changeProperty" set to width. Available options are:

auto: will calculate the height based on the aspect ratio of the widget.

nochange: the height will stays the same.

[x]px: the height will be changed to [x]px. 

[x]%: the height will be changed to [x]% of the ad height.

animation

Object  No 

Use this to override the animation properties. By default, the animation easing type is ease-out and animation duration is 1.25 second. Ad creator 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, currently support the following:

duration: same as transition-duration, in number of seconds. Default is 1.5 seconds.

easing: same as transition-timing-function, available options are  ease, linear, ease-in, ease-out, and ease-in-out. Default is ease-out.

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"});

Manifest Configuration (config.js file)

We have outlined some information about this file below, for a more detailed description please see the article in the Sizmek Help Center here.

The Manifest Configuration File (config.js location in the root folder of the workspace) is a metadata file that defines certain default behaviors for the ad when created on the Sizmek Advertising Suite platform (MDX does not support the manifest file; the file is simply ignored).  When you create a new blank ad, and select a workspace containing a manifest file, the information in that manifest file will be applied.  You may certainly make changes to the inputted information once the data is there.  The manifest file only gets applied once, when you assign a workspace.

figure1.jpg

Manifest Property: adFormatId

Default Value: 10328

Description: DO NOT MODIFY this value or your ad will not function correctly. This is a reference to the custom ad format ID that maps to the Pushdown in the Sizmek platform. The mapped format name should appear in Ad Format selection shown in Figure1#2.

Manifest Property: name

Default Value: ""

Description: User-defined ad name displayed in the platform. You may change this to your desired name, or you may leave this line out entirely to create an ad without assigning a name. The input value should appear in Ad Name field shown in Figure1#1.

Manifest Property: defaultBanner

Default Value: "Main_Banner"

Description: This is the name of the default banner. This must match the name of the (only) asset in the banners array. This value is never displayed in the platform nor in reports, so while you can edit this, assuming you also changed the name of the banner in the below array to match this, it would have no effect.

Manifest Property: defaultPanel

Default Value: "banner"

Description: This is the name of the default panel. This must match the name of the asset in the panels array.

Manifest Property: banners

Description: A single-entry array of the only banner in the ad.

Parameters:

Field Default Value Description
name "Main_Banner" Name of the banner, this must match the value of defaultBanner above. No reason to change this.
width 320

Integer value representing the banner width in pixels. Note: this should match the height of the defaultImage. The input value should appear with input height in Dimensions column shown in Figure1#4.

height 50

Integer value representing the banner height in pixels. Note: this should match the height of the defaultImage. The input value should appear with input width in Dimensions column shown in Figure1#4.

defaultImage "images/backup.jpg"

Relative path to the default image for this format. The input value should appear in Asset column shown in Figure1#3. Note: only file name will be displayed instead of full relative path.

figure2.jpg

Manifest Property: clickThrough

Description: Object containing details on the default clickthrough for the ad

Parameters:

Field Default Value Description
url "http://www.sizmek.com/?defaultClickthrough"

Landing page when a user clicks. The URL can include up to a 1,000 characters. The input value should appear in Click-thriugh URL field shown in Figure2#1.

target "newWindow"

Where to open the url when user clicks. The input value should appear in Target Window selection shown in Figure2#2.

Options are:

  • newWindow: Opens the landing page in a new browser window or a new tab.
  • currentFrame: Opens the landing page in the current iframe or iframe of the page.
  • top: Opens landing page on the top of the page.
showMenuBar true

Boolean value that determines the appearance of the browser's menu bar in the landing page new window/tab. The input value should appear in Show Menu Bar checkbox shown in Figure2#4.

showAddressBar true

Boolean value that determines the appearance of the browser's address bar in the landing page new window/tab. The input value should appear in Show Menu Bar checkbox shown in Figure2#3.

closePanels false

Boolean value that determines if panel should be collapsed when click-through triggered.

Note: This is not yet implemented in the UI. You can safely ignore this setting if format/template does not include any panels.

figure3.jpg

Manifest Property: customInteractions

Description: Array containing objects that define the default custom interactions for the ad.

Parameters:

Field Default Value Description
name "userAction"

The name of the user action as defined in the workspace. The input value should appear in Name column shown in Figure3#1.

reportingName "User Action"

The name to appear in reports for this custom interaction. The input value should appear in Reporting Name column shown in Figure3#2.

type "userAction"

Type of interaction. The input value should appear in Type column shown in Figure3#3.

Options are:

  • autoEvent
  • userAction
  • clickThrough
  • timer
includeInRate true

A boolean value that defines whether to include the interaction in the Interaction Rate, and to influence the Interaction Rate metrics in reports. The input value should appear in Include In Interaction Rate column shown in Figure3#4.
Note: Applicable only for userAction type. If not entered the default is true.

closePanels false

Defines whether to close the ad's panels when the interaction is triggered. The input value should appear in Close Ad Parts column shown in Figure3#5.
Note: Applicable for all types, except timer. You can safely ignore this setting if format/template does not include any panels.

landingPageUrl  

Landing page to which the user will be directed when triggering the interaction. The input value should appear in Redirect URL column shown in Figure3#6. We do NOT use this value in Adhesion format so you can ignore this value.

Note: The URL can include up to a 1,000 characters. You can  safely ignore this setting if there is no landing page for the custom interaction.

figure4.jpg

figure5.jpg
Manifest Property: panels

Description: An array of the panel(s) in the ad.

Parameters:

Field Default Value Description
name "banner" Name of the panel, this must match the value of defaultPanel above if is default panel. The input value should appear in Panel Name column shown in Figure4#1.
width 320

Integer value representing the panel width in pixels. The input value should appear in Width column shown in Figure4#5.

height 50

Integer value representing the banner height in pixels. The input value should appear in Height column shown in Figure4#6.

asset "index.html"

Relative path to the panel index file for this format. The input value should appear in Asset column shown in Figure4#2.

x 0

The left offset for the panel position. The input value should appear in X column shown in Figure4#4.

Y 0

The top offset for the panel position. The input value should appear in Y column shown in Figure4#5.

delayedExpansion false

Boolean value that determines if panel should be expanded with delay. The input value should appear in Delay Expansion checkbox shown in Figure5#2.

positionType pageRelativePercentage

The type of panel positioning. The  input value should appear in Position Types selection shown in Figure5#1.

Options are:

  • bannerRelativePixels: The panel position is relative to the banner’s top-left corner.
  • pageRelativePixels: The panel is positioned relative to the webpage’s center.
  • pageRelativePercentage: The panel is positioned relative to the webpage’s top-left corner.
autoCollapse never

This determines if the panel should auto collapse or not. The input value should appear in Retractions selection shown in Figure5#3.

Options are:

  • never: Do not collapse the panel.
  • mouseOffAdd: Collapse the panel when the mouse does not hover over the panel.
  • mouseOffPanel: Auto-collapse panel when the mouse pointer does not hover over the panel.

  

Manifest Property: variables

Description: Array containing key/value pair objects that define the default values of the custom variables for the ad.  

Guidelines and Rules

  • The Manifest file key name must match the format key name.  Note, this is NOT the same as the variable display name, please refer to the Custom Variables section below for the key value for each custom variable.
  • A key is ignored and not added to the ad, if the Manifest file includes a unique key that is not defined on the format level.
  • The last key is used in the Manifest file if the key appears more than once.
  • Variables that are embedded on the format level with default values will appear on the ad level even if they do not exist on in the Manifest file.
  • A variable is ignored if an error or conflict arises. The default values on the format level apply.
  • Variable values can include boolean, integers, strings, and float types.
  • All values should be entered with quotes, as strings, regardless of variable type
  • Boolean values use lowercase "true" and "false" values

Parameters:

Field Description
key Key of the custom variable.  Note: this is NOT the display name, please refer to the Custom Variables section below for the key value for each custom variable.
value

The default value of the variable.  Encapsulate every value in quotes, regardless of if variable type is string, integer, float, or boolean.

Example:

varExample.png  

Recommended Manifest Configuration Changes

At the very least, you will want to make a minimum of these changes to your manifest file:

Name: The template provided includes the template name as the ad name.  You will want to make sure your ad is named according to your campaign/placement.

Clickthrough URL: The template clicks through to the Sizmek home page.  You will want to update the default clickthrough URL according to your campaign/placement.

Interactions: The template provides a single interaction named "userAction".  You will want to update this section to either include all the interactions you have in your ad's creative, or remove the section entirely and rely just on the asset scanning of the platform to detect all interactions in the code.

In addition to the above list, you may want to adjust the below entries:

Custom Variables: While the template provides default behavior, depending on the needs of your ad, the publisher(s) on which the ad will run, etc., you may need to adjust the values of some of the variables.

Banner Dimensions: The template provides is served as a 1x1.  You may need to serve a different tag size due to certain publisher restraints.  As this ad can behave responsively, you may serve any size banner you wish.  If you decide to change your banner size, you should change the Manifest to match.

Common Customizations

If you wish to create Scroll Reveal in specific width instead of full width, you can go to Sizmek Platform and change the custom variable mdPanelWidthDependency to "fixed" and set mdPanelFixedSize to the desire size. The ad will display fixed width and centered in the ad container.
You may customize the top bar and bottom bar by changing the following custom variables from the ad settings from Sizmek Platfrom.

Top Bar: mdTopBarHeight, mdTopBarColor, mdTopBarLabelStyle, mdTopBarLabel, mdTopBarOffsetX, and mdTopBarOffsetY

Bottom Bar: mdBottomBarHeight, mdBottomBarColor, mdBottomBarLabelStyle, mdBottomBarLabel, mdBottomBarOffsetX, and mdBottomBarOffsetY 

Note: please remember to set mdDisplayTopBar and mdDisplayBottomBar to true in order to display bars.

If the ad does not working properly and you wish to switch to use inline mode, you can go to Sizmek Platform and change the custom variable mdInlineScrollReveal to the proper value to enable the inline mode for certain platform. 

Setting up Scroll Reveal in the Sizmek Platforms

  1. Archive the workspace into a new ZIP file, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. In the Sizmek MDX2.0, under Creative Assets, create a new Workspace by uploading the ZIP file.
  3. Under the Ads section, create a new ad.
  4. Set Ad Format to Scroll Reveal and fill out the form.
    Note: On the Sizmek Platform, your user account will need access to the Scroll reveal 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
  1. Under Panels List, add default panel using following settings:
    Panel Name: Default
    Creative Asset: Please select panels/expand/index.html from the root of workspace.
    Dimension: 1x1
    Auto Expand on Mouse Over: Unchecked
    Delay Expansion: Unchecked
    Auto Retract When: Never
    Position Type: Page Relative-Pixels
                         X: 0
                         Y: 0
  2. For the Panel Settings, please make sure both Show Single Panel at a Time and Auto Expand Default Panel when Ad is Loaded are checked.
  3. Set Default Panel Frequency to unlimited. (Note: this is 1x1 ad with auto expanded panel, set frequency capping will results panel not display after the frequency capping and no one can see the ad)
  4. Add the Url for the default click-through.
  5. Save the ad.
  6. Create a new placement for the ad.
  7. Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
    After you’ve saved your placement, you can then generate preview tags to test on your web site.

Note: Custom Script Notice Since the Scroll Reveal 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:
http://ds.serving-sys.com/BurstingRes/CustomScripts/PL_HTML5ScrollReveal.js

  1. Archive the workspace into a new ZIP file, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. Click the Creative menu item > Asset Library, Upload your Workspace the chosen folder.
  3. Click the Creative menu item > Ads and click the New Ad button and select Blank Ad.
  4. Fill out the form. Set Ad Format to Scroll Reveal.
  5. Under Creative Assets select Main Assets tab and then select the Workspace folder and default image.
  6. Under Creative Assets select Panels tab, add default panel using following settings:
    Panel Name: default
    Asset: Please select panels/expand/index.html from the root of workspace.
    X: 0
    Y: 0
    Width: 1
    Height: 1
    Default: checked
    Other Properties (the three dots icon in front of panel name)
            Position Type: Page Relative(px)
            Expand on Mouse Over: Unchecked
            Delay Expansion: Unchecked
            Retraction: Never
          Transparency: unchecked
  7. Under Advanced Panel Settings, make sure "Overwrite Creative Settings: Always auto-expand" under Auto-Expand is checked, set Panel Frequency to "Unlimited", and "Show Single Panel at a Time" under Multiple Panels is checked.  (Note: this is 1x1 ad with auto expanded panel, set frequency capping will results panel not display after the frequency capping and no one can see the ad)
  8. Add the Url for the default click-through.
  9. Save the Ad.
  10. Under the Advanced Features section, customize the Variables to your needs.
  11. Create a new placement for the Ad.
  12. Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
  13. After you’ve saved your placement, you can then generate preview tags to test on your web site.

Custom Script Notice:

There is no need to attach a custom script since the appropriate one will be pulled in automatically if you select the format via the platform's Ad Setup. However for reference, the following custom script is being used:

http://ds.serving-sys.com/BurstingRes/CustomScripts/PL_HTML5ScrollReveal.js 

Custom Variables

Custom Variable Definitions

Variable Name

(Key)

Type

Description

Default Value

Auto Collapse On Scroll

(mdAutoCollapseOnScroll)

Boolean 

Decide if should exit full screen from snap to full screen when user scroll the page.

Yes 

Auto Collapse Timer

(mdAutoCollapseTimer)

Integer

 

0

Auto Reposition Interval

(mdAutoRepositionInterval)

Integer

 

0

 

Auto Snap Type

(mdAutoSnapType)

Integer 

Declare the type of the snap. The available options are:

0: Snap disabled

1: Only snap upward

2: Only snap downward

3: Snap both upward and downward

Backup Image Path

(mdBackupImgPath)

String

Relative path to the backup image, if a custom image is desired. This allows a fallback experience to display a backup image that is not the same dimension as placement size. 

undefined

Border Style

(mdBorderStyle)

String

Declare the border style. It contains two parts - border size and border color, separated by a space.

1px #0d2a4d

Bottom Bar Color

(mdBottomBarColor)

String

Declare the color of the bottom text bar. You can put any html color name or html hex color code.

white

Bottom Bar Height

(mdBottomBarHeight)

Integer

Declare the height of the bottom text bar.

20

Bottom Bar Label

(mdBottomBarLabel)

String

Declare the text in the bottom text bar.

SCROLL TO CONTINUE WITH CONTENT

Bottom Bar Label Style

(mdBottomBarLabelStyle)

String

Declare the style of the text in the bottom text bar.

color:grey;font-size:10px;font-family:arial;text-align:center;

Bottom Bounding Selector

(mdBottomBoundingSelector)

String

The HTML selector for the object that the ad should snap to on the bottom. Eg. Some publisher site has Footer that does not want to be covered by Scroll Reveal, then use this custom variable to declare the Footer element, if the Footer is a div with footer as its id, then the value would be “div#footer” 

null

Change Image On Orientation

(mdChangeImageOnOrientation)

Boolean

Decide if need to change background image when orientation changed.

Yes

Collapse After Scroll Away

(mdCollapseAfterScrollAway)

Boolean

Declare if ad should be collapsed when scroll away or snap away.

No

Disable Inline Snap

(mdDisableInlineSnap)

Boolean

Declare if the ad should use snap effect when ad display as inline mode.

Note: This value will be set to false when mdAutoSnapType sets to 0

No 

Display Bottom Bar

(mdDisplayBottomBar)

Boolean

Declare if the ad will need to display bottom text bar or not.

Note: when set to No, the bottom text bar will not be created.

No 

Display Top Bar

(mdDisplayTopBar)

Boolean

Declare if the ad will need to display top text bar or not.

Note: when set to No, the top text bar will not be created.

No 

Enable SDK Default Close Button

(mdEnableSDKDefaultCloseButton)

Boolean

Set Yes to use MRAID default close button rather than the customized one in template when ad served in MRAID (in App) 

No

eyeDiv ZIndex

(mdEyeDivZIndex)

String

Set eyediv zIndex - z-Index of the panel on publishers page. 

undefined

Inline Scroll Reveal

(mdInlineScrollReveal)

String

Set to use inline mode for different platforms.

The value of this custom variable construct by 4 0s or 1s.

The four numbers stand for Desktop, iOS, Android, and Windows Phone from left to right. Each number uses 0 or 1 to disable or enable the option. By default, the value 0000 means disable inline mode for all the platforms. If you wish to enable inline mode for Android, for example, you will need to set the third number to 1 and have the value become 0010

Note: Android 4.2 and below, Windows Phone, and Native Android Browser are always forced to use inline mode because of design limitation.

0000 

Interaction Cancel Auto Collapse

(mdInteractionsCancelAutoCollapse)

Boolean

 

No

Enable Domain Config

(mdIsDomainConfigEnabled)

Boolean

Set ad to load with domain configuration.

No

Minimum Panel Height

(mdMinPanelHeight)

Integer

Decides the Minimum height of the expand panel in number of pixels. Default value is -1 (no minimum). This value only applied when the mdPanelHeightDependency sets to percentage.

-1

Minimum Panel Width

(mdMinPanelWidth)

Integer

Decides the Minimum width of the expand panel in number of pixels. Default value is -1 (no minimum). This value only applied when the mdPanelWidthDependency sets to percentage.

-1

Panel Aspect Ratio

(mdPanelAspectRatio)

String

Panel Aspect Ratio when mdPanelHeightDependency or mdPanelWidthDependency sets to aspectRatio.

4:3

Panel Breakpoints

(mdPanelBreakpoints)

String

Decides the panel height based on the panel width breakpoints when mdPanelHeightDependency sets to adaptive.

The value should be in the [width]:[height] format and use comma for multiple breakpoints.

For example: 300:200,500:300,749:400 means set panel height to 200px when panel width <= 500, set panel height to 300px when banner width <= 749, set panel height to 400px when panel width > 749

300:200,500:300,749:400

Panel Fixed Size

(mdPanelFixedSize)

String

Decides panel width and height when mdPanelHeightDependency or mdPanelWidthDependency sets to fixed.

320x416

Panel Height Dependency

(mdPanelHeightDependency)

String

Decides what panel height should based on. Available options are:

adaptive: use values define in mdPanelBreakpoints

aspectRatio: use value define in mdPanelAspectRatio

percentage: use percentage define in mdPanelPercentageHeight

fixed: use fixed height define in mdPanelFixedSize

browser: use browser height

percentage

Panel Percentage Height

(mdPanelPercentageHeight)

Integer

Decides the ad height should be how many percentage of the viewport when mdPanelHeightDependency sets to percentage.

30

Panel Percentage Width

(mdPanelPercentageWidth)

Integer

Decides the ad width should be how many percentage of the viewport when mdPanelWidthDependency sets to percentage.

30

Panel Width Dependency

(mdPanelWidthDependency)

String

Decides what panel width should based on. Available options are:

adaptive: use values define in mdPanelBreakpoints

aspectRatio: use value define in mdPanelAspectRatio

percentage: use percentage define in mdPanelPercentageWidth

fixed: use fixed width define in mdPanelFixedSize

browser: use browser width

browser

Parent Levels to Resize

(mdParentLevelsToResize)

Integer

Only applied when serving default image. Affects the number of levels of parent elements to resize to the default image size. 

0

Percentage For Snap In

(mdPercentageForSnapIn)

Integer

Declare the percentage of the browser height that ad need to exceed for the snap in when user scroll the ad in.

50

Percentage For Snap out

(mdPercentageForSnapOut)

Integer

Declare the percentage of the browser height that ad need to exceed for the snap out when user scroll the ad away.

75

Prog Settings Folder Path

(mdProgSettingsFolderPath)

String

Path to Programmatic seetings file.

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

Scroll Amount Per Time Unit

(mdScrollAmountPerTimeUnit)

Integer

Declare the number of pixels that the snap animation should scroll per time unit.

For the slower animation, set lower number. Eg. 10

For the faster animation, set higher number. Eg. 100

40

Top Bar Color

(mdTopBarColor)

String

Declare the color of the top text bar. You can put any html color name or html hex color code.

white

Top Bar Height

(mdTopBarHeight)

Integer

Declare the height of the top text bar.

20

Top Bar Label

(mdTopBarLabel)

String

Declare the text in the top text bar.

ADVERTISEMENT

Top Bar Label Style

(mdTopBarLabelStyle)

String

Declare the style of the text in the top text bar.

color:grey;font-size:10px;font-family:arial;text-align:center;

Top Bottom Bar In Creative

(mdTopBottomBarInCreative)

String

Set to render top bar and bottom bar in creative level. By default, both top bar and bottom bar are rendered at placement level, however, the ad may have bleeding through top bar and bottom bar issue on some devices (especially Android devices) while ad is scrolling. So, instead of rendering top bar and bottom bar at placement level, top bar and bottom bar will be rendering at creative level.

The value of this custom variable construct by 4 0s or 1s.

The four numbers stand for Desktop, iOS, Android, and Windows Phone from left to right. Each number uses 0 or 1 to disable or enable the option. By default, the value 0000 means top bar and bottom bar are rendering at placement level for all platforms. If you wish to render bars at creative level for Android, for example, you will need to set the third number to 1 and have the value become 0010.

0000 

Top Bounding Selector

(mdTopBoundingSelector)

String

The HTML selector for the object that the ad should snap to on the top. Eg. Some publisher site has Header or Top Menu that does not want to be covered by Scroll Reveal, then use this custom variable to declare the Header or Top menu element, if the Header is a div with header as its id, then the value would be “div#header”

null

Reported Custom Interactions

Currently, there are no custom interactions reported in the template, however, ad developers can always add their own custom interactions by using the following call: 

EB.userActionCounter(); 

Known Issues

  • On mobile phones, users may experience a choppy effect when scrolling.
  • Ad Builder Preview only shows panel preview, please use platform preview to preview the ad.
  • Ad Builder Sizmek Advertising Suite Preview accessible from MDX2.0 may not working properly.
  • On native Android Browser on Android 4.x devices, the video may not stopped when Ad snapped away.
  • On Windows Phone, the snap may not working properly if user’s finger stays on the touch screen when ad reaches the point for the snap.
  • On Firefox, user may not able to use up and down arrow keys to scroll the page if user has put focus within the ad (such as perform clicks or play video). User will need to use mouse control to scroll the page.
  • Click-throughs on widgets (such as the click-through button in the non-expanded ad in the template) will trigger most browsers' popup blocker. Non-widget click-throughs (such as the click-through button in the expanded ad in the template) are not affected by this.

Change Log

July 13, 2018 (v 2.0.0)

  • Add support for manifest (config.js) file.
  • Adopt Better Ad Experience.
  • Introduce widget that will be available on creative level to create and animate objects.
  • Add support for Parallax effects.
  • Add support for MRAID. Ad will display as an interstitial ad in App.
  • New structure for rendering the Scroll Reveal view window to make the reveal effect more smoother while the user scrolls.
  • New Sizmek branded images and color theme.

April 20, 2018 (v 1.3.1)

  • Fixed Chrome bug (65):when scrolling, the panel flickers

September 25, 2017

  • Updated format to offer a fully "liquid" - "domain configurable" solution. This allows one tag to be served across different domains for which Certification and Support teams can use the "Domain Settings Admin Tool" to change custom variable values, JavaScript and CSS on specific domains, so that a single tag can work across multiple publishers / sections as expected. (Note: This has previously been referred to as a "programmatic" solution, but is more appropriate for PMPs and smaller networks that have been certified with Sizmek).
  • The workspace format name will be changed from “HTML5 Scroll Reveal” to “Scroll Reveal”.
  • The Ad Builder format name will be changed from “HTML5 Scroll Reveal” to “Ad Builder – Scroll Reveal”.
  • Fixed the JavaScript error on Edge browser when scrolling the ad from a touch enabled device.
  • Fixed the JavaScript error on Chrome browser when user touches and interacts with the ad from a touch enabled device.

November 8, 2016

  • Scroll Reveal now available on Ad Builder.
  • Fix the Firefox Browser gap issue on Android devices by forcing the top bar and bottom bar rendered in creative.

September 23, 2016

  • Fix the issue that the Scroll Reveal blocked the access to the page contents.
  • Updated Android behavior to give the full Scroll Reveal experience on Android Chrome browser and the inline experience on the older Android default browser.
  • Enabled local preview for creative assets.
  • Added Viewability support.
  • Scroll Reveal is now available on the Sizmek Advertising Suite Platform. 

May 2, 2016

  • Enhanced the overall performance and made improvements to lock the black header and footer bars to the ad content as page content is scrolled.
  • Added support for a new inline mode option in case the publisher wants the full ad to scroll and snap into view (instead of the reveal effect).
  • Added ability to set up top and bottom boundaries so that the ad will not cover certain publisher elements such as site headers or footers.
  • Support for Adkit and allowing you to include DCO elements within your ad amongst other benefits.
  • Removed the webm video source from the template to reduce file size.
  • Fixed issues with using the keyboard arrow keys on desktop to scroll the ad into view.
  • Removed custom variables that were no longer needed such as mdTopBarClippingBuffer, mdBottomBarClippingBuffer, and mdTextBarAlternative

December 3, 2015

  • Fixed many publisher performance issues that were tied to both the template and the custom script
  • Fixed issue with video still playing when ad is not visible due to page layout changes during device re-orientation
  • Fixed issue where black text bars on top and bottom of ad were not removed when ad became invisible due to page layout changes during device re-orientation
  • Fixed issue where the click through button was not working on some mobile devices
  • Fixed IE11 error message popup when clicking on click through button
  • Added option via custom var for rendering black text bars on top and bottom of ad within creative level instead of at placement level
  • Added options via custom vars to offset the black text bars when needed. 

June 18, 2015

  • Initial release 
Was this article helpful?
3 out of 4 found this helpful
Have more questions? Submit a request

Comments