Parallax (web)
Overview
Formerly named "Parallax" / "RTB+ Parallax". The "Parallax" creative template displays a piece of a background ad while the user is scrolling.
Most common sizes
Most common RTB sizes of this ad format: 300x250, 300x600, 728x90, 300x50, 640x960, 640x480, 970x250, 750x750, 300x100, 300x300
Demo
Compliancy
| Criterion | Compliancy |
|---|---|
| Creative rotation | ✅ |
| Friendly iFrame | ✅ |
| Multi-instance | ✅ |
| Responsive web design | ✅ |
| RTB | ✅ |
| Safe frame | ✅ |
| Viewability counting (MRC standard) | ✅ |
Creatives
This section applies for the direct creative template only.
Supported file formats:
- image
- creative script
- HTML5
See also the “Known issues” section below!
Note: In case of image creatives, an algorithm moves the creative during scrolling. Thus, the user is able to see the whole creative even if it is taller or shorter than the screen (parallax effect).
Creative template parameters
| Name | Description | Default value |
|---|---|---|
| Ad's container height (px/%) | Specifies the height of the ad's container. Make sure you add the unit, e.g. 300px, 100%. | 100% |
| Border bottom color | Specifies the border color. | #000 |
| Border bottom height | Specifies the border height displayed beneath the ad. 0 means that the border will not appear. | 2 |
| Close button | Specifies if a close button will appear top-right corner. | false |
| Creative feedback | Shows creative feedback button. | true |
| Fixed position | If true, the creative does not move when the user scrolls the page and it is scaled to the available width and height of the viewport. | 0 |
| Horizontal position | Specifies the horizontal position of the container | center |
| Identifier's names | Specifies identifier or more identifiers of elements. Separate them by semicolon if needed. Equativ will put an ad inside it | |
| Label background color | Specifies the background color for the label. | #000 |
| Label text | Specifies the label displayed above the ad. | Advertisement |
| Label text font color | Specifies the label text color. | #fff |
| Label text font size | Specifies the label font size. | 12 |
| Max ad's container width (px/%) | Specifies the max. width of the ad's container. Make sure you add the unit, e.g. 750px, 100%. If it’s not set, the creative width will be taken into account when rendering the ad. | 100% |
| Paragraph type | Specifies type of paragraph (p, div, ...) inside specified article. Value of this field won't be taken into account if ad placement or automatic is selected | p |
| Position in paragraph | Specifies position of an ad in paragraph. If you choose automatic, algorithm will pick the best place for showing an ad. Top/bottom means ad will be placed in the top/bottom of specified article. To have an ad placed in specified position - choose specified paragraph. | automatic |
| Render in Safeframe | Specifies if the ad creative will be rendered inside the safeframe. This feature may be used only for creative scripts and in RTB delivery. | false |
| Selected position |
Select position of the ad
|
ad placement |
| Specified paragraph's number | Places an ad after the specified paragraph, e.g. paragraph no. 3. If there is not enough paragraphs on a page - the ad will be placed after the last one. This field will be used only if you chosen the specified paragraph in the Position in paragraph option. | 1 |
| Start the ad after load event | Specifies if the ad should appear after the load event. Use this option only if you see problems with the ad rendering during page loading. | false |
| Tracking url | Make sure you add [timestamp] to the URL for cache busting. |
|
| Use transparent background | Use a transparent background behind the creative. This option does not affect the background and border colors of the text label | false |
| Vertical offset | Specifies the vertical offset of the creative (in px). It shifts the creative down, inside the ad. | 0 |
| RTB options (only for the RTB template) | ||
| Acceptable sizes | Acceptable sizes as a comma-separated list of a pair w*h (no spaces). Example : 250*300,320*250 | |
| Activate ad refresh | Toggle to activate automatic ad refresh functionality (5 refreshes max) | false |
| Duration (seconds) | Specifies for what duration must the ad be visible (provided the tab is active for the entire duration specified) to be considered for ad refresh | 30 |
| Viewability threshold (px %) | Specifies what minimum percentage of creative must be visible to be considered for ad refresh | 50 |
Features
Parallax API for HTML5 creatives
With the dedicated Parallax API for HTML5 creatives, you can retrieve data on the viewability and the detailed position of the ad.
To use it, add Equativ's javascript file in the <head></head> section, inside the HTML5 creative:
<script src="//ns.sascdn.com/diff/templates/js/parallax//parallax-api.js"></script>The API fires the viewabilityChanged and the parallaxWindowRectChanged events to the HTML5 creative.
Example 1
<script>
sas.parallax.addEventListener("viewabilityChanged", function(state) {
console.log("visibility: " + state);
});
</script>The event parallaxWindowRectangleChanged returns an object with the size of an element and its position relative to the viewport. The object contains the attributes: x, y, width, height, where x, y are coordinates relative to the top-left corner and width, height describe the dimensions of the ad container.
Example 2
<script>
sas.parallax.addEventListener("parallaxWindowRectChanged", function(parallaxWindowRect) {
var computedPercent = (parallaxWindowRect.y + parallaxWindowRect.height) / (window.innerHeight + parallaxWindowRect.height);
console.log(computedPercent);
});
</script>Note
If the creative is using the sas.parallax.viewable variable, it is required to wait for the Parallax API library initialization: the API must retrieve the viewable parameter from the template so that this information can be sent to the HTML5 creative afterwards. To notify the ad about the completed initialization, register the init function - it will callback when the Parallax API library has finished the task.
Example
<script>
function init(){
console.log (sas.parallax.viewable);
}
sas.parallax.register(function(){
init();
});
</script>Click management for HTML5 creatives
The Parallax ad format is able to identify the click destination for HTML5 creatives by using:
- the click counting libary—see Manage click counting
- the clicktag variables passed in the source of the iframe;
Important: HTML5 creatives must have the click destination recognition implemented:
Safeframe
There is a possibility to deliver the creative (creative script or RTB) inside a safeframe. To do this please select the "safeframe" checkbox at the creative level (not at general settings tab).
Limitations
This ad format does not work on Android's native browsers.
Known issues
Known issue 1
When using the CSS3 style transform translate3d(x,y,z) for the parent container of ad, the parallax effect will not work. To fix this, deactivate this style in the "Custom script" field of the insertion:
<style>
#yourDivId { transform: none; }
</style>Known issue 2
RTB click counting does not work on all versions of the IE browser.
Release notes
- 05-03-2025 - Updates for action pixels generation
-
04-09-2024
- Added creative feedback and DSA button
- Removed delay close button parameter
- 15-02-2024 - Allow 10s, 15s values in the "duration" parameter in ad refresh
- 24-01-2024 - Removed support for obsolete macros
- 16-11-2023 - Added ad refresh section to template parameters for RTB version
- 18-07-2023 - Added new RTB macros
- 19-04-2023 - Improve SafeFrame delivery
- 31-01-2023 - Remove document.write
- 03-01-2023 - Remove obsolete property of creative template
- 28-09-2022 - Add transparent background option
- 27-06-2022 - Fixed bug with Advertisement label hiding when ad is inside an element with overflow:hidden style property
- 30-03-2022 - Add Fixed position options
- 05-08-2021 - Add compatibility with Safeframe through a template parameter
- 21-04-2021 - Add Close options
- 20-04-2020 - Removed RTB parameters from click count pixel
- 19-09-2019 - Removed official flag from template (mobile version)
- 05-08-2019 - Stop supporting Flash creatives
- 19-06-2019 - Updated the max width parameter functionality. Max width parameter is now optional. If it’s not set, the creative width will be taken into account when rendering the ad
- 15-04-2019 - Fix the wrong ad rendering when scrolling on Android device
- 29-11-2018 - Fix behavior of HTML5 creatives in Ajax delivery
- 24-10-2018 - This release fixes an issue that happened when delivering Header Bidding Parallax. The blank space (iframe) that used to have the same size than the ad will now be 1px * 1px, which makes it invisible.
- 20-09-2018 - Fix for delivery in friendly iframes
- 16-08-2018 - Update for creative scripts with big height
- 22-05-2018 - Fix for html5 click counting
- 17-05-2018 - Enable RTB click counting
- 08-05-2018 - Fix for rendering creative scripts out of ad-container
- 19-03-2018 - Update for height of creative scripts
- 07-02-2018 - Additional RTB parameters in viewability log
- 04-01-2018 - Enable viewability counting by default
- 21-12-2017 - Header Bidding compliancy
- 11-09-2017 - Add viewability module
- 16-08-2017 - Support for standalone tag
- 10-08-2017 - Add Horizontal position option
- 29-05-2017 - Automatic position of the ad
- 23-05-2017 - Ability to pass clicktag variables in iframe url
- 11-05-2017 - Fix flickering / jumping on mobile devices
- 11-04-2017 - Clicks management for HTML5 creatives
- 14-03-2017 - Fix for sas.clean and sas.refresh functions
- 17-02-2017 - Possibility to retrieve viewability parameters for HTML5 creatives to integrate with Parallax API
- 09-12-2016 - Fix for creative scripts
- 04-10-2016 - Fix for creative scripts