Submit a request
PRODUCT
Privacy Policy  |  Terms of Use  |  Cookie Preference
Follow
Last Update:
  viewable by end users
  editable by agents

If you used a 3rd party authoring tool, such as a code editor, to build your Parallax Reveal, proceed to set up your ad in Sizmek Ad Suite (SAS).

Prerequisites

Before uploading your ad to SAS, verify that you have completed these prerequisites:

  • The folder that contains your assets does not include unnecessary files. For example:

    • Unused assets such as images, videos, or fonts.

    • Work files such as .psd, .fla, or .scss.

    • Hidden files such as thumbs.db (Windows) or .DS_Store (Mac).

  • Create a Workspace (zip file) for each ad. It is recommended that the zip file name matches the final name of the ad.

  • Each Workspace contains its default image (named Default or Backup). This image should be optimized and lightweight.

Note

Note: Naming the Workspace and the default image are especially useful when using the Ad Creation Wizard tool to bulk upload your work; the Ad Name field and the Default field will be filled in automatically. For more information, see Set up Multiple Ads Using Ad Creation Wizard.

Setting up a Single Ad

Setting up your ad requires that you start by uploading your Workspace to the Assets Library. Then, set up your ad based on the Workspace that you uploaded.

Upload Your Ad

Procedure

  1. Select Creative > Assets Library.

  2. Click New Folder to create a folder into which you will upload your Workspace.

  3. Click Upload.

  4. Perform one of the following actions:

    • Drag your zipped Workspace in the new window.

    • Click Browse Files to locate the Workspace.

  5. Click Done.

Set up Your Ad

Procedure

  1. Select Creative > Ads.

  2. Click New Ad > Blank Ad.

  3. Give your ad a meaningful name.

  4. In the Ad Format list, select Parallax Reveal.

    Note

    Note: You may need permission to access the Parallax Reveal format in the list of available custom formats. If you do not have access to this format. please contact Sizmek Support.

  5. In the Creative Assets > Main Assets tab:

    1. Select the Workspace folder and navigate to an uploaded Workspace.

      Tip

      Tip: SAS will default to this folder for the next step.

    2. Select the default image.

  6. The config.js file is included with completed settings. You can change any setting as required.

  7. In the Settings > Advanced Features, customize the variables as you and your publishers require.

  8. Click Save.

Setting up Multiple Ads

You can upload and set up multiple ads in a single process using the Ad Creation Wizard. For more information, see Set up Multiple Ads Using Ad Creation Wizard.

Previewing and Testing

After you finish creating your ad, make sure that you preview and test it. For more information, see Preview Your Ads and Test Your Ads.

Configuring Custom Script Variables

Some of the Parallax Reveal functionality is controlled by configuring the custom variables in the Ad Setup page, under Settings > Advanced Features. These variables control the responsive behavior of the ad, as well as other features such as setting the static background image and publisher page specifications. These settings can be preconfigured in the config.js file, or defined in the ad setup and then controlled programmatically on the placement level settings.

Custom Variable Definitions

Variable name in SAS

(Variable Key in config.js)

Type

Description

Default and Accepted Values

Height Dependency

(mdHeightDependency)

String

Method that determines the ad's height.

Default: adaptive

Accepted:

View values

  • adaptive: The ad uses adaptive breakpoints to determine the height to use based on the width.

  • default: The ad uses the placement size.

  • fixed: The ad uses the fixed height custom variable. Banner Fixed Height must be set to a positive number.

  • advertiserDiv: The ad uses the size of the div where the publisher inserts the tag.

  • aspectRatio: The ad sets the height to match the width and the aspect ratio custom variable.

Adaptive Breakpoints

(mdAdaptiveBreakpoints)

String

Used with Height Dependency:adaptive/Change Image On Orientation:false.

This is a comma-delimited list of width:height breakpoints. When the ad's width is greater than or equal to the number on the left of the colon, its height is set to the number on the right of the colon. The highest width matched in the list is used.

If Change Image On Orientation is false , the breakpoint used also determines which background image is used.

Default: 0:250,900:400

Accepted:

width_integer: height_integer, width_integer: height_integer

Background Image Path

(mdBackgroundImagePath)

String

A comma-delimited list of one or two background image file paths to use as the ad's revealing background.

Default: images/background1.jpg, images/background2.jpg

Accepted: relative_path_to_image_one.jpg, relative_path_to_image_two.jpg

Change Image On Orientation

(mdChangeImgOnOrientation)

Boolean

If Change Image On Orientation is true, the ad shows the first image in portrait mode (and browser aspect ratios narrower than a square), but the second image in landscape mode (and browser aspect ratios wider than a square). If false, the ad uses adaptive breakpoints to decide which image to display.

Default: True

Accepted: True, False

Banner Aspect Ratio

(mdBannerAspectRatio)

String

When Height Dependency is aspectRatio, this variable determines what that aspect ratio is.

Default: 4:3

Accepted: integer(>0): integer(>0)

Banner Fixed Width

(mdBannerFixedWidth)

Integer

This forces the banner to the width specified.

It is inactive while 0 or negative.

This variable overrides all other width rules when active.

Default: -1

Accepted: Any integer

Banner Fixed Height

(mdBannerFixedHeight)

Integer

This forces the banner to the height specified.

It is inactive while 0 or negative.

This variable overrides all other width rules when active.

Default: -1

Accepted: Any integer

Minimum Banner Width

(mdMinBannerWidth)

String

If the banner's width is narrower than the value specified here, it becomes this value.

You can set a pixel value or a percentage of the viewport width.

Default: 320px

Accepted: integer px or integer%

Maximum Banner Width

(mdMaxBannerWidth)

String

If the banner's width is wider than the value specified here, it becomes this value.

You can set a pixel value or a percentage of the viewport width.

Default: 100%

Accepted: integer px or integer%

Minimum Banner Height

(mdMinBannerHeight)

String

If the banner's height is shorter than the value specified here, it becomes this value.

You can set a pixel value or a percentage of the viewport height.

This variable overrides the adaptive, advertiserDiv, and aspectRatio height rules, but not fixed or default.

Default: 0%

Accepted: integer px or integer%

Maximum Banner Height

(mdMaxBannerHeight)

String

If the banner's height is taller than the value specified here, it becomes this value.

You can set a pixel value or a percentage of the viewport height.

This variable overrides the adaptive, advertiserDiv, and aspectRatio height rules, but not fixed or default.

Default: 100%

Accepted: integer px or integer%

Z-Index

(mdZIndex)

String

When the ebDiv and adContainerFrame are resized, use this Z-Index.

Default: 2

Accepted: Any integer

Prog Enable

(mdIsProgEnabled)

Boolean

Determines whether to load the programmatic settings.

Default: No

Accepted: Yes, No

Prog Settings Folder Path

(mdProgSettingsFolderPath)

String

Location from which to load the programmatic settings files.

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

Accepted: Path to liquid tool settings folder string

Parent Levels to Resize

(mdParentLevelsToResize)

Integer

Number of parent elements to move up the DOM tree and resize.

Default: 0

Accepted: integer(>=0)

Auto Reposition Interval

(mdAutoRepositionInterval)

Integer

How often (in milliseconds) to reposition the ad based on resize behavior.

Not expected to be used.

Default: 0

Accepted: integer(>=0)

Backup Image Path

(mdBackupImgPath)

String

Location from which to load a backup image for the ad.

Default: undefined

Accepted: Path to backup image string

Responsive Logic Summary

There are a variety of variables that control the ad's potential width and height in different scenarios. The full list of variables and their effect can be found under Custom Variable Definitions. The height and width of the ad are determined on the configuration of these variables. The following describes how the width and height of the ad is determined in each situation.

The following describes how the width and height of the ad is determined in each situation:

  • Width

    • If a fixed width is specified, the width of the ad is set to that value.

    • If no fixed width is specified, the maximum width is applied and then the minimum width is applied. If the maximum width is smaller than the minimum width, the minimum is used.

  • Height

    • Based on the Height Dependency setting, different values are used to determine the ad’s height. See these settings for the Height Dependency custom variable.

    • Once the height value is determined based on the Height Dependency setting, the Maximum Banner Height is the applied to height and then the Minimum Banner Height. If the Maximum Banner Height is smaller than the Minimum Banner Height, the Minimum Banner Height is used.

Common Customizations

Default Parallax Reveal

The default settings in Custom Variable Definitions configure the ad to be a responsive banner, with two adaptive breakpoints, and with two static background images applied that change when the orientation of the device changes.

  • The Height Dependency:adaptive pairs with Adaptive Breakpoints:0:250,900:400 to give you an ad with height 250 px on smaller screens and 400 px on larger screens.

  • Minimum Banner Width:320px ensures your ad will never responsively scale below 320 px wide and Maximum Banner Width:100% allows your ad to fill the screen's entire width.

  • Minimum Banner Height:0 and Maximum Banner Height:100% indicate that there are no additional limits on the ad's height.

  • Change Image On Orientation:true combines with Backup Image Path:images/background1.jpg,images/background2.jpg to toggle between those two background images depending on the screen's orientation.

The other custom variables are less commonly needed.

You can apply setPRCallback and parallax within script.js to enable parallax motion behavior for a few visual elements in your design.

Static Parallax Reveal

For the Parallax Reveal with a static ad size, use the following settings:

  • Use Height Dependency:fixed, and define Banner Fixed Width and Banner Fixed Height according to the dimensions you want the ad to always use.

    Set Change Image On Orientation:true and use one image for your background, Backup Image Path:images/background1.jpg. This will give you an ad that never changes dimensions, but still reveals a background behind the page content as you scroll up and down.

Additional Responsive Configurations

There are a variety of configurations that result in a diverse range of options when using the Parallax Reveal format. Using adaptive breakpoints and static sizes are a common use, but full responsive banners that use the full area assigned to an ad are also possible. Refer to Custom Variable Definitions to find the setting that best match your creative needs.

Loading Modes

You can set your Parallax Reveal to serve in one of these loading modes:

  • Instant: The entire unit loads immediately. This is the default behavior.

  • Polite: A lightweight image loads first. The full ad loads after the publisher's page finishes loading.

For more information about polite loading, see Add Polite Load to your HTML Ads.

Custom Script Notice

The Parallax Reveal format is an HTML custom format; there is no need to attach a custom script. The appropriate custom script will be included automatically. This is shown as the auto-populated value Parallax_Reveal.js for the Preload Script custom variable. For reference, the following custom script is being used: http://ds.serving-sys.com/burstingres/CustomScripts/Parallax_Reveal.js.

Known Issues

  • In Safari Mobile on iOS 10 and 11, the contents of an unfriendly iFrame will be given margin:8px unless you set that page's body margin. margin:0px is recommended.

  • SAS Preview is unsupported (can be tested with tags).

  • Scroll detection does not work in MRAID or in unfriendly iFrames.

  • Resizing and reorientation detection does not work in unfriendly iFrames.

  • If an unfriendly iFrame exists on the page, even though the tag is served in a friendly iFrame, the ad does not display correctly. The temporary fix, until the regular custom format script has been updated, is to add an extra plugin custom script as a preload event in the placement ad. SAS custom script: https://secure-ds.serving-sys.com/resources/PROD/CustomScripts/PL_Parallax_Reveal_Plugin.js

  • On a device with strained resources, there can be a lag with the background scrolling along with the ad.

  • When you set a very large minimum width, some browsers may partially ignore the setting at extremely narrow widths (<300px).

  • In IE10, sometimes the custom script fails to load, and the graceful fail experience triggers instead.

  • In the IAB MRAID test app, the SAS link fails to display in the Millenial SDK on Android devices, and both links fail to display in the Ad Marvel SDK on iOS.

  • Ads built using the legacy workspace from 2015 do not render correctly on older Mac Safari browsers and older Android Chrome browsers. The current Workspace does not share this issue.

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

Comments