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.
The image below shows the ad snap to full screen and then snap back to the normal state.
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.
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.
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 |
|
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.
2 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 |
Yes |
1x1 |
Full viewport width and 30% of viewport height |
|
No |
1x1 |
Full viewport width and adaptive height |
Included Template Files
HTML
The following HTML template files are included.
File Name |
Description |
|
The 1x1 banner file. |
|
The default panel file. |
CSS
The following CSS template files are included.
File Name |
Description |
|
Style sheet for default panel creative. |
Scripts
The following JavaScript template files are included.
File Name |
Description |
|
Script file for banner to load and initialize banner creative. |
|
Core script file to default panel to load and initialize panel creative. |
|
Manifest file |
|
Script file for enable local preview |
Images
The following image template files are included in the images folder.
File Name |
Description |
|
Backup image. |
|
Logo image. (video template only) |
|
Logo image. (Parallax template only) |
|
Panel background image for portrait mode. |
|
Panel background image for landscape mode. |
|
Poster image for the video. (video template only) |
|
Snap to full-screen button image. (video template only) |
|
Hover state image for snap to full-screen button. (video template only) |
|
Exit to full-screen button image. (video template only) |
|
Hover state image for exit to full-screen button. (video template only) |
|
Widget assets. (Parallax template only) |
Videos
The following video template files are included in the videos folder:
File Name |
Description |
|
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 |
|
Global variables that define the HTML objects. (Video template only) |
|
Global variables that define widgets. (Video template only) |
|
Global variables that define widgets. (Parallax template only) |
|
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 |
|
Check to see if the adKit is ready and then proceed to initialize creative. |
|
Initial creative. You may add your own script here if you wish to execute a script when the creative is initialized. |
|
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. |
|
This is where we initialize the video tracking. |
|
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. |
|
Call this function for the default click-through. This will stop the video playing as well. |
|
Call this to handle close button click, this will stop the video and collapse the panel. |
|
This function handles the browser resize event. In the template, it calls |
|
This function handles the event when video entering full screen mode. |
|
This function handles the event when video exit full screen mode. |
|
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. |
|
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. |
|
This function handles touch start event for mobile devices. |
|
This function handles touch end event for mobile devices. |
|
This function handles the event when user click on snap to full screen button. |
|
This function handles the event when user click on exit full screen button. |
|
This function will be triggered when user starts to scroll ad into view port. |
|
This function will be triggered when user starts to scroll ad away from view port. |
|
This function will be triggered after ad snapped in. |
|
This function will be triggered after ad snapped out. |
|
This function will be triggered when user scroll the page. |
|
This function will pause the video. This function also has rewind video to starting point option by adding the parameter in the function call. |
|
This function will be triggered when ad collapsed. |
|
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 |
|
String |
Yes |
Property name. |
|
String |
Yes |
widget width in px. |
|
String |
Yes |
widget height in px. |
|
String |
Must specify top or bottom |
widget position from top edge of the ad in px. |
|
String | Must specify left or right | widget position from left edge of the ad in px. |
|
String | Must specify top or bottom | widget position from bottom edge of the ad in px. |
|
String | Must specify left or right | widget position from right edge of the ad in px. |
|
String | Must specify html or asset | html code for widget content. |
|
String | Must specify html or asset | asset from workspace root, will treat as widget background. |
|
String | No | asset from workspace root, will treat as widget background when mouse over the widget. |
|
String | No | widget styles |
|
String | No | function to be called when widget clicked, mouse cursor set to pointer automatically when callback is set |
|
Boolean | No | decide if widget render when ad served in app or not, default is true |
|
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 |
|
String |
Yes |
Decide when effect should happen. Available options are: scroll: effect happens on user scroll publisher page resize: effect happens on ad resized |
|
Integer |
No |
Number of percentage of the scrolling when effect start, default is 0, only take affect when "on" set to scroll. |
|
Integer |
No |
Number of percentage of the scrolling when effect end, default is 100, only take affect when "on" set to scroll. |
|
String |
Yes |
Decide what CSS property to be changed. Supported property are: width, height, top, left, bottom, right, opacity, and display. |
|
String | No | Value of CSS property when change started, in px or %, will use "changeTo" value if "changeFrom" is not specified. |
|
String | Yes | Value of CSS property when change ended. |
|
String | No | Minimum changeTo value in number of px. |
|
String | No | Maximum changeTo value in number of px. |
|
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. |
|
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. |
|
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 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 widget. Example: |
|
Hide widget. Example: |
|
Remove widget. Example: |
|
Resize widget. Example: |
|
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.
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. |
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:
|
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. |
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:
|
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. |
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. |
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. |
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:
|
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:
|
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:
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
Setting up Scroll Reveal in the Sizmek Platforms
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 |
3 |
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
, andmdTextBarAlternative
.
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
Comments