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).
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 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.
Select Creative > Ads.
Click New Ad > Blank Ad.
Give your ad a meaningful name.
-
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 .
-
In the Creative Assets > Main Assets tab:
-
Select the Workspace folder and navigate to an uploaded Workspace.
Tip
Tip: SAS will default to this folder for the next step.
Select the default image.
-
The
config.js
file is included with completed settings. You can change any setting as required.In the Settings > Advanced Features, customize the variables as you and your publishers require.
Click Save.
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.
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.
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.
Variable name in SAS (Variable Key in config.js) |
Type |
Description |
Default and Accepted Values |
---|---|---|---|
( |
String |
Method that determines the ad's height. |
Default: adaptive Accepted: |
Adaptive Breakpoints ( |
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 ( |
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 ( |
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 ( |
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 ( |
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 ( |
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 ( |
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 ( |
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 ( |
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 ( |
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 ( |
String |
When the ebDiv and adContainerFrame are resized, use this Z-Index. |
Default: 2 Accepted: Any integer |
Prog Enable ( |
Boolean |
Determines whether to load the programmatic settings. |
Default: No Accepted: Yes, No |
Prog Settings Folder Path ( |
String |
Location from which to load the programmatic settings files. |
Default: Accepted: Path to liquid tool settings folder string |
Parent Levels to Resize ( |
Integer |
Number of parent elements to move up the DOM tree and resize. |
Default: 0 Accepted: integer(>=0) |
Auto Reposition Interval ( |
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 ( |
String |
Location from which to load a backup image for the ad. |
Default: undefined Accepted: Path to backup image string |
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.
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 withAdaptive 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 andMaximum Banner Width:100%
allows your ad to fill the screen's entire width.Minimum Banner Height:0
andMaximum Banner Height:100%
indicate that there are no additional limits on the ad's height.Change Image On Orientation:true
combines withBackup 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.
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.
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.
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.
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.
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.
Comments