Overview
The Immersive Takeover format is a full-width expandable header with left and right gutters that appear around page content and a wallpaper skin that appears behind the page content full page. The header, gutters and background skin are responsive to different screen sizes. The header height can be configured to resize to different viewport breakpoints.
This format has full programmatic support. For (more information here) on Programmatic formats in general, and how to preview the different certified settings, please see Programmatic Support for Custom Formats
The header panel height can auto-expand on ad load and display the expanded panel. The expanded panel contains a close button, so that you can close the expanded view to return back to the collapsed view.
There are different panels for each view; the header panel will appear where the tag has been placed - ideally within the site's header section on the page. The header panel can push page content down. The left gutter and right gutter will appear on either side of the page content, and a background panel will appear as wallpaper skin spanning the background of the page. All the panels are synchronized and wait for each panel to load before displaying the ad on the page. Once all the panels have completed loading, the panel creative content will be revealed with a fade-in animation.
All of the templates contain responsive gutters, and the gutters will show if there is enough space to display them on the left and right of the page content. The gutters will collapse if there is not enough space to display them. The gutters are not supported for mobile devices and will not show when the ad is viewed on mobile or tablet.
VideoSkin Template
The VideoSkin template is the advanced template for the Immersive Takeover with a video in the background panel which will be loaded behind of the content of the page. There are 5 panels in the workspace:
- LeftGutter (transparent)
- RightGutter (transparent)
- Background
- Header (transparent but with Sizmek logo and clickthrough button)
- Controls
The gutters are transparent and only they will be used to do clickthrough. Background panel shows the video with full browser size and it will be autoplayed depending if the device it´s compatible with the autoplay feature, if not the user will need to click the video to do play. This template has a special panel "controls" which you can use to do play/pause the video, turn on/off the sound or expand/collapse the banner.
Immersive Takeover - VideoSkin Collapsed
Immersive Takeover - VideoSkin Expanded with Fullscreen option enabled
Immersive Takeover - VideoSkin when is clicked
Demos/Downloads
The following table provides links to the templates and demo for the Immersive Takeover 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 Phone |
Android 6.0 and later |
Android Tablet |
Android 6.0 and later |
Note: Supported in Mobile browsers only and not in Apps.
Features
These are the key features of the Immersive Takeover format by each template.
|
Video Skin |
Image Skin |
Video |
Basic Cross Domain Configuration via one ad (creative-level) |
yes |
||
Affect the site with style (requires publisher approval) |
yes |
||
Affect the site with script (requires publisher approval) |
yes |
||
Inter-panel synchronisation |
yes |
||
Responsive |
yes |
||
Mobile Experience (gutters are hidden, different header expansion) |
yes |
||
Scroll Detection |
yes |
||
Domain Configuration via Domain Config Tool (f/k/a Programmatic) |
yes |
||
Ad Builder Templates Available |
no |
||
Local Preview |
yes |
||
Video Background |
yes |
no |
no |
Controls Panel |
yes |
no |
no |
Uses AdKit (able to include DCO and Additional Assets) |
yes |
||
Polite Loading |
yes |
||
Safeframe Support |
no |
||
MRAID (in-app Support) |
no |
||
Secure Serving |
yes |
||
Sizmek Advertising Suite Support |
yes |
Implementing an Immersive Takeover Format
Workspaces
Template |
Workspace |
Video |
Default Image Dimensions |
Video |
ImmersiveTakeover_Video_1.5.1 |
Yes |
1x1 |
VideoSkin |
ImmersiveTakeover_VideoSkin_1.5.1 |
Yes |
1x1 |
ImageSkin |
ImmersiveTakeover_ImageSkin_1.5.1 |
No |
1x1 |
Essential files to use in any project
The main 2 files you will need to use in any HTML project are:
File Name |
Description |
|
Core script to use the Immersive Takeover to load and initialize ad and pass domain configuration object to custom script. |
|
The basic Stylesheet for the Immersive Takeover format |
Note: You can use only these files to get an Immersive Takeover experience. It's recommended to not duplicate the files in your workspace and use a relative path to load them.
Included VideoSkin Template Files
The different templates contain different assets, please read the below to find out more about VideoSkin Template.
HTML
The following HTML template files are included.
File Name |
Description |
|
The banner file that is 1x1 displayed on the page. |
|
HTML file for header panel. |
|
HTML file for the left gutter panel. |
|
HTML file for the right gutter panel. |
|
HTML file for background panel. |
|
HTML file for controls panel (VideoSkin template only) |
Styles
The following CSS template files are included
File Name |
Description |
|
A style sheet that overrides browser default styles. |
|
Stylesheet for banner creative. |
|
Stylesheet for header panel creative. |
|
Stylesheet for Left gutter panel creative. |
|
Stylesheet for Right gutter panel creative. |
|
Stylesheet for Background panel creative. |
|
Stylesheet for Controls panel creative. (VideoSkin template only) |
Scripts
The following JavaScript template files are included
File Name |
Description |
|
Core script for banner to load and initialize ad and pass domain configuration object to custom script. |
|
Core script for header panel to load and initialize ad. |
|
Core script for background panel to load and initialize ad. |
|
Core script for the left gutter panel to load and initialize ad. |
|
Core script for the right gutter panel to load and initialize ad. |
|
Core script for the control panel to load and initialize ad. |
Images
The following image template files are included in the images folder.
File Name |
Description |
|
1x1 backup image for the banner. |
|
Image asset for drop down icon appears in controls panel. |
|
Image asset for mute button icon appears in controls panel. |
|
Image asset for unmute button icon appears in controls panel. |
|
Image asset for play button icon appears in controls panel. |
|
Image asset for unmute button icon appears in controls panel. |
Videos
The following video template files are included in the videos folder.
File Name |
Description |
|
Image asset for video poster. |
|
Demo video in mp4 format. |
Customizing Immersive Takeover Format in any HTML
All creative functionalities are programmed in the scripts/immersiveTakeover_script.js
file and you can include all your functions in other script file and load it from your HTML file. You only need include the Adkit, the Immersive Takeover script and the Immersive Takeover style file.
Adding the essential files
To get the full Immersive Takeover experience in your project you will need the essential files in your main folder:
scripts/immersiveTakeover_script.js
styles/immersiveTakeover_style.js
To update the layout, design and functionality of a template, open the HTML, CSS, and JS files in a text editor
Make sure you load these files from the HTML file of your Banner and Panels
<link rel="stylesheet" href="styles/immersiveTakeover_style.css"/>
<script>EBModulesToLoad = ['EBCMD','EBAPI'];</script>
<script type="text/javascript" src="http://ds.serving-sys.com/BurstingScript/adKit/adkit.js"></script>
<script type="text/javascript" src="scripts/immersiveTakeover_script.js"></script>
Note: you should load only the modules you will use in each HTML, you can delete or add the "video" variable in your banner or panel assets EBModulesToLoad= [ 'Video','EBCMD','EBAPI']
depending on if you have a video or not.
it´s recomended to load the files from each panel using the parent relative path, example loading the files from a Panel:
<link rel="stylesheet" href="../../styles/immersiveTakeover_style.css"/>
<script>EBModulesToLoad = ['Video','EBCMD','EBAPI'];</script>
<script type="text/javascript" src="http://ds.serving-sys.com/BurstingScript/adKit/adkit.js"></script>
<script type="text/javascript" src="../../scripts/immersiveTakeover_script.js"></script>
How to load and initialize the Immersive Takeover
Before to initialize the Immersive Takeover you only need to identify the "asset", depending on this option the banner or panel will load different functions and the behavior could be changed.
Example:
var config = {
panel: "header"
};
var immersiveTakeover = new immersiveTakeover(config);
"panel": define the type of the element for the immersiveTakeover,
Options: "header", "left_gutter", "right_gutter", "background", "videoskin", "controls" or "standard" (in the case that you want to add a standard panel)
If it´s empty or undefined it will be like a standard panel.
Video Example:
var config = {
panel: "videoskin",
videoWidth:1100,
videoHeight:416,
videoURL: "videos/video1.mp4",
videoPoster: "videos/video1.jpg"
};
var immersiveTakeover = new immersiveTakeover(config);
"videoWidth" &"videoHeight": In the case you want to use the "resizeVideo" function in a panel with video to get a good aspectRatio, you will need to set up the "videoWidth" and "videoHeight" of your video asset
Options: An integer value.
"videoURL": A string containing the source URL of the video desired or an array of strings if multiple codecs for the same video is required.
Options: Single source URL as a string, "videos/video1.mp4"
or multiple sources/codecs as an array of strings, ["videos/video1.mp4", "videos/video1.webm", "videos/video1.ogv"]
Note: During video tag dynamic generation the file extension included in the source URL string will be used to generate the related videos source tag's "type" parameter value. EG: <source src="videos/video1.mp4" type="video/mp4">
"videoPoster": A string containing the source URL of the video poster image desired.
Options: Source URL as a string, "videos/video1.jpg"
Example:
var config = {
panel: "controls",
initialPosition:"top-center",
expandedPosition:"top-center",
collapsedPosition:"top-right",
showDelay: 1000
};
var immersiveTakeover = new immersiveTakeover(config);
You can change the position of the controls panel of the three different states, using these options: top-left, top-center, top-right, bottom-left, bottom-center or bottom-right
When the VideoSkin is loaded "initialPosition" it will be shown in the top-center of the page by default.
When the VideoSkin is expanded "expandedPosition" it will be shown in the top-center of the page by default.
And When the VideoSkin is collapsed "collapsedPosition" it will be shown in the top-right of the page by default.
Each panel has the option to be shown with a different delay, you can change it using n milliseconds and modify the property "showDelay" in the config variable.
var config = {
panel: "videoskin",
videoWidth:1100,
videoHeight:416,
videoURL: "videos/video1.mp4",
videoPoster: "videos/video1.jpg"
showDelay: 1000
};
var immersiveTakeover = new immersiveTakeover(config);
Updating Header Panel
The header section of the index.html loads the essential stylesheets, the adkit API script, and the creative javascript file. The header is responsive and adapts to any screen size using our templates. All the elements are placed in relative position and all of the properties are set in percentage so that elements appear correctly in all device sizes.
If frequency capping is set, the header will auto-expand and auto-collapse after few seconds, if the value mentioned within the mdAutoCollapseTimeout custom variable is greater than zero.
The header panel of the VideoSkin and ImageSkin are transparent and don't contain any creative elements.
If you are not using our templates, you need to include the essential files and you only need to add the following lines at your code to initialize the immersiveTakeover format:
var config = {
panel: "header"
};
var immersiveTakeover = new immersiveTakeover(config);
The custom script will wait for other panels to load and once all of the panels have been loaded, the custom script will dispatch the following event 'afterShowPanelContent' to all panels notifying those panels to show their creative elements. Within the header script, once this event is received, certain creative elements will fade in. If you identify the asset like "header" you will receive some options callbacks from the customscript.
Functions from the header:
- When you want to expand the header, you must invoke this function:
immersiveTakeover.expand();
- When you want to collapse the header, you must invoke this other function:
immersiveTakeover.collapse();
Callbacks for the header (optional to use):
- Header has the behavior to expand and collapse, you can control each state.
- When the Expand animation is starting:
function afterExpandAnimStart(args) {
/* Implement code logic to fire on Expand animation start */
}
- When the Expand animation is completed:
function afterExpandAnimComplete(args) {
/* Implement code logic to fire on Expand animation Complete */
}
- When the Collapse animation is starting:
function afterCollapseAnimStart(args) {
/* Implement code logic to fire on Collapse animation start */
}
- When the Collapse animation is completed:
function afterCollapseAnimComplete(args) {
/* Implement code logic to fire on Collapse animation Complete */
}
Updating Gutters
To customize the gutters, open index.html
from panels/left_gutter
, style.css
from panels/left_gutter
or panels/right_gutter
, and script.js
from panels/left_gutter
or panels/right_gutter
using an HTML-authoring environment. Gutters within the VideoSkin and ImageSkin templates do not contain any creative elements.
If you are not using our templates, you need to include the essential files and you only need to add the following lines at your code to initialize the immersiveTakeover format:
var config = {
panel: "left_gutter"
};
var immersiveTakeover = new immersiveTakeover(config);
or
var config = {
panel: "right_gutter"
};
var immersiveTakeover = new immersiveTakeover(config);
Updating Background
To customize the background panel, open the panels/background/index.html
, panels/background/style.css
and panels/background/script.js
using an HTML-authoring environment.
The background panel of the VideoSkin template contains a static image and video.
If you are not using our templates, you need to include the essential files and you only need to add the following lines at your code to initialize the immersiveTakeover format:
var config = {
panel: "background"
};
var immersiveTakeover = new immersiveTakeover(config);
or if you are using the video background option (videoskin)
var config = {
panel: "videoskin"
};
var immersiveTakeover = new immersiveTakeover(config);
All the panels
All the panels have the same Callbaks for different events and you can use it if you need it
Callbacks for all panels (optional to use):
- afterShowPanelContent: When the panel is shown
function afterShowPanelContent(args) {
/* Implement code logic to fire when the panel is shown */
}
- onPanelLoaded: When the panel is loaded
function onPanelLoaded(args) {
/* Implement code logic to fire when the some panel is loaded */
if (args.panelName.toLowerCase() == 'leftgutter') {
/* do something */
}
else if (args.panelName.toLowerCase() == 'rightgutter') {
/* do something */
}
}
- onPanelUnload: When the panel is unloaded.
function onPanelUnload(args) {
/* Implement code logic to fire when the some panel is unloaded */
if (args.panelName.toLowerCase() == 'leftgutter') {
/* do something */
}
else if (args.panelName.toLowerCase() == 'rightgutter') {
/* do something */
}
}
- adWasClicked: when the clickthrough is fired all the panels will call this function and you can decide if you want to do something. For example: after clicktrought the video can be paused
function adWasClicked(args){
videoRef.pause();
console.log("Ad was clicked");
}
- onPageScroll: If you want to use "onPageScroll" feature you only need to add this function to your code. The function will recieve when the user scrolling up/down the percent of the scrollX and scrollY
function onPageScroll(args) {
args.scrollXPercent;
args.scrollYPercent;
}
Adding a video
To add a video to your project you must provide a container div in which the actual video tag and source tag(s) will be injected. The video container div should not contain any child divs. No hardcoded video and/or source tags should be placed in the HTML document. The actual video tag and source tag(s) are dynamically generated from within the template script named immersiveTakeover_script.js. This allows the final tag(s) to be loaded into the DOM in a proper state per the desired functionality and environment.
You can use these functions to initialize the video and video tracking. Callbacks, if utilized, are dispatched on the following video events; ready, play, pause, end and volume change. See the "Video Callback Functions" section below for further details.
- To initialize the video
immersiveTakeover.initVideo(videoContainerRef);
The single parameter accepted by the immersiveTakeover.initVideo function is a reference to the element in which the dynamically generated video tag is to be injected. If no parameter is passed the script will automatically search for an element with an ID of "video-container" within the HTML DOM in question in which to inject the video.
<div id="video-container"></div>
You can use the standard events to control the video to play, pause, load, mute, etc...
videoRef.play();
videoRef.load();
videoRef.muted = true;
- To resize the video holding the aspect ratio (you will need a Div container for your video element)
immersiveTakeover.resizeVideo(videoContainerRef);
The video-container should have the following or similar style:
#video-container{
background-color: black;
position: absolute;
width: 100%;
height: 92%;
}
When creating the "config" object listed below you may alter the default setup as required and per this document to optimize the settings for your use case. For instance you may change the "videoWidth" & "videoHeight" values per the aspect ratio of your video and to achieve the best resolution possible.
var config = {
panel: "header",
videoWidth:1100,
videoHeight:416,
videoURL: "videos/video1.mp4",
videoPoster: "videos/video1.jpg"
};
The Video Callback functions:
- When the video is injected into the page and ready for function calls and interaction:
function afterVideoReady(args) {
/* Implement code logic to fire when the video is ready for function calls and interactions */
}
Note: It is recommended to capture a reference to the dynamically created video within the afterVideoReady callback function as this is the soonest point at which it will be available. The args
parameter will contain a reference to the video which can be read via args.video
. Please note the video reference is passed within the args
parameter of all video related callbacks. Should one not require a reference to the video element outside of the video related callback functions, or at all, one need not capture said reference.
- When the video is Played:
function afterVideoPlay(args) {
/* Implement code logic to fire when the video Play */
}
- When the video is Ended:
function afterVideoEnd(args) {
/* Implement code logic to fire when the video End */
}
- When the video is Paused:
function afterVideoPause(args) {
/* Implement code logic to fire when the video Pause */
}
- When the volume of the video is changed:
function afterVolumeChange(args) {
/* Implement code logic to fire when the volume Change */
}
Synchronize Panels:
You can synchronize all the panels in the case you want to use an animation starts at the same time or you want to start some animation after some determinate action in some panel. You only need to invoke the function "syncAllPanels" when you need it and you can send a string parameter.
Example: from the header panel using the callback function "afterShowPanelContent" you can send "start" to initialize at the same time the animation for all panels)
function afterShowPanelContent(args) {
immersiveTakeover.syncAllPanels("start");
}
After calling this funcion all the panels you have in the workspace will execute the function "syncAll", which you can use to start some animation.
function syncAll(args) {
switch (args.state) {
case "start":
/* Starting the animation */
break;
case "end":
/* more options */
break;
}
}
args.state: it will have the string message if you need to send several message maybe you can use a switch.
if you want to synchronize only with a specific gutter you can use this other method.
immersiveTakeover.syncGutterLeft();
or
immersiveTakeover.syncGutterRight();
After invoke it from any panel the left/right panel will execute this function:
function syncGutterLeft() {
/* Implement code logic to fire when the synchronize is invoked */
}
or
function syncGutterRight() {
/* Implement code logic to fire when the synchronize is invoked */
}
Other utilities you can use:
- closePanel: You can close the panel from which is called this function and you can select if the interaction is done by user or automatically. Default: by user
- By User
immersiveTakeover.closePanel(); /* Or */
immersiveTakeover.closePanel(false);- Auto
immersiveTakeover.closePanel(true);
- closeAllPanels: If you need to close all panels at the same time you can use this function from any panel.
immersiveTakeover.closeAllPanels();
- fontResize: it´s an utility to resize some font in the project. the function will recieve the reference of the element and the minimun of the size of the font and the function will modify the fontSize depending of the resolution of the device.
var clickthroughExpandBtn = document.getElementById("clickthrough-expand");
immersiveTakeover.fontResize(clickthroughExpandBtn, 4);
- getInfo: with this function you will get all the information about the environment of the device, like if the Ad is in local, or if the device is a mobile, IOS or if the browser doesn't supported the autoplay feature. So you can change the behavior according to the device.
var infoDevice = immersiveTakeover.getInfo();
var isLocal = infoDevice.isLocal; /* if the asset is loaded in local (true/false) */
var isMobile = infoDevice.isMobile; /* if the device is mobile (true/false) */
var isIOS = infoDevice.isIOS; /* if the device is IOS(true/false) */
var isUnsupportedBrowserAutoPlay = infoDevice.isUnsupportedBrowserAutoPlay;
/* if the device is not compatible with autoplay feature of the video (true/false) */
Note: Autoplay of the video will not be available in some unsupported devices/environments, such ad iOS9 and below. In this case the video will automatically default to click to play behavior regardless of the autoplay setting. Currently the only environments listed within the support matrix for this template, as seen in the "Supported Platforms" section of this document, which do not support autoplay video are iOS9 and Samsung browser version 6.
- loadAdditionalAsset: to inject an image from additional asset using the ID in some element in the Ad. You will need the element where will be loaded and the relative Path for local testing
Example:
var background = document.getElementById("background");
immersiveTakeover.loadAdditionalAsset(background,2,"../../images/gutterLeft_background.png");
- setPanelZIndex: this function is only if you need to change the Z-index in some panel manually. It will affect only the panel which is used and it´s necessary to indicate the number of the Z-index you want to use.
Example:
immersiveTakeover.setPanelZIndex(20);
- seteyeDivZIndex: this function is only if you need to change the Z-index of the EyeDiv manually. It will affect all the panels which are inside of the eyeDiv and it´s mandatory to indicate the number of the Z-index you want to use.
Example:
immersiveTakeover.seteyeDivZIndex(5);
Configuring Layout Per Domain
Note: While the usage of domainConfig.js IS still allowed but it´s disabled by default, if you want to enable it you only need to delete the comments line in the index.html of the banner and create the domainConfig.js with your set up, usage of Programmatic Custom Variables is the preferred method going forward.
The domainConfig.js contains domain-related customization details, that allow you change both ad layout, and with publisher approval even the site layout per domain. While this method has been deprecated in favor of using the Programmatic Settings, support does still exist in the format for domainConfig.js
How to enable this feature: You only need to load the domainConfig.js from "index.html" file in the banner
<script type="text/javascript" src="scripts/domainConfig.js"></script>
The following customizations are allowed using the domainConfig.js
script, found within the scripts>domainConfig.js
. All customizations are also supported as (and, in fact, would be preferable to use via Programmatic Settings) Custom Variables.
Customization |
Description |
|
Domain name for which this setting will be applied. Just a subdomain and domain name is enough and not required a full domain url. |
|
Set z-index of eyeDiv that holds left gutter, right gutter and header panel. |
|
Page content div reference to align left and right gutter. |
|
Page header div reference to align gutter from top. |
|
offset from total page content(default is 0) |
|
offset from header (default is 0) |
|
Align gutter to top if header goes out of view. |
|
Page content div referend to push background panel. |
|
URL for the site style sheet to push in page content header. |
|
URL for the javascript file that will be injected in page header. |
|
Background panel z-index. |
Example:
var domainConfig = [{
domainName: 'demo.sizmek.com',
eyeDivZindex: 10,
contentSelector: '#siteContainer',
headerSelector: '#siteHeader',
contentOffset: 0,
headerOffset: 0,
alignTopScroll: false,
backgroundPlacementSelector: 'body',
backgroundInjectType: 'Last',
siteStylesheet: 'siteStylesheet/sizmek_demo.css',
siteJavascript: 'siteJavascript/sizmek_demo.js',
backgroundZindex: -1
}];
Important: If you need to have a single ad tag work across a network of sites, you will need to either edit the deprecated file domainConfig.js to set different properties across different publishers, or work with the Sizmek Ad Format Certification Team to ensure the custom variables are set as needed by publisher specifications across all intended sites.
Customizing an Immersive Takeover VideoSkin
All of the Immersive Takeover functionality is programmed in the template files. At minimum, the only changes you will need to make are to the loaded image and its style.
Note: When updating or replacing images or videos, make sure to also update references to their file names and dimensions found in index.html
, style.css
and script.js
as necessary.
To update the layout, design, and functionality of a template, open the HTML
, CSS
, and JS
files in a text editor.
Common Customizations
Configuring Background
To make the background panel appear in correct location, set the mdBackgroundPlacementSelector to a valid CSS selector. The background panel will then be moved from its original div to a reference div mentioned in the variable. You can also use an additional property that handles how to place background panel in div. Check mdBackgroundInjectType for for more details.
Configuring Gutters
To align gutters correctly around the page content, mdContentPlacementSelector to valid CSS selector that will give the page width. To align gutters correctly from top, headerSelector to valid CSS selector to read header height if any.
Gutters can be set to display in fixed location or scroll with page, set mdPosition to either 'fixed' or 'scroll'. Gutters are responsive and adapts to any screen size and they can also set to static width. Setting mdLeftGutterMinWidth/mdLeftGutterMaxWidth or mdRightGutterMinWidth/mdRightGutterMaxWidth to the same value will make gutters gutters with fixed width.
The minimum and maximum width for responsive gutters may be set by updating mdLeftGutterMinWidth/mdRightGutterMinWidth and mdLeftGutterMaxWidth/mdRightGutterMaxWidth. Gutters can be set to fill the entire available space by updating mdLeftGutterMaxWidth/mdRightGutterMaxWidth to 0. If there is not enough room to show the gutters in the browser, gutters disappear.
Configuring Header
Header panel align correctly in page content by accessing parent div in which placement tag is placed and if for some reason if it fails to read it, then fall back value from mdMinHeaderWidth custom variable will be used. mdHeaderHeightBreakPoints will define header collapse height for different viewport area.
Detecting Scroll Position
All the provided templates have a function that handles keeping aware of the current scroll position. When the ad first loads, the current scroll position is received. Upon any scroll, resize, or orientation change, the new scroll position will be updated. You can access the current scroll position, available in values from 0 to 100 (percentage scrolled), via the global object and properties scrollXPercent
and scrollYPercent
from the creative script.js. If you want to have code that adjusts positioning when the scrollPositioning is updated, you can put your code in the onPageScroll function in script.js.
Note: Occasionally there is network trouble causing the scroll detection code to fail, so be sure to not rely on scroll position without including backup functionality in case of failure.
Manifest Configuration (config.js file)
We have outlined some information about this file below, but for a more detailed description, please see the article in the Sizmek Help Center by going 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.
Testing Your Immersive Takeover
You can test the banner by opening the index.html files in a modern browser. This is not, however, a reliable representation of how the ad might behave on a publisher page. This will depend on the layout of the publisher page and the Custom Variable settings.
Setting up an Immersive Takeover in the Sizmek Platform
Set up in the MDX2.0 Platform
Procedure
- Archive the Immersive Takeover workspaces into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
- In the Sizmek MDX, under Creative Assets, create a new Workspace by uploading the ZIP file.
- Under the Ads section, create an ad using the workspace that you have uploaded.
- Set the Ad Format to Immersive Takeover and fill out the form.
- Add backup image
1x1.jpg
from images folder. Since banner is set to 1x1 dimension, backup image is also set to 1x1. - Add the following panels to the Panels List.
- Add header panel, set panel name as 'header' and select index.html from
panels/header
folder. Set position type to 'Banner Relative' and Auto retract to 'Never'. - Add background panel, set panel name as 'background' and select index.html from
panels/background
folder. Set position type to 'Page Relative-Pixels' and Auto retract to 'Never'. - Add left gutter panel, set panel name as 'leftGutter' and select index.html from
panels/left_gutter
folder. Set position type to 'Page Relative-Pixels' and Auto retract to 'Never'. - Add right gutter panel, set panel name as 'rightGutter' and select index.html from
panels/right_gutter
folder. Set position type to 'Page Relative-Pixels' and Auto retract to 'Never'. - Add controls panel (if VideoSkin template selected), set panel name as 'controls' and select index.html from
panels/controls
folder. Set position type to 'Page Relative-Pixels' and Auto retract to 'Never'.
- Add header panel, set panel name as 'header' and select index.html from
- Uncheck 'Show single panel at a time'
- Set the frequency capping as per campaign requirement.
- Save the ad.
- Under the Advanced Features section, customize the Variables to your needs.
- Create a new placement for the ad.
- Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
- After you've saved your placement, you can then generate preview tags to test on your web site.
Note: On the Sizmek Platform, your user account will need access to the Immersive Takeover format in the list of available custom formats. If you do not have access to this format, please reach out to Support to gain permissions for this format.
Set up in the Sizmek Advertising Suite Platform
Procedure
- Archive the Immersive Takeover into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
- Click Creative > Assets Library, create a new Workspace by uploading the ZIP file.
- Click Creative > Ads, and then click New Ad > New Master Ad.
- Set the Ad Format to Immersive Takeover and fill out the form.
- Add backup image
1x1.jpg
from images folder. Since banner is set to 1x1 dimension, backup image is also set to 1x1. - Add the following panels to the Panels List.
- Add header panel, set panel name as 'header' and select index.html from
panels/header
folder. Set position type to 'Banner Relative' and Auto retract to 'Never'. - Add background panel, set panel name as 'background' and select index.html from
panels/background
folder. Set position type to 'Page Relative-Pixels' and Auto retract to 'Never'. - Add left gutter panel, set panel name as 'leftGutter' and select index.html from
panels/left_gutter
folder. Set position type to 'Page Relative-Pixels' and Auto retract to 'Never'. - Add right gutter panel, set panel name as 'rightGutter' and select index.html from
panels/right_gutter
folder. Set position type to 'Page Relative-Pixels' and Auto retract to 'Never'. - Add controls panel (if VideoSkin template selected), set panel name as 'controls' and select index.html from
panels/controls
folder. Set position type to 'Page Relative-Pixels' and Auto retract to 'Never'.
- Add header panel, set panel name as 'header' and select index.html from
- Uncheck 'Show single panel at a time'
- Set the frequency capping as per campaign requirement.
- Save the ad.
- Under the Advanced Features section, customize the Variables to your needs.
- Create a new placement for the ad.
- Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
- After you've saved your placement, you can then generate preview tags to test on your web site.
Custom Script Notice: Since Immersive Takeover format is a HTML5 Custom Format, there is no need to attach a custom script since the appropriate one will be pulled in automatically. For reference, the following custom script is being used:
PL_ImmersiveTakeover.js
Note: The above custom script may be served either securely or insecurely based on the option selected in the platform
Custom Variables
L, R, C (for Left, Right, and Center, respectively)
Custom Variable Name |
Type |
Description |
Default Value |
|
String |
Right Gutter panel name as set on the platform. |
|
|
String |
Left Gutter panel name as set on the platform. |
|
|
String |
Gutters div positioning style. fixed or scroll |
fixed |
|
String |
You will be able to inject a background image only once when the Ad is loaded in the publisher's page. You can select the element and the behavior to inject. |
enabled:false, img:images/background_default.jpg, color:#000000, size:cover, position:top center, repeat:no-repeat, attach:fixed, fade:fade-in, fade_time:3000, inject:body, injectType:div, clickable:false |
|
Number |
Panel reposition interval. 0 for turn off the interval. Panels reposition in every "n" milliseconds. |
100 |
|
Number |
Page content width |
970 |
|
String |
The default z-index of the eye div. |
undefined |
|
Number |
Gutters default height. |
1000 |
|
Number |
To define the top position of the Gutters. First JavaScript will try to get value from the current page and apply that value to set the top position of the gutters, but if JavaScript failed to get any value from the page it will take value from this custom variable. |
0 |
|
String |
Header panel name as set on platform |
header |
|
String |
Background panel name as set on platform |
background |
|
String |
Div reference to inject background panel. A valid CSS selector should be present in this variable to successfully push background panel. |
body |
|
String |
Background panel injection type first: Insert as a first child a div. last: Insert as a last child of a div. after: Insert after a div. before: Insert before a div. |
Last |
|
String |
Header panel behaviour will change based on the option selected. [breakpoints]:Header panel height will change based on this break points. If viewport falls in any of the range then that respective height will be set to header panel. browserWidth: Header width will be the same as the browser width, the banner height stays the same as the placement height. |
0-781:450,782-1023:250,1024-4000:250 |
|
Integer |
Header panel expanded height |
417 |
|
Integer |
Minimum header width if custom script fails to read page content width |
970 |
|
Integer |
Expand header panel to fullscreen if viewport value is less than value mentioned in this variable |
3000 |
|
Integer |
Delay to auto collapse header pane when panel auto expands. |
10 |
|
Integer |
Background panel z-index |
-1 |
|
Integer |
Top offset to display above the header panel |
0 |
|
Integer |
Bottom offset to display above the header panel |
0 |
|
Boolean |
Show or hide gutters. |
true |
|
String |
Controls panel name as set on platform Note: Only for VideoSkin template. |
controls |
|
Integer |
Header expansion percentage. If set to 100, header will expand to fullscreen by pushing page content outside. If set to value less than 100, some part of page content may be displayed at the bottom. Note: Only for VideoSkin |
100 |
|
Boolean |
Animate expand/collapse header panel. If set to false, header will immediate expand/collapse. |
true |
|
Integer |
Time taken by header panel to expand animate. |
1000 |
|
Integer |
Time taken by header panel to collapse animate. |
1000 |
|
String |
Easing for header panel expand and collapse animation. Accepted values:
|
|
|
Integer |
Delay auto expansion by value mentioned in this variable. |
0 |
|
Boolean |
Expand header panel to fullscreen. Note: Only for VideoSkin template. |
true |
|
String |
Relative path to the backup image, if a custom image is desired. This allows a fallback experience to display an image that is not a 1x1 even though the tag is a 1x1 tag. Template workspace includes a file that could be used here as an example, if this custom var were set to "images/970x250_Default.jpg" When set to undefined, the normal 1x1 fallback occurs. |
undefined |
|
String |
Alignment of the content on the page. This var is only used if mdContentPlacementSelector is undefined. This is used for purposes of positioning the gutter elements |
C |
|
Integer |
Number of pixels of padding between the width of the content and the start of the gutter panels. |
0 |
|
String |
Div reference to detect content of page. A valid CSS selector should be present in this variable to successfully detect the content location and width. When this var is set to anything other than undefined, mdContentWidth, mdContentAlignment, and mdContentXPosOffset are ignored and are instead calculated by using the width and location of this element. This is used for purposes of positioning the gutter elements There is a new and experimental method to get automatically the widest element from any page. You can enable with this:
Note: You will find more details about this feature below.
|
undefined |
|
Boolean |
Align gutters to top if header goes out of view. |
false |
|
Integer |
Value, in pixels, to offset the detected location of the content area. Positive value moves the content location to the right, negative value moves the content location to the left. This allows for asymetrical layouts with padding on the left/right. This var is only used when mdContentPlacementSelector is undefined. This is used for purposes of positioning the gutter elements |
0 |
|
String |
Header panel injection type First: Insert as a first child a div. Last: Insert as a last child of a div. After: Insert after a div. Before: Insert before a div. |
After |
|
Integer |
Vertical offset from header, affects header panel and gutter panels |
0 |
|
String |
Div reference to inject header panel. A valid CSS selector should be present in this variable to successfully push header panel. If undefined, will inject header at tag location |
undefined |
|
Integer |
Left gutter maximum width. Set to 0 to define if left gutters should cover available page width on left side of site content. |
500 |
|
Integer |
Left gutter minimum width. |
100 |
|
Integer |
Right gutter maximum width. Set to 0 to define if right gutters should cover available page width on right side of site content. |
500 |
|
Integer |
Right gutter minimum width. |
100 |
|
Boolean |
Whether or not to load the programmatic settings. |
false |
|
String |
Location from which to load the programmatic settings files. |
//services.serving-sys.com/programmatic/DomainList/ |
|
Number |
This var is ONLY for the mdBackupImage experience. If you set this var to true, then the min-width and min-height of the parent elements of the ebDiv tag will be set to the dimensions of the backup image, so that the backup image will not be cropped/clipped |
0 |
|
Boolean |
In mobile and tablet devices when the orientation is changed automatically the scrollbar will be moved to the position of the header. In the case that there is no header will be moved to the top of the page. |
true |
Inject a background image on the publisher's page
It´s possible change the body or a specific element in the DOM of the page to inject your background image. You can use a simple background or you can setup a advance setup using breakpoints to select when you want load a specific background. For example you will be able to have a background for mobile devices in portrait mode or for low/higth resolution.
You have 3 methods to inject a background in the publisher page.
1. The custom Variable "mdPageBackground"
If you use this method you will be able to inject a background image only once when the Ad is loaded. It´s not necesary extra code in the workspace and you can setup different option to show the image in the publisher's page.
Default value: |
Note: You have to be careful to use this option at the same time with the mediaqueries option. Because maybe you can overwrite the custom variable result when the Ad is loaded in the page and you will not get the result.
Variables |
Description |
Values |
|
You can enable or disable this feature. If it´s TRUE the background will be injected in the publisher's site |
Default: false Options: true/false |
|
You can put the path of an image that you have in your workspace or you can use a number if you want to select an additional asset |
Default: images/background_default.jpg Options: Numbers / complete path in your workspace |
|
You can select a Hex color or you can write a color name like "red", "green", etc.. it will be the background color of the page. |
Default: #000000 Options: Hex. numbers, Red, Blue, transparent, etc.. |
|
The background size will be different in the page depending on the option selected. |
Default: cover Options: cover ,contain, auto, percentage, etc..
|
position |
The background will be positioned horizontaly or vertically depending of the option selected
|
Default: top center Options: top, center, left, right, bottom, x% y%, xpos, ypos. |
repeat |
The background will be repeated or not. If you want use the repeat option you should be use a small image for a good result. |
Default: no repeat Options: repeat, repeat-x, repeat-y, no-repeat |
attach |
The background will be injected in the plublisher page with different behaviour when you scroll up/down |
Default: fixed Options: fixed, scroll, loca, inherit, initial |
fade |
The background will have a tween and you can select between these three options to change the tween animation style. With the value 'none' the background will be shown suddenly without any animation. |
Default: fade-in Options: fade-in, fade-out, fade-in-out, none |
fade_time |
It´s the duration of the tween animation when the background is injected in the site. |
Default: 3000 Options: number in miliseconds |
inject |
It´s the element in the DOM that it will be applied all the setup. You can select a class(.myClass) or id (#myDiv) or a tag name (header) |
Default: body Options: any element in the DOM of the page. |
injectType |
There are 2 ways to inject the background in the publisher´s page.
Note: This option will not have a fade-in/out (tween) when the image is shown
|
Default: Div Options: style or div |
clickable |
if it´s TRUE the background will be clickable on the page with two dynamic, which will be created using 2 divs (without panels for gutters) |
Default: false Options: true/false |
2. From the WorkSpace: Invoke the changePageBackground function that is included in the workspace ImageSkin.
changePageBackground (image, color, size, position, attach, repeat, fade, fade_time, inject, injectType, clickable);
Variables |
Description |
Values |
|
You can put the path of an image that you have in your workspace or you can use a number if you want to select an additional asset |
Default: images/background_default.jpg Options: Numbers / complete path in your workspace |
|
You can select a Hex color or you can write a color name like "red", "green", etc.. it will be the background color of the page |
Default: #000000 Options: Hex Number, Red, Blue, transparent,etc.. |
|
The background size will be different in the page depending on the option selected. |
Default: cover Options: cover ,contain, auto, percentage, etc..
|
position |
The background will be positioned horizontaly or vertically depending of the option selected
|
Default: top center Options: top, center, left, right, bottom, x% y%, xpos, ypos. |
repeat |
The background will be repeated or not. If you want use the repeat option you should be use a small image for a good result. |
Default: no repeat Options: repeat, repeat-x, repeat-y, no-repeat |
attach |
The background will be injected in the plublisher page with different behaviour when you scroll up/down |
Default: fixed Options: fixed, scroll, loca, inherit, initial |
fade |
The background will have a tween and you can select between these three options to change the tween animation style. |
Default: fade-in Options: fade-in, fade-out, fade-in-out |
fade_time |
It´s the duration of the tween animation when the background is injected in the site. |
Default: 3000 Options: number in miliseconds |
inject |
It´s the element in the DOM that it will be applied all the setup. You can select a class(.myClass) or id (#myDiv) or a tag name (header) |
Default: Body Options: any element in the DOM of the page. |
injectType |
There are 2 ways to inject the background in the publisher´s page.
Note: This option will not have a fade-in/out (tween) when the image is shown
|
Default: Div Options: style or div |
clickable |
if it´s TRUE the background will be clickable on the page with two dynamic, which will be created using 2 divs (without panels for gutters) |
Default: false Options: true/false |
Note: To avoid conflicts using different methods. When you use a new method the previous method will be deleted to use the new one.
Example: if you use the variable "injectType" with the value "Div" and after you use the "injectType" with the value "style" the Div with the first background will be removed from the page.
3. From the WorkSpace: Using the mediaQueries method: the functions are included in the workspace ImageSkin You can use mediaQueries method to define the breakpoints you want inject in the CSS of the publisher's page to improve the user experience when the ad is loaded in diferent devices with diferent resolution.
You can add all the mediaQueries that you need. You only will need the following structure:
var breakpointsBackgroundsList = [{
mediaQuery: "screen and (min-width: 960px)",
setupBackground: {
img: "images/background_default.jpg",
color: "",
size: "cover",
position: "top center",
attach: "fixed",
repeat: "no-repeat",
fade: "fade-in",
fade_time: 0,
inject: "body"
}]
Customization |
Description |
|
You can add the media query you want use. The basic media queries control the width or/and height but you can include the 'orientation' or advanced behavior like control the minimum device pixel ratio. You don't need to include '@media' in the string |
Examples of MediaQueries:
Note: these mediaQueries are examples to know how to use it, you can include more mediaQueries for each device you want to show an image properly.
|
|
|
You can setup the behavior of your background for each mediaquery you use. For a good experience you can modify the following values:
You will get (more information here) for each one above. |
Example:
setupBackground: {
img: "images/background_default.jpg",
color: "#000000",
size: "cover",
position: "top center",
attach: "fixed",
repeat: "no-repeat",
fade: "fade-in",
fade_time: 3000,
inject: "body",
clickable: false
}
Automatic detection of the widest element (Experimental feature)
This new feature will search on the content of any page the widest element to setup automatically the custom variables mdContentPlacementSelector and mdContentWidth. it´s designed to use the Immersive Takeover format in networks with the same tag in rotation.
If you want to enable the automatic detection only will need to change the value of the custom variable mdContentPlacementSelector
The basic method is use:
{"automaticDetection": true}
If you want to customize the searching of the element you have some parameters to change:
Variables |
Description |
Values |
|
It´s the type of the element you want to search on the page |
Default: "div" Options: div, header, span, button, etc.. |
|
You can control the maximum and minimum of the width of the pixels for the element you are searching |
Default: "300,1800" Options: Numbers - minimum/maximum |
|
All the elements names that you want to skip in the searching process of the widest element |
Default: "header,footer,dfp,google,input,search,hide,nav,fb,module,column" Options: String |
priority |
The ID or Class names that you want to prioritize in the searching process of the widest element. In the case of a "priority" element is found it will be checked if this element isn't in the "avoid" elements. Example: "#container hide" will be avoided because contain the word "hide" to avoid |
Default: "#container,#wrapper,.container,.wrapper,.main,#main" Options: String |
Example:
{"automaticDetection":true,
"search":"div","horizontalTreshold":"300,1800",
"avoid":"header,footer,dfp,google,input,search,hide,nav,fb,module,column",
"priority":"#container,#wrapper,.container,.wrapper,.main,#main"}
Custom Interactions
The following custom interactions are reported by the ad and can be reviewed in Sizmek reporting (besides standard ad interactions).
Interaction Name |
Description |
|
(Auto) When left gutter expands for first time |
|
(Auto) When right gutter expands for first time |
|
(Auto) When the videoSkin is expanded automatically |
|
(User) When user click on the expand button or Play button |
collapse_immersiveTakeover_auto |
(Auto) When the VideoSkin is collapsed automatically |
collapse_immersiveTakeover_user |
(User) When user click on the collapse button |
click_left_gutter |
Clickthrough fired once user click on clickthrough button appearing in the left gutter. |
click_right_gutter |
Clickthrough fired once user click on clickthrough button appearing in the right gutter. |
click_background |
Clickthrough fired once user click on the background panel. |
Change Log
Release: August 6, 2018 (v1.5.1)
- v1.5.1 The manner in which the video is added to the templates has been revised. The video tag is now dynamically generated within the "initVideo" function of the "immersiveTakeover_script.js" file and injected into the panel. This allows for the video tag and source tag(s) to be loaded into the DOM in a proper state per the desired functionality and environment. Through this revision the environments in which autoplay video will function has been dramatically increased. All updates related to dynamic creation and injection of the video by the template is as follows;
- The HTML document of panel in which the video is to be injected must contain a video container div, optimally with ID "video-container". This container should have no child elements.
- The HTML document must not have any hard coded video or source tags.
- The "config" object passed in as the parameter of the call to "new immersiveTakeover(config);" has been expanded to require the following two new key value pairs in the panel in which the video will reside.
- videoURL:
- "videos/video1.mp4", // For a single video codec.
- ["videos/video1.mp4", "videos/video1.webm", "videos/video1.ogv"] // For multiple video codecs.
- videpPoster:
- "videos/video1.jpg",
- videoURL:
- The "initVideo" function call now takes a reference to the video container div as it's parameter. If no parameter is passed the "initVideo" function within the "immersiveTakeover_script.js" script file will attempt to locate a div with ID "video-container".
- A new video callback has been added, named "afterVideoReady". This callback will fire off when the video has been injected into the panel and is ready for both function calls and interaction.
- A new key, "video", has been added to the existing "args" object passed to all video related callback functions as their sole parameter. The value of this key is the dynamically created video element. The earliest point at which the panel can gain a reference to the dynamically created video element is within the newly added "afterVideoReady" callback.
- Minor updates to the naming of video and video container related variables has been performed in the "immersiveTakeover_script.js" file as well as the "script.js" file of the panel in which the video resides for consistency and clarity.
- The "resizeVideo" function of the "immersiveTakeover_script.js" script file will now return without running any code if the dynamically created video is not yet available.
- V1.5.1 Bug Fixs.
- Corrected an issue where when "mdAlignTopScroll" is set the gutters are not re-aligning them selves as they should per "mdGutterTopPos" on scroll but did on resize and load.
- Video - Corrected an issue related to the updated size and styles of the native video controls in Chrome desktop browser version 68 which led to the CTA overlapping the video controls as per it's current placement. Detection was aded for this browser/version. When detected the CTA in question is re-positioned. Detection and repositioning is not active during local testing as the detection relies on platform variables which do not populate when the unit is in local testing mode.
- Video - Corrected an issue where if one should click the video area where it is hot to trigger a call to video play while the panel is in the process of contracting, the call to play will be successful and the video will play while in the collapsed state. On video collapse complete, the template will check if the video exists and is not in a paused state. If both are true, the template will call video pause.
- VideoSkin - Corrected an issue where if the expand/collapse animation is running while a user clicks the expand/collapse buttons, the button state will change but have no affect on the actual creative state. Subsequent expand/collapse button interactions can then also have no affect as the proper state has become out of sync.
Release: May 10, 2018 (v1.4.0)
- v1.4.0 The custom format and all templates were renamed. The format was renamed from "Immersive Skin" to "Immersive Takeover" and some templates were renamed:
- From "VideoWall" to "VideoSkin"
- From "Image-Wallpaper" to "ImageSkin"
- v1.4.0 The templates have been totally updated and the code was cleaned up, now it's non-coders friendly. You will find in the code only the basic functions (Callbacks) for specific events of the format for each panel which are optional to use. All the advanced functions are in a separate JS file "immersiveTakeover_script.js" which it´s not necessary to modify.
- v1.4.0 New Header experience, the new custom variable mdHeaderSizeInheritence you can get a different behaviors of the header panel when is loaded on the content of the page. You can use the Breakpoints option like in the past but now you can use "browserWidth", "publisherContainerSize" and "adaptiveOnAuto" options.
- v1.4.0 New easy method to synchronize all panels that now you can start an animation at the same time in all panels or sending "Strings" to any panel.
- v1.4.0 Now you can add easily the Immersive Takeover experience in your projects made with Adobe Animate or from Scratch. You only will need to load this JS file "immersiveTakeover_script.js" and CSS file "immersiveTakeover_style.css" in your HTML file.
- v1.4.0 When an image is injected to the publisher site without adding the background panel now you can do this image clickable without using transparent gutters as panels. The gutters will be created using a DIV element on the page. You only will need to change the property "clickable” to “true" in the custom variable "mdPageBackground"
- v1.4.0 A new feature was added that now examines the publisher page and finds the widest element so you can set your header panel to the same width automatically. This is an experimental new feature that is being tested in certifications. (by default will be disabled)
- v1.4.0 Some minor bugs were fixed
- V1.4.0 the custom variable mdViewabilityTarget was removed. Now the ViewabilityTarget is assigned automatically
Release: June 29, 2017 (v1.3.0)
- v1.3.0 VideoWall: Autoplay in mobile devices (excluding Android Native Browsers)
- v1.3.0 Video, Non-Video(Sync) and Wallpaper: DomainConfig file has been removed from the templates
- v1.3.0 New template (Image-Wallpaper): Background injection feature, basic (in CSS or Div) or using breackpoints
- v1.3.0 New template (MSN): Special template for MSN. Like the 'ResponsiveSkin' format
- CustomScript v1.3.0: New method to inject a background image on the publisher's page with a new custom variable or from any template.
Bugfix: December 20, 2016 (Custom Script v1.2.2 -- workspace unchanged)
- v1.2.1 only fixed instant loading ads, this bug fix release (v1.2.2) fixes both polite and instant for CSS/JS injection on Ad Load timing
Bugfix: December 9, 2016 (Custom Script v1.2.1 -- workspace unchanged)
- Fixed bug related to CSS/JS injection on Ad Load timing
Release: November 10, 2016 (v1.2.0)
Workspace and Custom Script updated
- Programmatic Support
- Custom Backup Image (any size you want)
- Asymmetrical Layout Support
- Converted domainConfig.js vars to Custom Variables
- Customized header injection location
- Banner Viewability set to header panel can be customized
Release: July 12, 2016 (v1.1.0)
- Two new templates Videowall and Wallpaper released with addition to old templates.
- Header now pushes page content downside gradually and while collapsing page content will come back to its original location gradually. Header expand and collapse animation can be customised through custom variables.
- Along with per domain CSS style sheet a javascript file can also be pushed in page through domain configuration file.
- Local preview supported for panels.
- Page scroll event can be listened inside creative javascript.
Release: Jan 20, 2016 (v1.0.0)
- Initial release
Known Issues
- A known bug in iPad and iPhone is not possible to use "fixed" property on the background when you use mdPageBackground variable or mediaQueries option or changePageBackground function, instead of "fixed" will be changed to "scroll" only on iPad and iPhone devices
- The Platform's preview is not very precise and you only will see the basic behavior of the format
- Autoplay feature will not be available in some unsupported devices. Currently the only environments listed within the support matrix for this template, as seen in the "Supported Platforms" section of this document, which do not support autoplay video are iOS9 and Samsung browser version 6.
- On Ipad 11.3 after the first expansion the big play button will not shown, but you can play the video with the small one
Copyright 2017 Sizmek. All rights reserved. |
The information contained in this document is proprietary and confidential to Sizmek and/or any of its affiliated companies. Disclosure, copying, reproduction, storing or any use of this document or any part thereof without the express prior, written consent of Sizmek or its authorized representatives is strictly prohibited. The information furnished in this document is believed to be accurate and reliable. However no responsibility is assumed by Sizmek for the use of this information. Sizmek reserves the right to make changes to the information included in this document at any time and without notice. |
Flash is either a registered trademark or trademark of Adobe Systems Incorporated in the United States and/or other countries. Trademark Note: Sizmek, the Sizmek logo, Sizmek Rich Media, Sizmek Mobile, Sizmek Video, Sizmek Channel Connect, Sizmek Workshop, etc. are trademarks and/or registered trademarks of Sizmek. All other trademarks are the property of their respective owners. |
Comments