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

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

Supported Platforms

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

Format Properties

Listed below are common properties available to the format.

 ¹ 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

Included Template Files

HTML

The following HTML template files are included.

CSS

The following CSS template files are included.

Scripts

The following JavaScript template files are included.

Images

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

Videos

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

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

Functions

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

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"
  }
]

Widget Methods

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:

Manifest Property: clickThrough

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

Parameters:

Manifest Property: customInteractions

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

Parameters:

Manifest Property: panels

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

Parameters:

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:

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

Use specific width instead of full width

Customize top bar and bottom bar

Switch to Inline Mode

Setting up Scroll Reveal in the Sizmek Platforms

Sizmek MDX2.0 Setup

Sizmek Sizmek Advertising Suite Setup

Custom Variables

Custom Variable Definitions

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